webman/push

webman/push는 무료 푸시 서버 플러그인으로 클라이언트는 구독 모델을 기반으로 하며, pusher와 호환됩니다. JS, 안드로이드(java), IOS(swift), IOS(Obj-C), uniapp, .NET, Unity, Flutter, AngularJS와 같은 다양한 클라이언트를 제공합니다. 백엔드 푸시 SDK는 PHP, Node, Ruby, Asp, Java, Python, Go, Swift 등을 지원합니다. 클라이언트에는 심장박동 유지 및 자동 재연결 기능이 내장되어 있어 사용이 간편하고 안정적입니다. 메시지 푸시, 채팅 등 많은 실시간 통신 시나리오에 적합합니다.

플러그인 내부에는 웹 JS 클라이언트인 push.js와 uniapp 클라이언트인 uniapp-push.js가 기본 제공되며, 다른 언어의 클라이언트는 https://pusher.com/docs/channels/channels_libraries/libraries/에서 다운로드할 수 있습니다.

설치

composer require webman/push

클라이언트 (javascript)

javascript 클라이언트 불러오기

<script src="/plugin/webman/push/push.js"> </script>

클라이언트 사용(공개 채널)

// 연결 설정
var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket 주소
    app_key: '<app_key, config/plugin/webman/push/app.php에서 가져오기>',
    auth: '/plugin/webman/push/auth' // 구독 인증(오직 비공식 채널에만 해당)
});
// 사용자의 uid가 1이라고 가정
var uid = 1;
// 브라우저가 user-1 채널의 메시지를 수신
var user_channel = connection.subscribe('user-' + uid);

// user-1 채널에서 message 이벤트가 발생할 때
user_channel.on('message', function(data) {
    // data 안에 메시지 내용이 포함됨
    console.log(data);
});
// user-1 채널에서 friendApply 이벤트가 발생할 때
user_channel.on('friendApply', function (data) {
    // data 안에 친구 요청 관련 정보가 포함됨
    console.log(data);
});

// 그룹 ID가 2라고 가정
var group_id = 2;
// 브라우저가 group-2 채널의 메시지를 수신
var group_channel = connection.subscribe('group-' + group_id);
// 그룹 2에서 message 메시지 이벤트 발생 시
group_channel.on('message', function(data) {
    // data 안에 메시지 내용이 포함됨
    console.log(data);
});

팁
위의 예제에서 subscribe는 채널 구독을 구현하고 있으며, message, friendApply는 채널의 이벤트입니다. 채널과 이벤트는 임의의 문자열로, 서버 측에서 미리 설정할 필요가 없습니다.

서버 측 푸시(PHP)

use Webman\Push\Api;
$api = new Api(
    // webman에서 config를 사용하여 직접 구성을 가져올 수 있으며, 비웹맨 환경에서는 수동으로 구성 작성 필요
    'http://127.0.0.1:3232',
    config('plugin.webman.push.app.app_key'),
    config('plugin.webman.push.app.app_secret')
);
// user-1을 구독 중인 모든 클라이언트에 message 이벤트의 메시지를 푸시합니다.
$api->trigger('user-1', 'message', [
    'from_uid' => 2,
    'content'  => '안녕하세요, 이것은 메시지 내용입니다.'
]);

비공식 채널

위의 예제에서 모든 사용자가 Push.js를 통해 정보를 구독할 수 있는데, 만약 정보가 민감한 내용이라면 이는 안전하지 않습니다.

webman/push는 비공식 채널 구독을 지원하며, 비공식 채널은 private-로 시작하는 채널입니다. 예를 들어

var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket 주소
    app_key: '<app_key>',
    auth: '/plugin/webman/push/auth' // 구독 인증(오직 비공식 채널에만 해당)
});

// 사용자의 uid가 1이라고 가정
var uid = 1;
// 브라우저가 private-user-1 비공식 채널의 메시지를 수신
var user_channel = connection.subscribe('private-user-' + uid);

클라이언트가 비공식 채널(private-로 시작하는 채널)을 구독할 때, 브라우저는 ajax 인증 요청을 발생시킵니다(ajax 주소는 new Push 시 auth 매개변수로 설정된 주소입니다). 개발자는 여기서 현재 사용자의 해당 채널 수신 권한을 판단할 수 있습니다. 이는 구독의 안전성을 보장합니다.

인증에 대한 내용은 config/plugin/webman/push/route.php의 코드를 참조하십시오.

클라이언트 푸시

위의 예제는 클라이언트가 특정 채널을 구독하고 서버가 API를 호출하여 푸시하는 것입니다. webman/push는 클라이언트가 직접 메시지를 푸시하는 것도 지원합니다.

주의
클라이언트 간 푸시는 오직 비공식 채널(private-로 시작하는 채널)만 지원하며, 클라이언트는 client-로 시작하는 이벤트만 트리거할 수 있습니다.

