ThinkPHP5.1 使用 web-msg-sender 實現WEB消息推送實例講解

• 背景
  最近想在自己的後臺模塊設計實現消息推送的功能；
  原本根據網友經驗，找到了 【 workerMan】；
  而在閱讀學習中，發現 web-msg-sender 消息推送框架 更爲適合；
  所以，在此整理一下簡單的使用方法，後期可自行拓展 …

• 環境
  框架：ThinkPHP5.1.2
  系統：CentOS7.2 、Windows10

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

安裝/實現步驟

其實，根據上文中提到的官方網站，根據提示信息即可安裝
以我的實際操作爲例，簡單過程如下：

1. 安裝 workenMan
   【參考手冊檢查/安裝workerman環境 】或者 【ThinkPHP5.1 安裝 workerman 指導】

2. 下載 web-msg-sender，並解壓縮到任意目錄
   官方 【web-msg-sender下載地址】或者【百度網盤備份 提取碼：mz20 】
   以我的操作爲例，解壓後的源碼放在目錄 "/vendor"下
   

3. 消息發送方設計
   前端的頁面（http://fetowwx.com/）就簡單設計頁面效果如下：
   然後，觸發事件，調用api向用戶推送，源碼參考如下：

   	 	$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 系統
   (若是無法訪問請檢查服務器防火牆，如果是雲服務器還要設置安全組)
   以我爲例，需要防火牆開啓如下端口：
   

• HTTPS站點 使用 web-msg-sender 進行推送的解決辦法
  tip: 整了大半天，這個方法，我沒有實現，正在進一步摸索中…