WebSocket协议-原理篇

Posted 2020-11-22 小破孩楼主

本篇文章主要讲述以下几点：

• WebSocket的原理与机制
• WebSocket与Socket.io
• WebSocket兼容性

WebSocket的原理与机制

WebSocket协议分为两部分：握手和数据传输
下面通过客户端和服务端交互的报文对比WebSocket通讯与传统HTTP的不同点，主要关注握手阶段。
根据上面的例子，运行之后，new WebSocket实例化一个新的WebSocket客户端对象，请求WebSocket URL为ws://localhost:8000的服务器，打开控制台的NetWork，客户端WebSocket对象会自动解析并识别为WebSocket请求，连接服务端端口，执行双方握手过程，来自客户端握手发送数据格式如下：

request.png

客户端发起的WebSocket连接报文类似传统HTTP报文，其中：

• Upgrade: websocket
  Connection: Upgrade
  这个是WebSocket的核心，告诉服务器，客户端发起的是WebSocket类型请求。
• Sec-WebSocket-Key是WebSocket客户端发送的一个 base64编码的密文，浏览器随机生成，要求服务端必须返回一个对应加密的Sec-WebSocket-Accept应答，否则客户端会抛出Error during WebSocket handshake错误，并关闭连接。
• Sec-WebSocket-Version 是告诉服务器所使用的 Websocket 协议版本

服务端收到报文后会返回下列东西，表示已经接收到请求，WebSocket建立成功，来自服务器的握手如下：

response.png

• Upgrade: websocket
  Connection: Upgrade
  告诉客户端即将升级的是WebSocket协议
• Sec-WebSocket-Accept的值是服务端采用与客户端一致的密钥计算出来后返回客户端的

至此，HTTP已经完成它所有工作，接下来就是完全按照Websocket协议进行了。

通过查看WebSocket的原理，与HTTP对比，得出结论：
HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个请求建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别，所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持html5）。此外还有 multiplexing、不同的URL可以复用同一个WebSocket连接等功能。这些都是HTTP长连接不能做到的。

WebSocket与Socket.io

我们在使用WebSocket协议时通常不会使用它的API来实现，而是借助于Socket.io，Socket.io是一个WebSocket库，包括客户端的js和服务端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询等各种方式中选择最佳的方式来实现网络实时应用，也就是说如果浏览器对WebSocket兼容性差，Socket.io会自动选择最佳方式实现实时通信，非常方便和人性化。
Socket.io官方文档：https://socket.io/get-started/chat/

WebSocket兼容性

WebSocket兼容几乎所有现代浏览器，IE 10+ Edge Firefox 4+ Chrome 4+ Safari 5+ Opera 11.5+
socket.io对浏览器做了很好的兼容。

下一篇讲述Socket.io客户端API

参考文档：https://www.zhihu.com/question/20215561

不支持WebSocket的场景有：

1. 浏览器不支持
2. Web容器不支持，如tomcat7以前的版本不支持WebSocket
3. 防火墙不允许
4. nginx没有开启WebSocket支持