Web端即时通讯技术：WebSocket、socket.io、SSE

传统的Web端即时通讯技术从短轮询到长连询，再到Comet技术，在如此原始的HTML标准之下，为了实现所谓的“即时”通信，技术上可谓绞尽脑汁，极尽所能。

自从HTML5标准发布之后，WebSocket这类技术横空出世，实现Web端即时通讯技术的便利性大大提前，以往想都不敢想的真正全双工实时通信，如此早已成为可能。

 

协议运行在OSI的哪层？

应用层，WebSocket协议是一个独立的基于TCP的协议。 它与HTTP唯一的关系是它的握手是由HTTP服务器解释为一个Upgrade请求。

协议运行的标准端口号是多少？

默认情况下，WebSocket协议使用端口80用于常规的WebSocket连接、端口443用于WebSocket连接的在传输层安全（TLS）RFC2818之上的隧道化口。

其中帧的一些重要字段需要解释一下：

1）Upgrade：`upgrade`是HTTP1.1中用于定义转换协议的`header`域。它表示，如果服务器支持的话，客户端希望使用现有的「网络层」已经建立好的这个「连接（此处是 TCP 连接）」，切换到另外一个「应用层」（此处是 WebSocket）协议；

2）Connection：`Upgrade`固定字段。Connection还有其他字段，可以自己给自己科普一下；

3）Sec-WebSocket-Key：用来发送给服务器使用（服务器会使用此字段组装成另一个key值放在握手返回信息里发送客户端）；

4）Sec-WebSocket-Protocol：标识了客户端支持的子协议的列表；

5）Sec-WebSocket-Version：标识了客户端支持的WS协议的版本列表，如果服务器不支持这个版本，必须回应自己支持的版本；

6）Origin：作安全使用，防止跨站攻击，浏览器一般会使用这个来标识原始域；

7）Sec-WebSocket-Accept：服务器响应，包含Sec-WebSocket-Key 的签名值，证明它支持请求的协议版本。

关于Sec-WebSocket-Key和Sec-WebSocket-Accept的计算是这样的：

所有兼容RFC 6455 的WebSocket

服务器都使用相同的算法计算客户端挑战的答案：将Sec-WebSocket-Key

的内容与标准定义的唯一GUID字符(258EAFA5-E914-47DA-95CA-C5AB0DC85B11)串拼接起来，计算出SHA1散列值，结果是一个base-64编码的字符串，把这个字符串发给客户端即可。

用代码就是实现如下：

const key = crypto.createHash('sha1')

      .update(req.headers['sec-websocket-key'] + constants.GUID, 'binary')

      .digest('base64')

引用如下：

Sec-WebSocket-Key/Sec-WebSocket-Accept在主要作用在于提供基础的防护，减少恶意连接、意外连接。即时通讯聊天软件app开发可以加蔚可云的v：weikeyun24咨询

 

作用大致归纳如下：

1）避免服务端收到非法的websocket连接（比如http客户端不小心请求连接websocket服务，此时服务端可以直接拒绝连接）；

2）确保服务端理解websocket连接。因为ws握手阶段采用的是http协议，因此可能ws连接是被一个http服务器处理并返回的，此时客户端可以通过Sec-WebSocket-Key来确保服务端认识ws协议。（并非百分百保险，比如总是存在那么些无聊的http服务器，光处理Sec-WebSocket-Key，但并没有实现ws协议。。。）；

3）用浏览器里发起ajax请求，设置header时，Sec-WebSocket-Key以及其他相关的header是被禁止的。这样可以避免客户端发送ajax请求时，意外请求协议升级（websocket upgrade）；

4）可以防止反向代理（不理解ws协议）返回错误的数据。比如反向代理前后收到两次ws连接的升级请求，反向代理把第一次请求的返回给cache住，然后第二次请求到来时直接把cache住的请求给返回（无意义的返回）；

5）Sec-WebSocket-Key主要目的并不是确保数据的安全性，因为Sec-WebSocket-Key、Sec-WebSocket-Accept的转换计算公式是公开的，而且非常简单，最主要的作用是预防一些常见的意外情况（非故意的）。

强调：Sec-WebSocket-Key/Sec-WebSocket-Accept 的换算，只能带来基本的保障，但连接是否安全、数据是否安全、客户端/服务端是否合法的 ws客户端、ws服务端，其实并没有实际性的保证。

各个字段的解释如下：

1）FIN： 1bit，用来表明这是一个消息的最后的消息片断，当然第一个消息片断也可能是最后的一个消息片断；

2）RSV1，RSV2，RSV3： 分别都是1位，如果双方之间没有约定自定义协议，那么这几位的值都必须为0,否则必须断掉WebSocket连接。在ws中就用到了RSV1来表示是否消息压缩了的；

3）opcode：4 bit，表示被传输帧的类型：

- %x0 表示连续消息片断；

-  %x1 表示文本消息片断；

-  %x2 表未二进制消息片断；

-  %x3-7 为将来的非控制消息片断保留的操作码；

-  %x8 表示连接关闭；

-  %x9 表示心跳检查的ping；

-  %xA 表示心跳检查的pong；

-  %xB-F 为将来的控制消息片断的保留操作码。

4）Mask： 1 bit。定义传输的数据是否有加掩码,如果设置为1,掩码键必须放在masking-key区域，客户端发送给服务端的所有消息，此位都是1；

5）Payload length：传输数据的长度，以字节的形式表示：7位、7+16位、或者7+64位。如果这个值以字节表示是0-125这个范围，那这个值就表示传输数据的长度；如果这个值是126，则随后的两个字节表示的是一个16进制无符号数，用来表示传输数据的长度；如果这个值是127,则随后的是8个字节表示的一个64位无符合数，这个数用来表示传输数据的长度。多字节长度的数量是以网络字节的顺序表示。负载数据的长度为扩展数据及应用数据之和，扩展数据的长度可能为0,因而此时负载数据的长度就为应用数据的长度；

