Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PHP 基于 SW-X 框架，搭建WebSocket服务器（二）
Blogger Information
Blog 12
fans 0
comment 0
visits 8777
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP 基于 SW-X 框架，搭建WebSocket服务器（二）
广州PHP
Original
661 people have browsed it

前言

官网地址：SW-X框架-专注高性能便捷开发而生的PHP-SwooleX框架

希望各大佬举起小手，给小弟一个star：https://github.com/swoolex/swoolex

1、前端模板

最终要实现的效果，如下图：

该模板可以直接下载：练习WebSocket使用的前端html模板

也可以直接使用下面的前端代码，命名为：index.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="renderer" content="webkit">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8.     <title>SW-X | WebSocket客户端示例</title>
  9.     <script src="https://blog.junphp.com/public/js/jquery.min.js"></script>
  10.     <script src="jquery.md5.js"></script>
  11.     <script src="tim.js"></script>
  12.     <style>
  13. body,html{margin: 0;padding: 10px; height: calc(100% - 30px);font-size: 13px;}
  14. ul,li{list-style: none;padding: 0;margin: 0;}
  15. .user_list{width: 200px; height: 100%; overflow: hidden; overflow-y: auto; padding: 10px;border: 1px solid #ccc;float: left;}
  16. .user_list li{width: 100%;padding: 5px 0;cursor: pointer;}
  17. .user_list li:hover{color: #0077d6;}
  18. .main{width: calc(100% - 550px); height: 70%; overflow: hidden; overflow-y: auto; padding: 10px;border: 1px solid #ccc;float: left;border-left: 0;background: #e9f8ff;}
  19. .content{width: calc(100% - 530px); height: calc(30% - 1px);border: 1px solid #ccc;float: left;border-left: 0;border-top: 0;position: relative;}
  20. #content{width: calc(100% - 20px);;border: 0;height:calc(100% - 25px);padding: 10px;}
  21. #content:focus{outline: none;}
  22. code{padding: 3px 5px;border-radius: 30%; color: #fff;}
  23. .online{background: #35b700;}
  24. .offline{background: red;}
  25. .record{float: left;width: 100%;padding: 5px 0;}
  26. .record span{font-size: 12px; background: #ccc; border-radius: 5px; color: #0037ff;padding: 1px 3px;}
  27. .other p{text-indent: 30px;padding: 0px;}
  28. .own{text-align: right;}
  29. .tips{text-align: center;font-size: 12px; color: #e80000;}
  30. .drift{position: absolute;bottom: 10px; right: 10px; }
  31. #send{background: #009e3f;border: 1px solid #009020;font-size: 14px;padding: 3px 10px;color: #fff;border-radius: 5px;cursor: pointer;}
  32. #send:hover{background: #008234;border: 1px solid #005613;}
  33. #open{background: #009e97;border: 1px solid #007974;font-size: 14px;padding: 3px 10px;color: #fff;border-radius: 5px;cursor: pointer;}
  34. #open:hover{background: #008a84;border: 1px solid #00736e;}
  35. #close{background: #ef0000;border: 1px solid #c30000;font-size: 14px;padding: 3px 10px;color: #fff;border-radius: 5px;cursor: pointer;}
  36. #close:hover{background: #c50000;border: 1px solid #a00000;}
  37. input{padding: 4px;}
  38. .log{width: 326px;height: calc(100% - 40px);border: 1px solid #ccc;float: right;border-left: 0;position: absolute;right: 0;overflow: hidden;overflow-y: auto;}
  39. .log div{width: calc(100% - 20px);padding:10px 10px 0 10px;}
  40.     </style>
  41.     </head>
  42. <body>
  43.     <!--用户列表-->
  44.     <div class="user_list">
  45.         <ul></ul>
  46.     </div>
  47.     <!--聊天窗口-->
  48.     <div class="main"></div>
  49.     <!--输入窗口-->
  50.     <div class="content">
  51.         <textarea id="content"></textarea>
  52.         <div class="drift">
  53.             <input id="host" type="text" placeholder="WS地址" style="width: 700px;">
  54.             <input id="user_id" type="text" placeholder="输入user_id">
  55.             <input id="username" type="text" placeholder="输入用户名">
  56.             <button id="open">连接</button>
  57.             <button id="close">断开</button>
  58.             <button id="send">发送</button>
  59.         </div>
  60.     </div>
  61.     <!--交互记录-->
  62.     <div class="log"></div>
  63. </body>
  64. </html>

注意：最上面有一个tim.js文件需要你自行创建，后续的教程都只对该文件进行变更说明而已。

2、服务端鉴权并记录用户信息

A、创建内存表

服务端内部使用内存表来缓存用户信息，以减少推送交互时对Mysql的查询压力。

修改/config/swoole_table.php，改成以下代码：

  1. return [
  2.      [
  3.         'table' => 'user',// 用户信息表
  4.         'length' => 100000,// 表最大行数上限
  5.         'field' => [ // 字段信息
  6.             'fd' => [
  7.                 'type' => \Swoole\Table::TYPE_INT, // swoole的标识符
  8.                 'size' => 13, // 字段长度限制
  9.             ],
  10.             'user_id' => [
  11.                 'type' => \Swoole\Table::TYPE_STRING, // 客户端ID
  12.                 'size' => 64,
  13.             ],
  14.             'username' => [
  15.                 'type' => \Swoole\Table::TYPE_STRING, // 用户名
  16.                 'size' => 64,
  17.             ],
  18.             'heart_num' => [
  19.                 'type' => \Swoole\Table::TYPE_INT, // 心跳次数
  20.                 'size' => 1, // 字段长度限制
  21.             ],
  22.         ]
  23.     ],
  24.     [
  25.         'table' => 'fd',// fd标识符反查表
  26.         'length' => 100000,
  27.         'field' => [
  28.             'user_id' => [
  29.                 'type' => \Swoole\Table::TYPE_STRING,
  30.                 'size' => 64,
  31.             ],
  32.         ]
  33.     ]
  34. ];

B、连接时鉴权

通过客户端在ws时的地址携带GET参数，可以进行open握手阶段的权限控制，防止而已连接，同时还可以记录[更新]客户端的连接信息，修改/box/event/server/onOpen.php代码：

  1. namespace box\event\server;
  2. // 引入内存表组件
  3. use x\swoole\Table;
  4. // 引入websocket控制器基类
  5. use x\controller\WebSocket;
  7. class onOpen
  8. {
  9.     /**
  10.      * 启动实例
  11.     */
  12.     public $server;
  14.     /**
  15.      * 统一回调入口
  16.      * @author 小黄牛
  17.      * @version v1.0.1 + 2020.05.26
  18.      * @param Swoole\WebSocket\Server $server
  19.      * @param Swoole\Http\Request $request HTTP请求对象
  20.     */
  21.     public function run($server, $request) {
  22.         $this->server = $server;
  24.         // 实例化客户端
  25.         $this->websocket = new WebSocket();
  27.         // 获取参数
  28.         $param = $request->get;
  30.         // 参数过滤
  31.         $res = $this->_param($param, $request->fd);
  32.         if (!$res) return false;
  34.         // 参数鉴权
  35.         $res = $this->_sign_check($param, $request->fd, $request);
  36.         if (!$res) return false;
  38.         // 将客户信息记录进table内存表
  39.         // 用户信息表
  40.         Table::table('user')->name($param['user_id'])->upsert([
  41.             'fd' => $request->fd,
  42.             'user_id' => $param['user_id'],
  43.             'username' => $param['username'],
  44.         ]);
  45.         // 标识符反查user_id表
  46.         Table::table('fd')->name($request->fd)->upsert([
  47.             'user_id' => $param['user_id'],
  48.         ]);
  49.         // 广播上线消息
  50.         $table = Table::table('user')->all();
  51.         foreach ($table as $key=>$info) {
  52.             $data = ['user_id'=>$param['user_id'], 'username'=>$param['username'], 'status' => 1];
  53.             $this->websocket->fetch(10001, $param['username'].' 骑着小黄牛 上线啦~', $data, $info['fd']);
  54.         }
  56.         return true;
  57.     }
  59.     /**
  60.      * 参数过滤
  61.      * @author 小黄牛
  62.     */
  63.     public function _param($param, $fd) {
  64.         if (empty($param['user_id'])) {
  65.             $this->websocket->fetch(40001, '缺少user_id');
  66.             $this->server->close($fd); 
  67.             return false;
  68.         }
  69.         if (empty($param['username'])) {
  70.             $this->websocket->fetch(40001, '缺少username');
  71.             $this->server->close($fd); 
  72.             return false;
  73.         }
  74.         if (empty($param['sign'])) {
  75.             $this->websocket->fetch(40001, '缺少sign');
  76.             $this->server->close($fd); 
  77.             return false;
  78.         }
  79.         if (empty($param['time'])) {
  80.             $this->websocket->fetch(40001, '缺少time');
  81.             $this->server->close($fd); 
  82.             return false;
  83.         }
  84.         return true;
  85.     }
  87.     /**
  88.      * 参数鉴权
  89.      * @author 小黄牛
  90.     */
  91.     public function _sign_check($param, $fd, $request) {
  92.         // 过期
  93.         $now_time = time();
  94.         $max_time = $now_time + 3600;
  95.         $min_time = $now_time - 3600;
  96.         // 时间戳请求前后60分钟内有效，防止客户端和服务器时间误差
  97.         if ($param['time'] &lt; $min_time || $param['time'] > $max_time ){
  98.             $this->websocket->fetch(40002, 'time已过期');
  99.             $this->server->close($fd); 
  100.             return false;
  101.         }
  103.         // 域名来源判断
  104.         // 使用 $request->header['origin'] 获取来源域名
  105.         // 如果有需要的同学可以自己参考上面的判断写下
  107.         // 签名验证
  108.         // 生产环境不应该这么简单，自己思考API的鉴权逻辑即可
  109.         $sign = md5($param['user_id'].$param['time']);
  110.         if ($sign != $param['sign']) {
  111.             $this->websocket->fetch(40002, 'sign错误，应该是md5(user_id + time)：');
  112.             $this->server->close($fd); 
  113.             return false;
  114.         }
  116.         return true;
  117.     }
  118. }

3、下线广播

通过内存表的支持，我们可以在/box/event/onClose.php阶段对客户端进行下线广播：

  1. namespace box\event\server;
  2. // 引入内存表组件
  3. use x\swoole\Table;
  4. // 引入websocket控制器基类
  5. use x\controller\WebSocket;
  7. class onClose
  8. {
  9.     /**
  10.      * 启动实例
  11.     */
  12.     public $server;
  14.     /**
  15.      * 统一回调入口
  16.      * @author 小黄牛
  17.      * @version v1.0.1 + 2020.05.26
  18.      * @param Swoole\Server $server
  19.      * @param int $fd 连接的文件描述符
  20.      * @param int $reactorId 来自那个 reactor 线程，主动 close 关闭时为负数
  21.     */
  22.     public function run($server, $fd, $reactorId) {
  23.         $this->server = $server;
  25.         // 实例化客户端
  26.         $this->websocket = new WebSocket();
  28.         // 通过fd反查信息
  29.         $user = Table::table('fd')->name($fd)->find();
  30.         $user_info = Table::table('user')->name($user['user_id'])->find();
  32.         // 广播下线消息
  33.         $table = Table::table('user')->all();
  34.         foreach ($table as $key=>$info) {
  35.             $data = ['user_id'=>$user_info['user_id'], 'username'=>$user_info['username'], 'status' => 2];
  36.             // 这样需要注意 close比较特殊，如果需要广播，最后一个参数要传入server实例才行
  37.             $this->websocket->fetch(10001, $user_info['username'].' 骑着扫帚 灰溜溜的走了~', $data, $info['fd'], $this->server);
  38.         }
  40.         return true;
  41.     }
  42. }

4、客户端消息处理

本案例客户端只使用到2个路由，分别是处理普通消息的群发通知，还有心跳检测的次数重置。

A、普通消息群发通知

控制器：/app/websocket/user/broadcast.php：

  1. // 普通广播
  2. namespace app\websocket\user;
  3. use x\controller\WebSocket;
  4. // 引入内存表组件
  5. use x\swoole\Table;
  7. class broadcast extends WebSocket {
  9.     public function index() {
  10.         // 接收请求参数
  11.         $param = $this->param();
  13.         // 获取当前客户端标识符
  14.         $fd = $this->get_current_fd();
  16.         // 广播消息
  17.         $table = Table::table('user')->all();
  18.         foreach ($table as $key=>$info) {
  19.             // 不推给自己
  20.             if ($info['fd'] != $fd) {
  21.                 $this->fetch(10002, $param['content'], ['username' => $info['username']], $info['fd']);
  22.             }
  23.         }
  24.         return true;
  25.     }
  26. }

B、心跳次数重置

控制器：/app/websocket/user/heart.php：

  1. // 心跳重置
  2. namespace app\websocket\user;
  3. use x\controller\WebSocket;
  4. // 引入内存表组件
  5. use x\swoole\Table;
  7. class heart extends WebSocket {
  9.     public function index() {
  10.         // 获取当前客户端标识符
  11.         $fd = $this->get_current_fd();
  12.         // 通过fd反查信息
  13.         $user = Table::table('fd')->name($fd)->find();
  14.         $user_info = Table::table('user')->name($user['user_id'])->find();
  15.         $user_info['heart_num'] = 0;
  16.         // 重置心跳次数
  17.         Table::table('user')->name($user['user_id'])->upsert($user_info);
  18.         return $this->fetch(10003, '心跳完成');
  19.     }
  20. }

5、基于定时器检测心跳超时的客户端

先创建一个定时器：/box/crontab/heartHandle.php：

  1. // 心跳检测处理
  2. namespace box\crontab;
  3. use x\Crontab;
  4. // 引入内存表组件
  5. use x\swoole\Table;
  6. // 客户端实例
  7. use x\controller\WebSocket;
  9. class heartHandle extends Crontab{
  11.     /**
  12.      * 统一入口
  13.      * @author 小黄牛
  14.      * @version v2.5.0 + 2021.07.20
  15.     */
  16.     public function run() {
  17.         // 获得server实例
  18.         $server = $this->get_server();
  19.         // 获得客户端实例
  20.         $websocket = new WebSocket();
  22.         $table = Table::table('user')->all();
  23.         foreach ($table as $key=>$info) {
  24.             // 检测心跳连续失败次数大于5次的记录进行广播下线
  25.             if ($info['heart_num'] > 5) {
  26.                 $data = ['user_id'=>$info['user_id'], 'username'=>$info['username'], 'status' => 2];
  27.                 // 这样需要注意 close比较特殊，如果需要广播，最后一个参数要传入server实例才行
  28.                 $websocket->fetch(10001, $user_info['username'].' 骑着扫帚 灰溜溜的走了~', $data, $info['fd'], $server);
  29.                 // 关闭它的连接
  30.                 $server->close($info['fd']);
  31.             } else {
  32.                 // 失败次数+1
  33.                 Table::table('user')->name($info['user_id'])->setDec('heart_num', 1);
  34.             }
  35.         }
  36.     }
  37. }

然后注册定时器，为5秒执行一次，修改/config/crontab.php为以下代码：

  1. return [
  2.     [
  3.         'rule' => 5000,
  4.         'use' => '\box\crontab\heartHandle',
  5.         'status' => true,
  6.     ]
  7. ];

6、编写tim.js客户端代码

  1. $(function(){
  2.     var lockReconnect = false; // 正常情况下我们是关闭心跳重连的
  3.     var wsServer; // 连接地址
  4.     var websocket; // ws实例
  5.     var time; // 心跳检测定时器指针
  6.     var user_id;  // 用户ID
  7.     var username; // 用户昵称
  8.     $('#user_id').val(random(100000, 999999));
  9.     $('#username').val(getRandomName(3));
  11.     // 点击连接
  12.     $('#open').click(function(){createWebSocket();})
  13.     // 点击断开
  14.     $('#close').click(function(){addLog('主动断开连接');websocket.close();})
  15.     // 发送消息
  16.     $('#send').click(function(){
  17.         var content = $('#content').val();
  18.         if (content == '' || content == null) {
  19.             alert('请先输入内容');
  20.             return false;
  21.         }
  22.         // 自己
  23.         $('.main').append('<div class="record own">'+content+' ：说<span>'+getDate()+'</span> <font>自己</font></div>');
  24.         // 广播消息
  25.         send('user/broadcast', {
  26.             'content':content
  27.         })
  28.         $('#content').val('');
  29.         saveScroll('.main')
  30.     })
  31.     // 发送数据到服务端
  32.     function send(action, data) {
  33.         // 补充用户信息
  34.         data.user_id = $('#user_id').val()
  35.         data.username = $('#username').val()
  36.         // 组装SW-X的固定格式
  37.         var body = {
  38.             'action' : action,
  39.             'data' : data,
  40.         }
  41.         body = JSON.stringify(body);
  42.         websocket.send(body);
  43.         addLog('发送数据：'+body);
  44.     }
  46.     // 记录log
  47.     function addLog(msg) {$('.log').append('<div>'+msg+'</div>');saveScroll('.log')}
  49.     // 启动websocket
  50.     function createWebSocket() {
  51.         var time = Date.now() / 1000;
  52.         var host = $('#host').val();
  53.         user_id = $('#user_id').val();
  54.         username = $('#username').val();
  55.         if (host == '' || host == null) {
  56.             alert('请先输入host地址');
  57.             return false;
  58.         }
  59.         if (user_id == '' || user_id == null) {
  60.             alert('请先输入user_id');
  61.             return false;
  62.         }
  63.         if (username == '' || username == null) {
  64.             alert('请先输入用户名');
  65.             return false;
  66.         }
  67.         wsServer = host+'?user_id='+user_id+'&username='+username+'&time='+time+'&sign='+$.md5(user_id+time);
  68.         try {
  69.             websocket = new WebSocket(wsServer);
  70.             init();
  71.         } catch(e) {
  72.             reconnect();
  73.         }
  74.     }
  75.     // 初始化WebSocket
  76.     function init() {
  77.         // 接收Socket断开时的消息通知
  78.         websocket.onclose = function(evt) {
  79.             addLog('Socket断开了...正在试图重新连接...');
  80.             reconnect();
  81.         };
  82.         // 接收Socket连接失败时的异常通知
  83.         websocket.onerror = function(e){
  84.             addLog('Socket发生异常...正在试图重新连接...');
  85.             reconnect();
  86.         };
  87.         // 连接成功
  88.         websocket.onopen = function (evt) {
  89.             addLog('连接成功');
  90.             // 心跳检测重置
  91.             heartCheck.start();
  92.         };
  93.         // 接收服务端广播的消息通知
  94.         websocket.onmessage = function(evt){
  95.             var data = evt.data;
  96.             addLog('接收到服务端消息：'+data);
  97.             var obj = JSON.parse(data); 
  99.             // 消息处理
  100.             switch (obj.action) {
  101.                 // 上下线
  102.                 case 10001:
  103.                     var body = obj.data;
  104.                     $('.main').append('<div class="record tips">'+obj.msg+'</div>');
  106.                     // 登录
  107.                     if ($('#userid_'+body.user_id).html() == undefined) {
  108.                         $('.user_list ul').append('<li id="userid_'+body.user_id+'"><span>'+body.username+'</span><code class="online">在线</code></li>');
  109.                     } else {
  110.                         // 重登
  111.                         if (body.status == 1) {
  112.                             $('#userid_'+body.user_id+' code').removeClass('offline');
  113.                             $('#userid_'+body.user_id+' code').addClass('online');
  114.                             $('#userid_'+body.user_id+' code').html('在线');
  115.                         // 下线
  116.                         } else {
  117.                             $('#userid_'+body.user_id+' code').removeClass('online');
  118.                             $('#userid_'+body.user_id+' code').addClass('offline');
  119.                             $('#userid_'+body.user_id+' code').html('离线');
  120.                         } 
  121.                     }
  122.                     saveScroll('.main')
  123.                 break;
  124.                 // 收到普通消息
  125.                 case 10002:
  126.                     var body = obj.data;
  127.                     // 对方
  128.                     $('.main').append('<div class="record other"><font>'+body.username+'</font> <span>'+getDate()+'</span> 说：'+obj.msg+'</div>');
  129.                     saveScroll('.main')
  130.                 break;
  131.                 // 回复了一次心跳
  132.                 case 10003:
  133.                     // 心跳检测重置
  134.                     heartCheck.start();
  135.                 break;
  136.                 default:
  137.                 break;
  138.             }
  139.         };
  140.     }
  141.     // 掉线重连
  142.     function reconnect() {
  143.         if(lockReconnect) {
  144.             return;
  145.         };
  146.         lockReconnect = true;
  147.         // 没连接上会一直重连，设置心跳延迟避免请求过多
  148.         time && clearTimeout(time);
  149.         time = setTimeout(function () {
  150.             createWebSocket();
  151.             lockReconnect = false;
  152.         }, 5000);
  153.     }
  154.     // 心跳检测
  155.     var heartCheck = {
  156.         timeout: 5000,
  157.         timeoutObj: null,
  158.         serverTimeoutObj: null,
  159.         start: function() {
  160.             var self = this;
  161.             this.timeoutObj && clearTimeout(this.timeoutObj);
  162.             this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
  163.             this.timeoutObj = setTimeout(function(){
  164.                 // 这里需要发送一个心跳包给服务端
  165.                 send('user/heart', {})
  166.             }, this.timeout)
  167.         }
  168.     }
  170.     // 生成ID
  171.     function random(min, max) { 
  172.         return Math.floor(Math.random() * (max - min)) + min;
  173.     }
  174.     // 解码
  175.     function decodeUnicode(str) {
  176.         //Unicode显示方式是\u4e00
  177.         str = "\\u"+str
  178.         str = str.replace(/\\/g, "%");
  179.          //转换中文
  180.         str = unescape(str);
  181.          //将其他受影响的转换回原来
  182.         str = str.replace(/%/g, "\\");
  183.         return str;
  184.      }
  185.      // 生成中文名
  186.      function getRandomName(NameLength){
  187.          let name = ""
  188.          for(let i = 0;i<NameLength;i++){
  189.              let unicodeNum  = ""
  190.              unicodeNum = random(0x4e00,0x9fa5).toString(16)
  191.              name += decodeUnicode(unicodeNum)
  192.          }
  193.          return name
  194.      }
  195.      // 获得当前日期
  196.      function getDate() {
  197.         var oDate = new Date();
  198.         return oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
  199.      }
  200.      // 滚动到底部
  201.      function saveScroll(id) {
  202.         $(id).scrollTop( $(id)[0].scrollHeight );
  203.      }
  204. })

7、案例源码下载

如果不想自己一步步组装的，可以直接本次下载源码查看：SW-X WebSocket案例源码

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post