클라이언트가 이벤트를 푸시하는 예제

var user_channel = connection.subscribe('private-user-1');
user_channel.on('client-message', function (data) {
    // 
});
user_channel.trigger('client-message', {form_uid:2, content:"hello"});

주의
위 코드는 private-user-1을 구독하고 있는 모든 클라이언트(현재 클라이언트를 제외한)에 client-message 이벤트의 데이터를 푸시합니다(푸시하는 클라이언트는 자신의 푸시 데이터를 수신하지 않습니다).

웹훅

웹훅은 채널의 일부 이벤트를 수신하는 데 사용됩니다.

현재 주요 이벤트는 2개입니다:

  • 1、channel_added
    클라이언트가 온라인 상태에서 오프라인 상태로 변경될 때 트리거되는 이벤트입니다. 또는 온라인 이벤트라고 할 수 있습니다.

  • 2、channel_removed
    특정 채널의 모든 클라이언트가 오프라인 상태가 될 때 트리거되는 이벤트. 오프라인 이벤트라고 할 수 있습니다.

팁
이러한 이벤트는 사용자 온라인 상태를 유지하는 데 매우 유용합니다.

주의
웹훅 주소는 config/plugin/webman/push/app.php에서 설정합니다.
웹훅 이벤트를 수신하고 처리하는 코드는 config/plugin/webman/push/route.php의 로직을 참조합니다.
페이지 새로 고침으로 인해 사용자에게 일시적인 오프라인 상태가 발생하는 것은 오프라인으로 간주하지 않아야 하며, webman/push는 지연 판단을 수행하므로 온라인/오프라인 이벤트는 1-3초의 지연이 있을 수 있습니다.

wss 프록시(SSL)

https 하에서는 ws 연결을 사용할 수 없어 wss 연결을 이용해야 합니다. 이러한 경우 nginx를 사용하여 wss를 프록시할 수 있으며, 구성은 다음과 같습니다:

server {
    # .... 다른 구성 내용 생략 ...

    location /app/<app_key>
    {
        proxy_pass http://127.0.0.1:3131;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Real-IP $remote_addr;
    }
}

주의 위 설정의 <app_key>는 config/plugin/webman/push/app.php에서 가져옵니다.

nginx를 재시작한 후, 다음 방식으로 서버에 연결합니다.

var connection = new Push({
    url: 'wss://example.com',
    app_key: '<app_key, config/plugin/webman/push/app.php에서 가져오기>',
    auth: '/plugin/webman/push/auth' // 구독 인증(오직 비공식 채널에만 해당)
});

주의

  1. 요청 주소는 wss로 시작
  2. 포트 번호는 생략
  3. 반드시 ssl 인증서에 해당하는 도메인으로 연결해야 함

push-vue.js 사용 설명

1、파일 push-vue.js를 프로젝트 디렉토리로 복사합니다. 예: src/utils/push-vue.js

2、vue 페이지 내에서 불러옵니다.


<script lang="ts" setup>
import {  onMounted } from 'vue'
import { Push } from '../utils/push-vue'

onMounted(() => {
  console.log('컴포넌트가 마운트됨') 

  // webman-push 인스턴스 생성

  // 연결 설정
  var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket 주소
    app_key: '<app_key, config/plugin/webman/push/app.php에서 가져오기>',
    auth: '/plugin/webman/push/auth' // 구독 인증(오직 비공식 채널에만 해당)
  });

  // 사용자의 uid가 1이라고 가정
  var uid = 1;
  // 브라우저가 user-1 채널의 메시지를 수신
  var user_channel = connection.subscribe('user-' + uid);

  // user-1 채널에서 message 이벤트가 발생할 때
  user_channel.on('message', function (data) {
    // data 안에 메시지 내용이 포함됨
    console.log(data);
  });
  // user-1 채널에서 friendApply 이벤트가 발생할 때
  user_channel.on('friendApply', function (data) {
    // data 안에 친구 요청 관련 정보가 포함됨
    console.log(data);
  });

  // 그룹 ID가 2라고 가정
  var group_id = 2;
  // 브라우저가 group-2 채널의 메시지를 수신
  var group_channel = connection.subscribe('group-' + group_id);
  // 그룹 2에서 message 메시지 이벤트 발생 시
  group_channel.on('message', function (data) {
    // data 안에 메시지 내용이 포함됨
    console.log(data);
  });

})

</script>

기타 클라이언트 주소

webman/push는 pusher와 호환되며, 다른 언어(Java Swift .NET Objective-C Unity Flutter Android IOS AngularJS 등)의 클라이언트 주소 다운로드는 다음 링크에서 가능합니다:
https://pusher.com/docs/channels/channels_libraries/libraries/