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

泥豆芽儿 MT

发布于 2019-10-25 11:49:23

2.3K1

发布于 2019-10-25 11:49:23

本文链接：https://blog.csdn.net/u011415782/article/details/100727827

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

- 环境
	框架：ThinkPHP5.1.2
	系统：CentOS7.2 、Windows10

首先，了解一下【 WEB消息推送框架: web-msg-sender】：

安装/实现步骤

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

安装 workenMan 【ThinkPHP5.1 安装 workerman 指导】
下载 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），简单设计如下即可


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