十九、Swoole 基础学习笔记 - Swoole WebSocket 常见问题
hi，我是温新，一名PHPer
文章基于 Swoole 5.0.1 版本编写。
学习目标：了解 websocket 存在哪些问题及如何解决
说明：本篇文章结合官方文档编写及参考网络资料编写，虽非全部原创，但也是结合了自己的理解，若转载请附带本文 URL，编写不易，持续编写更不易，谢谢！
WebSocket 服务启动后就万事大吉了吗？答案当然是否定的，WebSocket 有如下几个问题需要了解：
- 1、心跳检测的必要性；
- 2、校验客户端连接的有效性；
- 3、客户端的重连机制。
心跳检测
心跳检测，是不是很熟悉，没错，在之前的文章中进行过学习。关于心跳检测本篇文章不再啰嗦，详情可以参考 11、Swoole 基础学习笔记 - Swoole 心跳检测。
<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 心跳配置</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">set</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'heartbeat_check_interval'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">10</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'heartbeat_idle_time'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">60</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">]);</span>
校验客户端连接的有效性
new Swoole\WebSocket\Server('0.0.0.0', 9501); 它有问题吗？如果仅仅只在本地使用，当然没有问题。若是在生产环境，那问题就来了，0.0.0.0 意味着所有客户端都可以连接到我们的服务，这包含了有效客户端也包含了带有恶意的连接，对于这种结果，显示不是我们所需要的。
如何规避这种问题的？有很多种方法，如：
- 连接的时候传递校验参数，vaild=1;
- 只允许登录的用户进行连接；
- token 校验。客户端每次发送消息时携带 token，服务端对 token 进行验证。
服务端代码
<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 16-swoole-websocket-3.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">WebSocketServer</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">private</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">null</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$key</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'ziruchu'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">__construct</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Swoole\WebSocket\Server</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'0.0.0.0'</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">9501</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 设置心跳检测</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">set</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'heartbeat_idle_time'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">60</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'heartbeat_check_interval'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">10</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> ]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">on</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Open'</span>, [<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'onOpen'</span>]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">on</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Message'</span>, [<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'onMessage'</span>]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">on</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Close'</span>, [<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'onClose'</span>]);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">onOpen</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">checkAccess</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">onMessage</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$frame</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">push</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$frame</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">fd</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'服务器返回数据：'</span> . <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$frame</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">data</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">onClose</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$fd</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">echo</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'客户端 '</span> . <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$fd</span> . <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'已断开连接'</span> . <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">PHP_EOL</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">start</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">start</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">/**</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">* 验证客户端连接</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">* </span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">* @param [type] $server [description]</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">* @param [type] $request [description]</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">* @return [type] [description]</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">*/</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">checkAccess</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 若某个参数不存在，则关闭当前连接</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span> (<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">!</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">isset</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>) <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">||</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">!</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">isset</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>[<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'id'</span>]) <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">||</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">!</span><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">isset</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>[<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'token'</span>])) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">close</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">fd</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">false</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$id</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>[<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'id'</span>];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$token</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>[<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'token'</span>];</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 校验 token</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span> (<span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">md5</span>(<span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">md5</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$id</span>) . <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$this</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">key</span>) <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">!=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$token</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">close</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$request</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">fd</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">false</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">WebSocketServer</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$server</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">start</span>();</span>
客户端代码
<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">lang</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"en"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">charset</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>简版聊天室<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">textarea</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"content"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"content"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">cols</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"30"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rows</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"10"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">textarea</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">button</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">onclick</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"send();"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>发送<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">button</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"messageList"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"ws://127.0.0.1:9501?id=10&token=27ebb6344564f1427f0f1f8a6d7c5a9c"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ws</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">WebSocket</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onopen</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">send</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'my name is WebSocket'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onmessage</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> (<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">event</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">data</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">event</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">data</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">document</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">getElementById</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'messageList'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">li</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">document</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">createElement</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'li'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">li</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">innerHTML</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">data</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">appendChild</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">li</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onclose</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> (<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">event</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">console</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">log</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'客户端关闭连接:'</span> . <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">event</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">send</span>() {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">obj</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">document</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">getElementById</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">content</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">obj</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">value</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">send</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">content</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">obj</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">value</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">''</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>
客户端重连机制
客户端重连机制可以理解为一种保活机制，也可以和服务端的心跳检测在一起理解为双向心跳。即如何保证客户端与服务端的连接一直有效不断开。
对于客户端来说，只要触发了 error 或 close 或连接失败时，就主动重新连接服务端。
对于这个案例，服务端代码使用：16-swoole-websocket-2.php。
客户端代码如下；
<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">lang</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"en"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">charset</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>重连机制<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">textarea</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"content"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"content"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">cols</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"30"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rows</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"10"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">textarea</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">button</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">onclick</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"send();"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>发送<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">button</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"messageList"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// websocket 实例</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ws</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 避免重复连接</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">lockReconnect</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">false</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"ws://127.0.0.1:9501"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 创建 websocket 实例</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">createWebSocket</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">try</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">WebSocket</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">initEventHandle</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> } <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">catch</span> (<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">e</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 连接失败，重新连接</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">reconnect</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">initEventHandle</span>()</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onclose</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">reconnect</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onerror</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">reconnect</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onopen</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 心跳检测重置</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">heartCheck</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">reset</span>().<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">start</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">onmessage</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> (<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">event</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">data</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">event</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">data</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">document</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">getElementById</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'messageList'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">li</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">document</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">createElement</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'li'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">li</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">innerHTML</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">data</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">ul</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">appendChild</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">li</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">heartCheck</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">reset</span>().<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">start</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">reconnect</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">if</span> (<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">lockReconnect</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">lockReconnect</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">setTimeout</span>(<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createWebSocket</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">lockReconnect</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">false</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">2000</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">heartCheck</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">timeout</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">60000</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">timeoutObj</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">null</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">serverTimeoutObj</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">null</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">reset</span>: <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">clearTimeout</span>(<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">this</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">timeoutObj</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">clearTimeout</span>(<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">this</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">serverTimeoutObj</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">this</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">start</span>: <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">self</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">this</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">this</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">timeoutObj</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">setTimeout</span>(<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 发送心跳检测</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 服务端收到后会返回一个心跳消息</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">send</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">''</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">self</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">serverTimeoutObj</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">setTimeout</span>(<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">close</span>();</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">self</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">timeout</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">this</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">timeout</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> };</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createWebSocket</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">url</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">send</span>() {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">obj</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">document</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">getElementById</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">let</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">content</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">obj</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">value</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">ws</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">send</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">content</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">obj</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">value</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">''</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>
本篇文章学习了 websocket 常见问题，我们下篇文章见。
请登录后再评论