訊息通知 使用 [ Web-msg-sender]

chaofu發表於2020-07-07
Web

需求 - 訊息通知 （使用框架 是tp6）

pc 網頁端 需要有訊息通知這個功能，希望 後臺自動推送訊息給瀏覽器 不需要 使用 ajax 輪詢,採用 web-msg-sender

web-msg-sender 介紹

web-msg-sender是一款web長連線推送框架，採用PHPSocket.IO開發，基於WebSocket長連線通訊，如果瀏覽器不支援WebSocket則自動轉用comet推送。 通過後臺推送訊息，訊息可以即時推送到客戶端，非輪詢，實時性非常好，效能很高。

特點：

  • 多瀏覽器支援
  • 支援針對單個使用者推送訊息
  • 支援向所有使用者推送訊息
  • 長連線推送（websocket或者comet），訊息即時到達
  • 支援線上使用者數實時統計展示
  • 支援線上頁面數實時統計展示
  • 支援跨域推送

環境要求

依賴的其他的專案 workerman 和 phpSocket

安裝步驟

// 安裝 web-msg-sender
 git clone https://github.com/walkor/web-msg-sender
 composer install
// 安裝 workerman
composer require workerman/workerman

// 安裝 phpsocket.io
 composer require workerman/phpsocket.io

修改 web-msg-sender 的檔案

start_io.php 和 start_web.php


// include __DIR__ . '/vendor/autoload.php';
// 修改為  這個試 位置不一樣 路徑會不一樣 ，本專案是跟 public 同級目錄
include '../vendor/autoload.php';

啟動 win10 環境 進入對應的目錄

php start_io.php start_web.php

js 客戶端程式碼


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="main.css" rel="stylesheet" type="text/css" />
<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>
<script src='/notify.js'></script>
</head>
<body>

<div class="notification sticky hide">
    <p id="content"> </p>
    <a class="close" href="javascript:"> <img src="/icon-close.png" /></a>
</div>
<div class="wrapper">
    <div style="width:850px;">
    <h3>介紹:</h3>
    <b>Web-msg-sender</b> 是一個web訊息推送系統，基於<a rel="nofollow" href="https://github.com/walkor/phpsocket.io">PHPSocket.IO</a>開發。<br><br><br>
    <h3>支援以下特性：</h3>
    <ul>
      <li>多瀏覽器支援</li>
      <li>支援針對單個使用者推送訊息</li>
      <li>支援向所有使用者推送訊息</li>
      <li>長連線推送（websocket或者comet），訊息即時到達</li>
      <li>支援線上使用者數實時統計推送（見頁尾統計）</li>
      <li>支援線上頁面數實時統計推送（見頁尾統計）</li>
    </ul>
    <h3>測試:</h3>
    當前使用者uid：<b class="uid"></b><br>
    可以通過url：<a id="send_to_one" href="http://www.workerman.net:2121/?type=publish&to=1445590039000&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank"><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=<b class="uid"></b>&content=訊息內容</font></a>  向當前使用者傳送訊息<br>
    可以通過url：<a href="http://www.workerman.net:2121/?type=publish&to=&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank" id="send_to_all" ><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=&content=訊息內容</font></a> 向所有線上使用者推送訊息<br>
    <script>
        // 使用時替換成真實的uid，這裡方便演示使用時間戳
  var uid = Date.parse(new Date());
        $('#send_to_one').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9&to='+uid);
        $('.uid').html(uid);
      $('#send_to_all').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9');
        $('.uid').html(uid);
        $('.domain').html(document.domain);
    </script>
</div>

<script>
$(document).ready(function () {
    // 連線服務端
  var socket = io('http://'+document.domain+':2120');
    console.log(document.domain)
    // 連線後登入
  socket.on('connect', function(){
       socket.emit('login', uid);
    });
    // 後端推送來訊息時
  socket.on('new_msg', function(msg){
        console.log("new_msg==",msg)
         $('#content').html('收到訊息：'+msg);
         // $('.notification.sticky').notify();
  });
    // 後端推送來線上資料時
  socket.on('update_online_count', function(online_stat){
        $('#online_box').html(online_stat);
    });
});
</script>
<div id="footer">
<center id="online_box"></center>
<center><p style="font-size:11px;color:#555;"> Powered by <a href="http://www.workerman.net/web-sender" target="_blank"><strong>web-msg-sender!</strong></a></p></center>
</div>
</body>
</html>

服務端傳送 訊息給 客戶端

public function send(Request $request)
{
  $msg = $request->param("msg","空");
  $msg = (isset($msg)&&$msg!="")?$msg:null;
  if (!$msg){
    return "未填寫資訊";
  }
  // TODO 指明給誰推送，為空表示向所有線上使用者推送
  $to_uid = "1594093913000";
  // 推送的url地址 
  $push_api_url = "http://127.0.0.1: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 );
 dump($return);
 if ($msg){
      return '傳送資訊';
 }else{
      return '未填寫資訊';
 }}

介紹很詳細的 一篇文章

www.ptbird.cn/web-msg-sender-send-c...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章