WebSocket - 学习/实践

Bertha 。 2023-02-21 06:33 3阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于在浏览器和服务器之间建立一个不受限的双向通信的通道。 比如说，服务器可以在任意时刻发送消息给浏览器。 </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> <h1>1. 文档</h1> 
 <blockquote> 
 <a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096" rel="nofollow">https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096</a>&nbsp; // 廖雪峰 - websocket 
 <a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1103327377678688" rel="nofollow">https://www.liaoxuefeng.com/wiki/1022910821149312/1103327377678688</a> 
 <a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1103332447876608" rel="nofollow">https://www.liaoxuefeng.com/wiki/1022910821149312/1103332447876608</a> 
 &lt;&lt;PHP核心技术与最佳实践&gt;&gt; 
 </blockquote> <h1>2. 整理输出</h1> <h2>1.介绍</h2> WebSocket是&nbsp;HTML5&nbsp;新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道。 比如说，服务器可以在任意时刻发送消息给浏览器。 <h3>出现历史原因</h3> 为什么传统的HTTP协议不能做到WebSocket实现的功能？ 这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。 换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的。 这样一来，要在浏览器中搞一个实时聊天，在线炒股（不鼓励），或者在线多人游戏的话就没法实现了，只能借助Flash这些插件。 也有人说，HTTP协议其实也能实现啊，比如用轮询或者Comet。 轮询是指浏览器通过JavaScript启动一个定时器，然后以固定的间隔给服务器发请求，询问服务器有没有新消息。这个机制的缺点一是实时性不够，二是频繁的请求会给服务器带来极大的压力。 Comet本质上也是轮询，但是在没有消息的情况下，服务器先拖一段时间，等到有消息了再回复。 这个机制暂时地解决了实时性问题，但是它带来了新的问题：以多线程模式运行的服务器会让大部分线程大部分时间都处于挂起状态，极大地浪费服务器资源。另外，一个HTTP连接在长时间没有数据传输的情况下，链路上的任何一个网关都可能关闭这个连接，而网关是我们不可控的，这就要求Comet连接必须定期发一些ping数据表示连接“正常工作”。 
 <blockquote> 
 以上两种机制都治标不治本，所以，HTML5推出了WebSocket标准，让浏览器和服务器之间可以建立无限制的全双工通信，任何一方都可以主动发消息给对方。 
 </blockquote> <h3>WebSocket协议</h3> WebSocket并不是全新的协议，而是利用了HTTP协议来建立连接。 我们来看看WebSocket连接是如何创建的。 首先，WebSocket连接必须由浏览器发起，因为请求协议是一个标准的HTTP请求，格式如下： 
 <blockquote> 
 GET ws://localhost:3000/ws/chat HTTP/1.1 Host: localhost Upgrade: websocket Connection: Upgrade Origin: http://localhost:3000 Sec-WebSocket-Key: client-random-string // 客户端随机字符串 Sec-WebSocket-Version: 13 
 </blockquote> 该请求和普通的HTTP请求有几点不同： 
 <ol> 
 <li>GET请求的地址不是类似<code>/path/</code>，而是以<code>ws://</code>开头的地址；</li> 
 <li>请求头<code>Upgrade: websocket，&nbsp;</code><code>Connection: Upgrade</code>表示这个连接将要被转换为WebSocket连接；</li> 
 <li><code>Sec-WebSocket-Key</code>是用于标识这个连接，并非用于加密数据；</li> 
 <li><code>Sec-WebSocket-Version</code>指定了WebSocket的协议版本。&nbsp;</li> 
 </ol>随后，服务器如果接受该请求，就会返回如下响应： 
 <blockquote> 
 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: server-random-string &nbsp;// 服务端随机字符串 
 </blockquote> 该响应代码<code>101</code>表示本次连接的HTTP协议即将被更改，更改后的协议就是<code>Upgrade: websocket</code>指定的WebSocket协议。 版本号和子协议规定了双方能理解的数据格式，以及是否支持压缩等等。如果仅使用WebSocket的API，就不需要关心这些。 现在，一个WebSocket连接就建立成功，浏览器和服务器就可以随时主动发送消息给对方。 <h3>消息种类</h3> 消息有两种，一种是文本，一种是二进制数据。 通常，我们可以发送JSON格式的文本，这样，在浏览器处理起来就十分容易。 为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢？ 实际上HTTP协议是建立在TCP协议之上的，TCP协议本身就实现了全双工通信，但是HTTP协议的请求－应答机制&nbsp;限制&nbsp;了全双工通信。 WebSocket连接建立以后，其实只是简单规定了一下：接下来，咱们通信就不使用HTTP协议了，直接互相发数据吧。 安全的WebSocket连接机制和HTTPS类似。 首先，浏览器用<code>ws://xxx</code>创建WebSocket连接时，会先通过HTTPS创建安全的连接，然后，该HTTPS连接升级为WebSocket连接，底层通信走的仍然是安全的SSL/TLS协议。 <h2>2.实现</h2> <h3>浏览器</h3> 很显然，要支持WebSocket通信，浏览器得支持这个协议，这样才能发出<code>ws://xxx</code>的请求。 目前，支持WebSocket的主流浏览器如下： 
 <blockquote> 
 Chrome 
 Firefox 
 IE &gt;= 10 
 Sarafi &gt;= 6 
 Android &gt;= 4.4 
 iOS &gt;= 8 
 </blockquote> <h3>服务器</h3> 由于WebSocket是一个协议，服务器具体怎么实现，取决于所用编程语言和框架本身。 Node.js本身支持的协议包括TCP协议和HTTP协议，要支持WebSocket协议，需要对Node.js提供的HTTPServer做额外的开发。已经有若干基于Node.js的稳定可靠的WebSocket实现，我们直接用npm安装使用即可。 <h1>3.个人实践</h1> 后端语言 
 <blockquote> 
 nodeJS/PHP 各实现一个 
 </blockquote> nodeJS 聊天室： 
 <blockquote> 
 <a href="https://github.com/ningxiaofa/talking-room" rel="nofollow">https://github.com/ningxiaofa/talking-room</a>&nbsp; &nbsp;// 有些库已经被摒弃，后面修复 
 </blockquote> 效果如下： 分别开不同浏览器窗口【或者chrome的无痕窗口】，输入 localhost:3000 回车即可 <img alt="" height="445" src="https://img-blog.csdnimg.cn/20200629154947511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="842"> 
 <blockquote> 
 可以看到可以相互通信～ 
 </blockquote> 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096" rel="nofollow">https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096</a>&nbsp; // 廖雪峰 - websocket <a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1103327377678688" rel="nofollow">https://www.liaoxuefeng.com/wiki/1022910821149312/1103327377678688</a> <a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1103332447876608" rel="nofollow">https://www.liaoxuefeng.com/wiki/1022910821149312/1103332447876608</a> &lt;&lt;PHP核心技术与最佳实践&gt;&gt; </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...