- 背景
最近想在自己的后台模块设计实现消息推送的功能;
原本根据网友经验,找到了 【workerMan
】;
而在阅读学习中,发现web-msg-sender 消息推送框架
更为适合;
所以,在此整理一下简单的使用方法,后期可自行拓展 …
- 环境
框架:ThinkPHP5.1.2
系统:CentOS7.2 、Windows10
- 首先,了解一下【
WEB消息推送框架: web-msg-sender
】:
安装/实现步骤
- 其实,根据上文中提到的官方网站,根据提示信息即可安装
以我的实际操作为例,简单过程如下:
-
安装
workenMan
-
下载
web-msg-sender
,并解压缩到任意目录官方 【web-msg-sender下载地址】或者【百度网盘备份 提取码:mz20 】,以我的操作为例,解压后的源码放在目录
"/vendor"
下
-
消息发送方设计
前端的页面(
http://fetowwx.com/
)就简单设计页面效果如下:
然后,触发事件,调用 api 向用户推送,源码参考如下:public function index(Request $request) { $msg = $request->param("msg","空"); $msg = (isset($msg)&&$msg!="")?$msg:null; if (!$msg){ return showMsg(0,"未填写信息"); } // TODO 指明给谁推送,为空表示向所有在线用户推送 $to_uid = ""; // 推送的url地址,使用自己的服务器地址,此处使用的是虚拟域名 $push_api_url = "http://fetowwx.com:2121/"; $post_data = array( "type" => "publish", "content" => $msg,//json_encode($arrTest), "to" => $to_uid, ); $ch = curl_init (); curl_setopt ( $ch, CURLOPT_URL, $push_api_url ); curl_setopt ( $ch, CURLOPT_POST, 1 ); curl_setopt ( $ch, CURLOPT_HEADER, 0 ); curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 ); curl_setopt ( $ch, CURLOPT_POSTFIELDS, $post_data ); curl_setopt ($ch, CURLOPT_HTTPHEADER, array("Expect:")); $return = curl_exec ( $ch ); curl_close ( $ch ); //var_export($return); if ($msg){ return showMsg(1,"发送信息:'$msg'---".$return); }else{ return showMsg(0,"未填写信息"); } }
-
消息接收页面设计
为保证功能(
http://fetowwx.com/index/contact.html
),简单设计如下即可
html 页面核心代码如下:<script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script> <script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script> <div class="container"> <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;"> <div> <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">我就是我,不一样的烟火!</button> <br> <br> <button type="button" class="layui-btn layui-btn-normal layui-btn-radius btn-login-uid">百搭按钮</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius btn-msg-sender">HELLO</button> <button type="button" id="online_box" class="layui-btn layui-btn-primary layui-btn-radius">我就是我,不一样的烟火!</button> </div> </fieldset> </div> <script> $(document).ready(function () { console.log("start"); // 使用时替换成真实的uid,这里方便演示使用时间戳 var uid = Date.parse(new Date()); // 连接服务端 var socket = io('http://'+document.domain+':2120'); // 连接后登录 socket.on('connect', function(){ socket.emit('login', uid); $(".btn-login-uid").html("用户ID:"+uid); console.log("connect"); }); // 后端推送来消息时 socket.on('new_msg', function(msg){ $('.btn-msg-sender').html('收到消息:'+msg); console.log("connect"); }); // 后端推送来在线数据时 socket.on('update_online_count', function(online_stat){ console.log('online_stat:'+online_stat); $('#online_box').html(online_stat); }); }); </script>
-
运行
linux系统 cd 到到框架目录里运行:
php start.php start -d
;
windows 系统进入到框架目录里双击"start_for_win.bat"
文件启动
-
测试效果
打开发送方页面、接收方页面,进行消息发送测试即可
【附录】
- 本地测试,建议配置网站的虚拟域名,对应更改后端
api
中的推送地址$push_api_url
正确对应 - 如果是
Linux
系统
(若是无法访问请检查服务器防火墙,如果是云服务器还要设置安全组)
以我为例,需要防火墙开启如下端口:
- HTTPS站点 使用 web-msg-sender 进行推送的解决办法
tip: 整了大半天,这个方法,建议参考新整理的博客—— 【GatewayWorker 配置 WSS 服务踩坑纪实
】