ThinkPHP5.1 使用 web-msg-sender 实现WEB消息推送实例讲解

  • 背景
    最近想在自己的后台模块设计实现消息推送的功能;
    原本根据网友经验,找到了 【 workerMan】;
    而在阅读学习中,发现 web-msg-sender 消息推送框架 更为适合;
    所以,在此整理一下简单的使用方法,后期可自行拓展 …
- 环境
	框架:ThinkPHP5.1.2
	系统:CentOS7.2 、Windows10

安装/实现步骤

  • 其实,根据上文中提到的官方网站,根据提示信息即可安装
    以我的实际操作为例,简单过程如下:
  1. 安装 workenMan

    参考手册检查/安装workerman环境 】或者 【ThinkPHP5.1 安装 workerman 指导

  2. 下载 web-msg-sender ,并解压缩到任意目录

    官方 【web-msg-sender下载地址】或者【百度网盘备份 提取码:mz20 】,以我的操作为例,解压后的源码放在目录 "/vendor"

  3. 消息发送方设计

    前端的页面(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,"未填写信息");
            }
    }
    
  4. 消息接收页面设计

    为保证功能(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>
    
  5. 运行

    linux系统 cd 到到框架目录里运行: php start.php start -d;
    windows 系统进入到框架目录里双击 "start_for_win.bat" 文件启动

  6. 测试效果

    打开发送方页面、接收方页面,进行消息发送测试即可


【附录】

  1. 本地测试,建议配置网站的虚拟域名,对应更改后端 api 中的推送地址 $push_api_url 正确对应
  2. 如果是 Linux 系统
    (若是无法访问请检查服务器防火墙,如果是云服务器还要设置安全组)
    以我为例,需要防火墙开启如下端口:
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值