webman/push

webman/push là một plugin dịch vụ đẩy miễn phí phía server, client dựa trên mô hình đăng ký, tương thích với pusher, có nhiều client như JS, Android (java), IOS (swift), IOS (Obj-C), uniapp, .NET, Unity, Flutter, AngularJS, v.v. SDK đẩy phía backend hỗ trợ PHP, Node, Ruby, Asp, Java, Python, Go, Swift, v.v. Client đi kèm với tính năng heartbeat và tự động kết nối lại khi mất kết nối, rất dễ sử dụng và ổn định. Phù hợp với nhiều tình huống giao tiếp tức thì như đẩy tin nhắn, trò chuyện, v.v.

Plugin đi kèm với một client js trang web push.js và client uniapp uniapp-push.js, các client ngôn ngữ khác có thể tải tại https://pusher.com/docs/channels/channels_libraries/libraries/.

Cài đặt

composer require webman/push

Client (javascript)

Nhúng client javascript

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

Sử dụng client (kênh công khai)

// Thiết lập kết nối
var connection = new Push({
    url: 'ws://127.0.0.1:3131', // địa chỉ websocket
    app_key: '<app_key, lấy từ config/plugin/webman/push/app.php>',
    auth: '/plugin/webman/push/auth' // xác thực đăng ký (chỉ dành cho kênh riêng tư)
});
// Giả sử user uid là 1
var uid = 1;
// Trình duyệt lắng nghe tin nhắn từ kênh user-1, tức là tin nhắn của người dùng uid là 1
var user_channel = connection.subscribe('user-' + uid);

// Khi kênh user-1 có tin nhắn sự kiện message
user_channel.on('message', function(data) {
    // data chứa nội dung tin nhắn
    console.log(data);
});
// Khi kênh user-1 có tin nhắn sự kiện friendApply
user_channel.on('friendApply', function (data) {
    // data chứa thông tin liên quan đến yêu cầu kết bạn
    console.log(data);
});

// Giả sử group id là 2
var group_id = 2;
// Trình duyệt lắng nghe tin nhắn từ kênh group-2, tức là lắng nghe tin nhắn nhóm 2
var group_channel = connection.subscribe('group-' + group_id);
// Khi nhóm 2 có sự kiện tin nhắn message
group_channel.on('message', function(data) {
    // data chứa nội dung tin nhắn
    console.log(data);
});

Mẹo
Ví dụ trên cho thấy subscribe thực hiện việc đăng ký kênh, message friendApply là các sự kiện trên kênh. Kênh và sự kiện là chuỗi tùy ý, không cần cấu hình trước trên server.

Đẩy phía server (PHP)

use Webman\Push\Api;
$api = new Api(
    // dưới webman có thể trực tiếp sử dụng config để lấy cấu hình, trong môi trường không phải webman cần viết cấu hình tương ứng
    'http://127.0.0.1:3232',
    config('plugin.webman.push.app.app_key'),
    config('plugin.webman.push.app.app_secret')
);
// Đẩy tin nhắn sự kiện message đến tất cả client đăng ký user-1
$api->trigger('user-1', 'message', [
    'from_uid' => 2,
    'content'  => 'Xin chào, đây là nội dung tin nhắn'
]);

Kênh riêng tư

Trong ví dụ trên bất kỳ người dùng nào cũng có thể đăng ký thông tin qua Push.js, nếu thông tin là thông tin nhạy cảm, như vậy là không an toàn.

webman/push hỗ trợ đăng ký kênh riêng tư, kênh riêng tư bắt đầu bằng private-. Ví dụ

var connection = new Push({
    url: 'ws://127.0.0.1:3131', // địa chỉ websocket
    app_key: '<app_key>',
    auth: '/plugin/webman/push/auth' // xác thực đăng ký (chỉ dành cho kênh riêng tư)
});

// Giả sử user uid là 1
var uid = 1;
// Trình duyệt lắng nghe tin nhắn trên kênh riêng tư private-user-1
var user_channel = connection.subscribe('private-user-' + uid);

Khi client đăng ký một kênh riêng tư (kênh bắt đầu bằng private-), trình duyệt sẽ gửi một yêu cầu xác thực ajax (địa chỉ ajax là địa chỉ cấu hình cho tham số auth khi khởi tạo new Push), nhà phát triển có thể kiểm tra người dùng hiện tại có quyền lắng nghe kênh này hay không. Điều này đảm bảo tính an toàn của việc đăng ký.

Về xác thực tham khảo mã trong config/plugin/webman/push/route.php.

Đẩy từ client

Các ví dụ trên đều là client đăng ký một kênh, server gọi API để đẩy. webman/push cũng hỗ trợ client đẩy tin nhắn trực tiếp.

