README

webman push plugin https://www.workerman.net/plugin/2

原版地址：https://github.com/webman-php/push

安装

composer require ledc/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/ 下载

js 文件说明

 push-uniapp.js #适用于uniapp项目内使用
 push-vue.js #适用于vue项目内使用
 push.js #适用于直接引入js常规项目内使用、
 push-miniprogram.js #适用于微信小程序项目内使用

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: 'https://你的域名.com/plugin/webman/push/auth' // 订阅鉴权(仅限于私有频道)
 });

 // 假设用户uid为1
 var uid = 1;
 // 浏览器监听user-1频道的消息，也就是用户uid为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频道的消息，也就是监听群组2的群消息
 var group_channel = connection.subscribe('group-' + group_id);
 // 当群组2有message消息事件时
 group_channel.on('message', function (data) {
 // data里是消息内容
 console.log(data);
 });


})

</script>

push-miniprogram.js 使用说明

1、将文件 push-miniprogram.js 复制到项目目录下，如：src/utils/push-miniprogram.js

2、在 app.js内引入

import Push from '../utils/push-miniprogram'

App({

 onLanuch(() => {

 //实例化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: 'https://你的域名.com/plugin/webman/push/auth' // 订阅鉴权(仅限于私有频道)
 });

 // 假设用户uid为1
 var uid = 1;
 // 浏览器监听user-1频道的消息，也就是用户uid为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频道的消息，也就是监听群组2的群消息
 var group_channel = connection.subscribe('group-' + group_id);
 // 当群组2有message消息事件时
 group_channel.on('message', function (data) {
 // data里是消息内容
 console.log(data);
 });
 })
})

进度条

HTML部分

<!-- 顶 部 右 侧 菜 单 -->
<li class="layui-nav-item layui-hide-xs" title="长连接状态">
 <a href="#" class="layui-icon layui-icon-wifi" style="color: #ff5722;" id="websocket_state"></a>
</li>

<!-- 进度条 -->
<div id="progress-layer-wrapper" style="display: none;">
 <div class="layui-card">
 <div class="layui-card-header">执行数：<span class="layui-badge-rim"
 id="progress-layer-count">0</span> / 总数：<span
 class="layui-badge-rim" id="progress-layer-total">0</span></div>
 <div class="layui-card-body">
 <div class="layui-progress layui-progress-big" lay-filter="filter-progress">
 <div class="layui-progress-bar" lay-percent="0%"></div>
 </div>
 </div>
 </div>
</div>
<script src="/plugin/ledc/push/push.js"></script>

js部分

layui.use(["jquery", "popup", "notice", "element"], function () {
 let $ = layui.$;
 let notice = layui.notice;
 let element = layui.element;
 // 渲染进度条组件
 element.render('progress', 'filter-progress');

 <?php
 $app_key = config('plugin.ledc.push.app.app_key');
 $websocket_port = parse_url(config('plugin.ledc.push.app.websocket'), PHP_URL_PORT);
 $auth = config('plugin.ledc.push.app.auth'); 
 ?>

 const hostname = location.hostname;
 const host = location.host;

 /**
 * 与服务器长链接通信
 */
 function connect() {
 let connection = new Push({
 url: (location.protocol === 'https:' ? 'wss://' : 'ws://') + (-1 !== host.indexOf(':') ? hostname + ':<?=$websocket_port?>' : hostname), // websocket地址
 app_key: '<?=$app_key?>',
 auth: '<?=$auth?>',
 });
 //长链接状态
 setInterval(() => {
 if (connection.connection.state === 'connected') {
 document.getElementById('websocket_state').style.color = '#16b777';
 } else {
 document.getElementById('websocket_state').style.color = '#ff5722';
 notice.error('长链接断线');
 }
 }, 1000);
 let channel = connection.subscribe('private-webman-admin');
 let dispatcher = connection.subscribe('dispatcher');
 dispatcher.on('notify', function (data) {
 console.info(data)
 });

 // 普通消息
 channel.on('message', function (data) {
 console.info(data)
 });

 // 进度条
 channel.on('progress', function (data) {
 const type = data.type;
 const count = data.success + data.fail;
 const total = data.total;
 const percent = count + ' / ' + total;
 // 设置进度值
 element.progress('filter-progress', percent);
 document.getElementById('progress-layer-count').innerText = count;
 document.getElementById('progress-layer-total').innerText = total;
 // 捕获页面元素，弹出进度条
 layer.open({
 type: 1,
 id: 'progress-layer' + type,
 title: '任务进度条',
 area: '520px',
 shade: false, // 不显示遮罩
 content: $('#progress-layer-wrapper'), // 捕获的元素
 success: function (layero, index, that) {
 // 弹层的最外层元素的 jQuery 对象
 console.log(layero);
 // 弹层的索引值
 console.log(index);
 // 弹层内部原型链中的 this --- 2.8+
 console.log(that);
 },
 end: function () {
 // layer.msg('关闭后的回调', {icon:6});
 }
 });
 });
 // 通知
 channel.on('notify', function (data) {
 switch (data.type) {
 case 'success':
 notice.success(data.msg);
 break;
 case 'error':
 notice.error(data.msg);
 break;
 case 'warning':
 notice.warning(data.msg);
 break;
 case 'info':
 notice.info(data.msg);
 break;
 default:
 notice.clear();
 break;
 }
 });
 }

 connect();
});