直播间讨论区需要WebSocket,简单了解下

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

WebSocket技术在直播间讨论区中通常被使用。WebSocket是一种在Web浏览器和服务器之间建立持久性连接的协议，它允许实时的双向通信。相比起传统的HTTP请求-响应模式，WebSocket可以提供更快的数据传输速度和更低的延迟。

在直播间讨论区，用户可以发送消息、评论或者进行互动。通过WebSocket技术，服务器可以将这些消息实时地推送给其他观众，从而实现实时的讨论和互动体验。

通过WebSocket，直播间讨论区可以支持多个用户之间的实时消息交流，无需频繁地进行轮询或刷新页面。这种实时的交互性能使得用户能够更加方便地进行实时的互动和社交。

因此，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()  关闭当前连接

使用场景 

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

---