6）Masking-key：0或4个字节，客户端发送给服务端的数据，都是通过内嵌的一个32位值作为掩码的；掩码键只有在掩码位设置为1的时候存在；

7）Extension data： x位，如果客户端与服务端之间没有特殊约定，那么扩展数据的长度始终为0，任何的扩展都必须指定扩展数据的长度，或者长度的计算方式，以及在握手时如何确定正确的握手方式。如果存在扩展数据，则扩展数据就会包括在负载数据的长度之内；

8）Application data： y位，任意的应用数据，放在扩展数据之后，应用数据的长度=负载数据的长度-扩展数据的长度；

9）Payload data： (x+y)位，负载数据为扩展数据及应用数据长度之和；

针对上面的各个字段的介绍，有一个Mask的需要说一下。

掩码键（Masking-key）是由客户端挑选出来的32位的随机数。掩码操作不会影响数据载荷的长度。

掩码、反掩码操作都采用如下算法。

首先，假设：

1）original-octet-i：为原始数据的第i字节；

2）transformed-octet-i：为转换后的数据的第i字节；

3）j：为i mod 4的结果；

4）masking-key-octet-j：为mask key第j字节。

算法描述为：original-octet-i 与 masking-key-octet-j 异或后，得到 transformed-octet-i。

即： j = i MOD 4 transformed-octet-i = original-octet-i XOR masking-key-octet-j

需要注意的重点，我引用一下：

WebSocket协议中，数据掩码的作用是增强协议的安全性。但数据掩码并不是为了保护数据本身，因为算法本身是公开的，运算也不复杂。除了加密通道本身，似乎没有太多有效的保护通信安全的办法。

那么为什么还要引入掩码计算呢，除了增加计算机器的运算量外似乎并没有太多的收益（这也是不少同学疑惑的点）。

答案还是两个字： 安全。但并不是为了防止数据泄密，而是为了防止早期版本的协议中存在的代理缓存污染攻击（proxy cache poisoning attacks）等问题。

传统Web长连接的技术实现背景

在现实的Web端产品中，并不是所有的Web客户端都支持长连接的，或者换句话说，在WebSocket协议出来之前，是三种方式去实现WebSocket类似的功能的。

这三种方式是：

1）Flash：使用Flash是一种简单的方法。不过很明显的缺点就是Flash并不会安装在所有客户端上，比如iPhone/iPad。

2）Long-Polling：也就是众所周之的“长轮询”，在过去，这是一种有效的技术，但并没有对消息发送进行优化。虽然我不会把AJAX长轮询当做一种hack技术，但它确实不是一个最优方法；

3）Comet：在过去，这被称为Web端的“服务器推”技术，相对于传统的 Web 应用， 开发 Comet 应用具有一定的挑战性，

那么如果单纯地使用WebSocket的话，那些不支持的客户端怎么办呢？难道直接放弃掉？

当然不是。Guillermo Rauch大神写了socket.io这个库，对WebSocket进行封装，从而让长连接满足所有的场景，不过当然得配合使用对应的客户端代码。

socket.io将会使用特性检测的方式来决定以websocket/ajax长轮询/flash等方式建立连接。

那么socket.io是如何做到这些的呢？

我们带着以下几个问题去学习：

    1）socket.io到底有什么新特性？

    2）socket.io是怎么实现特性检测的？

    3）socket.io有哪些坑呢？

    4）socket.io的实际应用是怎样的，需要注意些什么？

如果有童鞋对上述问题已经清楚，想必就没有往下读的必要了。

通过前面章节，读者们都知道了WebSocket的功能，那么socket.io相对于WebSocket，在此基础上封装了一些什么新东西呢？

socket.io其实是有一套封装了websocket的协议，叫做engine.io协议，在此协议上实现了一套底层双向通信的引擎Engine.io。

而socket.io则是建立在engine.io上的一个应用层框架而已。所以我们研究的重点便是engine.io协议。

在socket.io的README中提到了其实现的一些新特性（回答了问题一）：

    1）可靠性：连接依然可以建立即使应用环境存在： 代理或者负载均衡器 个人防火墙或者反病毒软件；

    2）支持自动连接： 除非特别指定，否则一个断开的客户端会一直重连服务器直到服务器恢复可用状态；

    3）断开连接检测：在Engine.io层实现了一个心跳机制，这样允许客户端和服务器知道什么时候其中的一方不能响应。该功能是通过设置在服务端和客户端的定时器实现的，在连接握手的时候，服务器会主动告知客户端心跳的间隔时间以及超时时间；

    4）二进制的支持：任何序列化的数据结构都可以用来发送；

    5）跨浏览器的支持：该库甚至支持到IE8；

    6）支持复用：为了在应用程序中将创建的关注点隔离开来，Socket.io允许你创建多个namespace，这些namespace拥有单独的通信通道，但将共享相同的底层连接；

    7）支持Room：在每一个namespace下，你可以定义任意数量的通道，我们称之为"房间"，你可以加入或者离开房间，甚至广播消息到指定的房间。

注意：Socket.IO不是WebSocket的实现，虽然 Socket.IO确实在可能的情况下会去使用WebSocket作为一个transport，但是它添加了很多元数据到每一个报文中：报文的类型以及namespace和ack Id。这也是为什么标准WebSocket客户端不能够成功连接上 Socket.IO 服务器，同样一个 Socket.IO 客户端也连接不上标准WebSocket服务器的原因。