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

  • 2019 年 10 月 25 日
  • 筆記

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

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

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

安裝/實現步驟

  • 其實，根據上文中提到的官方網站，根據提示信息即可安裝 以我的實際操作為例，簡單過程如下：
  1. 安裝 workenMan 【ThinkPHP5.1 安裝 workerman 指導】
  2. 下載 web-msg-sender，並解壓縮到任意目錄 官方 【web-msg-sender下載地址】或者【百度網盤備份 提取碼：mz20 】 以我的操作為例，解壓後的源碼放在目錄 "/vendor"下
  1. 消息發送方設計 前端的頁面（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,"未填寫信息");          }  }
  1. 消息接收頁面設計 為保證功能（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>
  1. 運行 linux系統 cd 到到框架目錄里運行: php start.php start -d; windows 系統進入到框架目錄里雙擊 "start_for_win.bat" 文件啟動
  1. 測試效果 打開發送方頁面、接收方頁面，進行消息發送測試即可

附錄

  • 注意事項
  1. 本地測試，建議配置網站的虛擬域名，對應更改後端 api 中的推送地址 $push_api_url 正確對應
  2. 如果是 Linux 系統 (若是無法訪問請檢查服務器防火牆，如果是雲服務器還要設置安全組) 以我為例，需要防火牆開啟如下端口：

VirMach 便宜 VPS

QNews

QNews