Lưu ý
Đẩy giữa các client chỉ hỗ trợ kênh riêng tư (kênh bắt đầu bằng private-), và client chỉ có thể kích hoạt các sự kiện bắt đầu bằng client-.

Ví dụ về việc client kích hoạt sự kiện đẩy

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

Lưu ý
Mã trên gửi dữ liệu sự kiện client-message đến tất cả (ngoại trừ client hiện tại) client đã đăng ký private-user-1 (client không nhận dữ liệu mà mình đã đẩy đi).

webhooks

webhook dùng để nhận một số sự kiện từ kênh.

Hiện tại chủ yếu có 2 sự kiện:

  • 1、channel_added
    Sự kiện được kích hoạt khi một kênh từ không có client trực tuyến sang trạng thái có client trực tuyến, hay nói cách khác là sự kiện trực tuyến

  • 2、channel_removed
    Sự kiện được kích hoạt khi tất cả client của một kênh đều ngoại tuyến, hay nói cách khác là sự kiện ngoại tuyến

Mẹo
Những sự kiện này rất hữu ích trong việc duy trì trạng thái trực tuyến của người dùng.

Lưu ý
Địa chỉ webhook được cấu hình trong config/plugin/webman/push/app.php.
Mã xử lý sự kiện webhook tham khảo logic trong config/plugin/webman/push/route.php.
Do làm mới trang dẫn đến người dùng thoát tạm thời không nên xem là ngoại tuyến, webman/push sẽ thực hiện kiểm tra độ trễ, vì vậy sự kiện trực tuyến/ngoại tuyến sẽ có độ trễ từ 1-3 giây.

wss proxy (SSL)

Khi sử dụng https không thể sử dụng kết nối ws, cần sử dụng kết nối wss. Trong tình huống này có thể sử dụng nginx để proxy wss, cấu hình tương tự như sau:

server {
    # .... cấu hình khác bị bỏ qua ...

    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;
    }
}

Lưu ý: app_key trong cấu hình trên có thể lấy từ config/plugin/webman/push/app.php

Khởi động lại nginx, sau đó sử dụng cách sau để kết nối đến server

var connection = new Push({
    url: 'wss://example.com',
    app_key: '<app_key, lấy từ config/plugin/webman/push/app.php>',
    auth: '/plugin/webman/push/auth' // xác thực đăng ký (chỉ dành cho kênh riêng tư)
});

Lưu ý

  1. Địa chỉ yêu cầu bắt đầu bằng wss
  2. Không cần ghi cổng
  3. Phải sử dụng tên miền đúng với chứng chỉ ssl để kết nối

Hướng dẫn sử dụng push-vue.js

1、Sao chép tệp push-vue.js vào thư mục dự án, ví dụ: src/utils/push-vue.js

2、Nhúng vào trang vue


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

onMounted(() => {
  console.log('Component đã được gán') 

  // Khởi tạo webman-push

  // Thiết lập kết nối
  var connection = new Push({
    url: 'ws://127.0.0.1:3131', // địa chỉ websocket
    app_key: '<app_key, lấy từ config/plugin/webman/push/app.php>',
    auth: '/plugin/webman/push/auth' // xác thực đăng ký (chỉ dành cho kênh riêng tư)
  });

  // Giả sử user uid là 1
  var uid = 1;
  // Trình duyệt lắng nghe tin nhắn từ kênh user-1, tức là tin nhắn của người dùng uid là 1
  var user_channel = connection.subscribe('user-' + uid);

  // Khi kênh user-1 có tin nhắn sự kiện message
  user_channel.on('message', function (data) {
    // data chứa nội dung tin nhắn
    console.log(data);
  });
  // Khi kênh user-1 có tin nhắn sự kiện friendApply
  user_channel.on('friendApply', function (data) {
    // data chứa thông tin liên quan đến yêu cầu kết bạn
    console.log(data);
  });

  // Giả sử group id là 2
  var group_id = 2;
  // Trình duyệt lắng nghe tin nhắn từ kênh group-2, tức là lắng nghe tin nhắn nhóm 2
  var group_channel = connection.subscribe('group-' + group_id);
  // Khi nhóm 2 có sự kiện tin nhắn message
  group_channel.on('message', function (data) {
    // data chứa nội dung tin nhắn
    console.log(data);
  });

})

</script>

Địa chỉ client khác

webman/push tương thích với pusher, địa chỉ tải cho các ngôn ngữ khác (Java Swift .NET Objective-C Unity Flutter Android IOS AngularJS, v.v.):
https://pusher.com/docs/channels/channels_libraries/libraries/