前言

官网地址：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案例源码

更多相关文章

  1. 银联手机支付 手机客户端有几个？
  2. Android(安卓)Socket网络通信
  3. 学习笔记 Android(安卓)使用AIDL实现进程间通信
  4. android实现 服务器功能
  5. PHP 基于 SW-X 框架，搭建WebSocket服务器（一）
  6. Android：网络编程
  7. Android入门三 Http通信(实例)
  8. Linux部署rocketmq和可视化客户端
  9. android 开源项目列表

随机推荐

  1. Android消息推送接收后，通知栏的显示
  2. Android RxJava 使用RxJava开发
  3. Android自定义View-----上下拖动布局--Sl
  4. monkeyrunner截图限时免费阅读#1
  5. Android使用SQLite数据库(3)
  6. Android 实现从本地读取图片更改聊天背景
  7. 解决ScrollView嵌套RecyclerView时item显
  8. Android控件组合应用二
  9. 导入Android SDK中Sample下ApiDemos报错
  10. Android 自定义控件高度设置onMeasure方