即时通讯WebSocket详解及使用

由于 http 存在一个明显的弊端（消息只能有客户端推送到服务器端，而服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使用轮询，而轮询效率过低，并不适合。于是 WebSocket被发明出来。

一、什么是WebSocket

二、WebSocket的特点

三、WebSocket的通信原理和机制

四、WebSocket相比于http有哪些优点

五、短轮询、长轮询和 WebSocket 间的区别

六、WebSocket 的握手

七、WebSocket使用及使用场景

一、什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议，数据是通过http协议传输的，但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。客户端和服务器都可以随时向互相发送数据，能更好的节省服务器资源和带宽并达到实时通讯的目的。

二、WebSocket的特点

1.WebSocket 采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，但因为它的主要运行环境是浏览器，在使用习惯上尽量向 HTTP 靠拢。

2.WebSocket 没有使用 TCP 的“IP 地址 + 端口号”，WebSocket 使用ws或wss协议，分别表示明文和加密的 WebSocket 协议。

三、WebSocket的通信原理和机制

WebSocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp服务器保持长连接，数据发送是双向。

四、WebSocket相比于http有哪些优点

websocket优点：

支持双向通信，实时性更强；
可以发送文本，也可以二进制文件；
协议标识符是 ws，加密后是 wss ；
较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；
支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）
无跨域问题。

相同点：

都是基于tcp的，都是可靠性传输协议
都是应用层协议

不同点：

WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息
HTTP是单向的
WebSocket是需要浏览器和服务器握手进行建立连接的
而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

联系：WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的

五、短轮询、长轮询和 WebSocket 间的区别

1. 短轮询

短轮询的基本思路:
浏览器每隔一段时间向浏览器发送 http 请求，服务器端在收到请求后，不论是否有数据更新，都直接进行响应。
这种方式实现的即时通信，本质上还是浏览器发送请求，服务器接受请求的一个过程，通过让客户端不断的进行请求，使得客户端能够模拟实时地收到服务器端的数据的变化。
优缺点
优点是比较简单，易于理解。
缺点是这种方式由于需要不断的建立 http 连接，严重浪费了服务器端和客户端的资源。当用户增加时，服务器端的压力就会变大，这是很不合理的。

2. 长轮询

长轮询的基本思路:
首先由客户端向服务器发起请求，当服务器收到客户端发来的请求后，服务器端不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新。
如果有更新，则进行响应，如果一直没有数据，则到达一定的时间限制才返回。客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。
优缺点
长轮询和短轮询比起来，它的优点是明显减少了很多不必要的 http 请求次数，相比之下节约了资源。
长轮询的缺点在于，连接挂起也会导致资源的浪费

3. WebSocket

WebSocket 是 Html5 定义的一个新协议，与传统的 http 协议不同，该协议允许由服务器主动的向客户端推送信息。
使用 WebSocket 协议的缺点是在服务器端的配置比较复杂。WebSocket 是一个全双工的协议，也就是通信双方是平等的，可以相互发送消息。

六、WebSocket 的握手

从图片可知，分三个阶段

打开握手
数据传递
关闭握手

TCP握手

客户端和服务端都需要直到各自可收发，因此需要三次握手

三次握手

第一次握手成功让服务端知道了客户端具有发送能力
第二次握手成功让客户端知道了服务端具有接收和发送能力，但此时服务端并不知道客户端是否接收到了自己发送的消息
所以第三次握手就起到了这个作用。`

三次握手过程中可以携带数据吗

第一次、第二次握手不可以携带数据，因为一握二握时还没有建立连接，会让服务器容易受到攻击
而第三次握手，此时客户端已经处于 ESTABLISHED (已建立连接状态) ，对于客户端来说，已经建立起连接了，并且也已经知道服务器的接收、发送能力是正常的了，所以能携带数据也是没问题的。

四次挥手

所谓的四次挥手即TCP连接的释放(解除)。连接的释放必须是一方主动释放，另一方被动释放

当只有服务端把所有的报文都发送完了，才会发送 FIN 报文，告诉客户端可以断开连接了，因此在断开连接时需要四次挥手。

关闭连接时，当收到对方的FIN报文通知时，它仅仅表示对方没有数据发送给你了；但未必你所有的数据都全部发送给对方了
所以你未必会马上关闭SOCKET,也即你可能还需要发送一些数据给对方之后，再发送FIN报文给对方来表示你同意现在可以关闭连接了，所以它这里的ACK报文和FIN报文多数情况下都是分开发送的。

为什么建立连接只通信了三次，而断开连接却用了四次？

客户端要求断开连接，发送一个断开的请求，这个叫作（FIN）。
服务端收到请求，然后给客户端一个 ACK，作为 FIN 的响应。
这里你需要思考一个问题，可不可以像握手那样马上传 FIN 回去？
其实这个时候服务端不能马上传 FIN，因为断开连接要处理的问题比较多，比如说服务端可能还有发送出去的消息没有得到 ACK；也有可能服务端自己有资源要释放。因此断开连接不能像握手那样操作——将两条消息合并。所以，服务端经过一个等待，确定可以关闭连接了，再发一条 FIN 给客户端。
客户端收到服务端的 FIN，同时客户端也可能有自己的事情需要处理完，比如客户端有发送给服务端没有收到 ACK 的请求，客户端自己处理完成后，再给服务端发送一个 ACK。

七、WebSocket使用及使用场景

1.创建websocket对象，通过地址客户端与服务器端的连接。

websocket 当前状态：
ws.readyState
// 0: 'CONNECTING',表示正在连接
// 1: 'OPEN', 表示连接成功，可以通信了
// 2: 'CLOSING', 表示连接正在关闭
// 3: 'CLOSED', 表示连接已经关闭，或者打开连接失败。

// 创建WebSocket连接.
const socket = new WebSocket('ws://localhost:8080');

2. 连接成功触发

连接触发事件：

Socket.onopen:连接建立时触发
Socke.onmessage：客户端接受服务端数据时触发
Socket.onerror:通信错误时触发
Socket.onclose：连接关闭时触发

ws.onopen = function () {// 指定连接成功后的回调函数
}
ws.onclose = function () {// 指定连接关闭后的回调函数
}
ws.onmessage = function () {// 指定收到服务器数据后的回调函数
}
ws.onerror = function () {// 指定报错时的回调函数
}

3. 发送数据

ws.send(message)  向服务器发送数据

4.关闭连接

ws.close()  关闭当前连接

使用场景

即时通讯
在线游戏
软件更新
直播聊天
社交订阅
多人协同在线编辑