devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WorkerMan 入门学习之（四）GatewayWorker框架与ThinkPHP5.1框架结合案例

作者：知新_RL | 2024-03-25 11:25:46

赞

踩

gateway::joingroup

GatewayWorker是基于Workerman开发的一个可分布式部署的TCP长连接框架，专门用于快速开发TCP长连接应用，例如app推送服务端、即时IM服务端、游戏服务端、物联网、智能家居等等

文档地址：http://www.workerman.net/gatewaydoc/

一、测试官方DEMO（Windows 版本）

1、下载demo

2、解压到任意位置，我这里为：D:\phpStudy\PHPTutorial\WWW\GatewayWorker

3、进入GatewayWorker目录

4、双击start_for_win.bat启动。（如果出现错误请参考这里设置php环境变量），效果如下

5、命令行窗口运行 telnet 127.0.0.1 8282，输入任意字符即可聊天（非本机测试请将127.0.0.1替换成实际ip）。

PS：以上表示TCP连接测试成功

二、修改测试websocket

1、需要修改 start_gateway.php 指定websocket协议，像这样

$gateway = new Gateway(websocket://0.0.0.0:7272);

2、重新启动 start_for_win.bat

3、测试js

小结：只需要改动一个文件（ start_gateway.php）的协议和端口即可，别的不需用改动。

三、与ThinkPHP5.1框架结合

（一）服务端主动推送消息到客户端

原则：

1、TP5.1框架项目与GatewayWorker独立部署互不干扰

2、所有的业务逻辑都由网站（websocket连接的）页面以post/get请求到TP5.1框架的控制器中完成

3、GatewayWorker不接受客户端发来的数据，即GatewayWorker不处理任何业务逻辑，GatewayWorker仅仅当做一个单向的推送通道

4、仅当TP5.1框架需要向浏览器主动推送数据时才在TP5.1框架中调用Gateway的API(GatewayClient)完成推送

具体实现步骤

1、网站页面建立与GatewayWorker的websocket连接

ws = new WebSocket("ws://127.0.0.1:7272");

 2、GatewayWorker发现有页面发起连接时，将对应连接的client_id发给网站页面

Event.php 内容

  1.     public static function onConnect($client_id)
  2.     {
  3.         $resData = [
  4.             'type' => 'init',
  5.             'client_id' => $client_id,
  6.             'msg' => 'connect is success' // 初始化房间信息
  7.         ];
  8.         Gateway::sendToClient($client_id, json_encode($resData));
  9.     }

index.html 内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>GatewayWorker的websocket连接</title>
  6. </head>
  7. <body>
  8. <h1>GatewayWorker的websocket连接</h1>
  9. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  10. <script type="text/javascript">
  11.     ws = new WebSocket("ws://127.0.0.1:7272");
  12.     // 服务端主动推送消息时会触发这里的onmessage
  13.     ws.onmessage = function(e){
  14.         // json数据转换成js对象
  15.         var data = JSON.parse(e.data);
  16.         console.log(data);
  17.         var type = data.type || '';
  18.         switch(type){
  19.             // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
  20.             case 'init':
  21.                 // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
  22.                 $.post(
  23.                     "{:url('index/chat_room/bind')}",
  24.                     {client_id: data.client_id},
  25.                     function(data)
  26.                     {
  27.                         console.log(data);
  28.                     },
  29.                     'json'
  30.                 );
  31.                 break;
  32.             case  'say':
  33.                 console.log('TP5 msg'+e.data);
  34.                 break;
  35.             // 当mvc框架调用GatewayClient发消息时直接alert出来
  36.             default :
  37.                 alert(e.data);
  38.         }
  39.     };
  40. </script>
  41. </body>
  42. </html>

 3、网站页面收到client_id后触发一个ajax请求(index/chat_room/bind)将client_id发到TP5.0后端，bind方法

  1.     /*
  2.      * 用户登录后初始化以及绑定client_id
  3.      */
  4.     public function bind()
  5.     {
  6.         // 设置GatewayWorker服务的Register服务ip和端口，请根据实际情况改成实际值
  7.         Gateway::$registerAddress = '127.0.0.1:1238';
  8.         $uid = $this->userId;
  9.         $group_id = $this->groupId;
  10.         $client_id = request()->param('client_id');
  11.         // client_id与uid绑定
  12.         Gateway::bindUid($client_id, $uid);
  13.         // 加入某个群组（可调用多次加入多个群组）
  14.         Gateway::joinGroup($client_id, $group_id);
  15.     }

4、后端收到client_id后利用GatewayClient调用Gateway::bindUid($client_id, $uid)将client_id与当前uid(用户id或者客户端唯一标识)绑定。如果有群组、群发功能，也可以利用Gateway::joinGroup($client_id, $group_id)将client_id加入到对应分组

连接成功后返回值

PS：以上返回值为 GatewayWorker服务 连接成功后返回的json数据

5、页面发起的所有请求都直接post/get到mvc框架统一处理，包括发送消息

通过sendMessage发送消息（服务端主动推送消息到客户端）

  1.     // mvc后端发消息 利用GatewayClient发送 Events.php
  2.     public function sendMessage()
  3.     {
  4.         // stream_socket_client(): unable to connect to tcp://127.0.0.1:1236
  5.         $uid = $this->userId;
  6.         $group = $this->groupId;
  7.         $message = json_encode([
  8.           'type'=>'say',
  9.           'msg'=>'Hello ThinkPHP5'
  10.         ]);
  11.         // 设置GatewayWorker服务的Register服务ip和端口，请根据实际情况改成实际值
  12.         Gateway::$registerAddress = '127.0.0.1:1238';
  13.         // 向任意uid的网站页面发送数据
  14.         Gateway::sendToUid($uid, $message);
  15.         // 向任意群组的网站页面发送数据，如果开启，则会向页面发送两条一样的消息
  16.         //Gateway::sendToGroup($group, $message);
  17.     }

6、mvc框架处理业务过程中需要向某个uid或者某个群组发送数据时，直接调用GatewayClient的接口Gateway::sendToUid Gateway::sendToGroup 等发送即可

通过浏览器访问sendMessage操作，测试结果

PS：以上的消息是TP5.0 通过 GatewayClient\Gateway 发送写消息，和GatewayWorker服务没有直接关系

以上为 服务端主动推送消息到客户端

注意区分：

1、服务端主动推送消息到客户端

2、客户端推送消息到客户端

（二）客户端推送消息到客户端

修改客户端到客户端的消息发送和接受，下面修改 GatewayWorker 的 Events.php（开发者只需要关注这个文件）　

  1.     public static function onConnect($client_id)
  2.     {
  3.         $resData = [
  4.             'type' => 'init',
  5.             'client_id' => $client_id,
  6.             'msg' => 'connect is success' // 初始化房间信息
  7.         ];
  8.         Gateway::sendToClient($client_id, json_encode($resData));
  9.     }
  10.  
  11.     /**
  12.      * 当客户端发来消息时触发
  13.      * @param int $client_id 连接id
  14.      * @param mixed $message 具体消息
  15.      */
  16.     public static function onMessage($client_id, $message)
  17.     {
  18.         // 服务端console输出 
  19.         //echo "msg : $message \r\n";
  20.  
  21.         // 解析数据
  22.         $resData = json_decode($message, true);
  23.         $type = $resData['type'];
  24.         $roomId = $resData['roomId'];
  25.         $userId = $resData['userId']; // 未登录，则传递一个随机
  26.         $userName = $resData['userName']; // 未登录，则传递一个随机
  27.         $content = isset($resData['content']) ? $resData['content'] : 'default content';
  28.         
  29.         //将时间全部置为服务器时间
  30.         $serverTime = date('Y-m-d H:i:s', time());
  31.  
  32.         switch ($type) {
  33.             case 'join':  // 用户进入直播间
  34.                 //将客户端加入到某一直播间
  35.                 Gateway::joinGroup($client_id, $roomId);
  36.                 $resData = [
  37.                     'type' => 'join',
  38.                     'roomId' => $roomId,
  39.                     'userName' => $userName,
  40.                     'msg' => "enters the Room", // 发送给客户端的消息，而不是聊天发送的内容
  41.                     'joinTime' => $serverTime // 加入时间                    
  42.                 ];
  43.  
  44.                 // 广播给直播间内所有人，谁？什么时候？加入了那个房间？
  45.                 Gateway::sendToGroup($roomId, json_encode($resData));
  46.                 break;
  47.             case 'say':  // 用户发表评论
  48.                 $resData = [
  49.                     'type' => 'say',
  50.                     'roomId' => $roomId,
  51.                     'userName' => $userName,
  52.                     'content' => $content,
  53.                     'commentTime' => $serverTime // 发表评论时间
  54.                 ];
  55.                 // 广播给直播间内所有人
  56.                 Gateway::sendToGroup($roomId, json_encode($resData));
  57.                 break;
  58.             case 'pong':
  59.                 break; // 接收心跳
  60.             default:
  61.                 //Gateway::sendToAll($client_id,$json_encode($resData));
  62.                 break;
  63.         }
  64.     }

index.html 聊天室页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>GatewayWorker的websocket连接</title>
  6. </head>
  7. <body>
  8. <h1>GatewayWorker的websocket连接</h1>
  9. <div class="row">
  10.     websocket send content：<input type="text" style="height: 50px; width: 100%;" name="data" id="data">
  11.     <p></p>
  12.     <button id="submit" οnclick="sub()">send info</button>
  13.     <p></p>
  14.     <div id="output"></div>
  15. </div>
  16. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  17. <script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
  18. <script language="javascript" type="text/javascript">
  19.     var wsUri = "ws://notes.env:7272/";
  20.     var outputContent;
  21.     var roomId = 'L06777';
  22.     var userId = 4840043;
  23.     var userName = 'Tinywan' + Math.random();
  24.  
  25.     // 把当新链接的客户端加入到当前直播间,消息类型：{"type":"join","roomId":"1002","userId":"88","userName":"userName"}
  26.     var joinContent = {
  27.         "type": "join",
  28.         "roomId": roomId,
  29.         "userId": userId,
  30.         "userName": userName
  31.     };
  32.  
  33.     // 初始化页面操作
  34.     function init() {
  35.         outputContent = document.getElementById("output");
  36.         initWebSocket();
  37.     }
  38.  
  39.     function initWebSocket() {
  40.         websocket = new ReconnectingWebSocket(wsUri);
  41.         websocket.onopen = function (evt) {
  42.             onOpen(evt)
  43.         };
  44.         websocket.onclose = function (evt) {
  45.             onClose(evt)
  46.         };
  47.         websocket.onmessage = function (evt) {
  48.             onMessage(evt)
  49.         };
  50.         websocket.onerror = function (evt) {
  51.             onError(evt)
  52.         };
  53.     }
  54.  
  55.     function onOpen(evt) {
  56.         console.log("CONNECTED");
  57.     }
  58.  
  59.     // 接收数据
  60.     function onMessage(evt) {
  61.         var data = eval("(" + evt.data + ")");
  62.         var type = data.type || '';
  63.         switch (type) {
  64.             case 'init':
  65.                 // 把当新链接的客户端加入到当前直播间
  66.                 console.log('-------init--------' + data);
  67.                 websocket.send(JSON.stringify(joinContent));
  68.                 writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
  69.                 break;
  70.             case 'join':
  71.                 console.log('-------join--------' + data);
  72.                 writeToScreen(
  73.                     '<span style="color: blue;"> ' + ' 新用户: ' + '</span>' +
  74.                     '<span style="color: red;"> ' + data.userName + '</span>' +
  75.                     '<span style="color: green;"> ' + data.joinTime + '</span>' +
  76.                     '<span style="color: black;"> ' + data.msg + '</span>'
  77.                 );
  78.                 break;
  79.             case 'say':
  80.                 console.log('say======' + data);
  81.                 writeToScreen(
  82.                     '<span style="color: blue;"> ' + ' Chat: ' + '</span>' +
  83.                     '<span style="color: red;"> ' + data.userName + '</span>' +
  84.                     '<span style="color: #D2691E;"> ' + data.commentTime + '</span>' +
  85.                     '<span style="color: black;"> ' + data.content + '</span>'
  86.                 );
  87.                 break;
  88.             default :
  89.                 console.log(data);
  90.                 break;
  91.         }
  92.     }
  93.  
  94.     function onError(evt) {
  95.         console.log('<span style="color: red;">ERROR:</span> ' + evt.data);
  96.     }
  97.  
  98.     function onClose(evt) {
  99.         console.log("DISCONNECTED");
  100.     }
  101.  
  102.     function writeToScreen(message) {
  103.         var pre = document.createElement("p");
  104.         pre.style.wordWrap = "break-word";
  105.         pre.innerHTML = message;
  106.         outputContent.appendChild(pre);
  107.     }
  108.  
  109.     function sub() {
  110.         var text = document.getElementById('data').value;
  111.         // {"type":"say",,"msg":"Welcome 111111111111Live Room"}
  112.         var sayContent = {
  113.             "type": "say",
  114.             "roomId": roomId,
  115.             "userId": userId,
  116.             "userName": userName,
  117.             "content": text
  118.         };
  119.         websocket.send(JSON.stringify(sayContent));
  120.     }
  121.     window.addEventListener("load", init, false);
  122. </script>
  123. </body>
  124. </html>　　

重启开启服务

测试结果

 扩展：

可以把消息存储的Redis中，通过Redis统计直播间的PV

  1. $redis = new \Redis;
  2. $redis->connect('127.0.0.1',6379);
  3. $key = "PV:ROOM:".$roomId;
  4. $field = "ROOM_TOTAL_PV";
  5. // 进入房间的人数增长，自增 ，增加PV统计
  6. $redis->hIncrBy($key,$field,1);

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/309464
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号