描述:WebSocket 是一种计算机通信协议,通过单个 TCO 连接提供全双工通信通道。

双工( Duplex)

这词咋感觉字不如其意啊!直接谷歌翻译的啊,具体中文名词叫啥我不清楚,有知道的老哥可以 call 我一下。🦀🦀,双工通信系统是由两个或多个连接方或设备组成的 点对点系统,可以在两个方向上相互通信。

全双工

双方可以同时相互通信,举例:是普通的老式电话服务;通话两端的双方可以同时听到并被对方听到。

半双工

双方可以相互通信,但不能同时进行;举例:对讲机

协议握手

Websocket 握手使用 HTTP Upgrade 标头 从 HTTP 协议更改为 u>Websocket;

Upgrade 是 HTTP 头字段。

Websocket 请求不受同源策略的限制,因此 Websocket 服务器必须建立期间验证 Origin 标头,所以 Websocket 是有状态的,这是出于安全考虑的,需要令牌或者其他保护机制来保护 Websocket 连接。

  1. 要建立 Websocket 连接,客户端会发送一个 Websocket 握手请求,服务器会为此返回一个 Websocket 握手响应。

  2. 握手以 HTTP 请求/响应开始,允许服务器在同一端口上处理 HTTP 连接 和 Websocket 连接。一但建立连接,客户端和服务器就可以全双工模式来回发送 Websocket 数据或文本帧;


### 浏览器
const socket = new WebSocket(url);

实例属性

事件 事件处理程序 描述
binaryType socket.binaryType socket.binaryType = “arraybuffer”; 用于二进制数据
readyState socket.readyState 返回连接的当前状态; 状态API

实例方法

WebSocket.close()
关闭连接

WebSocket.send()
排队要传输的数据

事件

addEventListener()使用或通过将事件侦听器分配给oneventname此接口的属性来侦听这些事件。

close
当与 a 的连接WebSocket关闭时触发。也可通过onclose酒店

error
当与 a 的连接WebSocket因错误而关闭时触发,例如某些数据无法发送时。也可通过onerror酒店获取。

message
通过 接收数据时触发WebSocket。也可通过onmessage酒店获取。

open
打开与 a 的连接时触发WebSocket。也可通过onopen酒店获取。

例子

// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});

node服务端

socket.io 是一个基于 Websocket 的库,用于实现实时通信功能,socket.ioWebsocket 的基础上提供了很多高级功能,比如 心跳检查,自动重连,支持多种浏览器和设备等。因此,可以说 socket.ioWebsocket 的一个封装和扩容。

Socket.io 不是 Websocket 实现。

尽管 Socket.IO 确实在可能的情况下使用 WebSocket 进行传输,但它会向每个数据包添加额外的元数据。这就是为什么 WebSocket 客户端无法成功连接到 Socket.IO 服务器,而 Socket.IO 客户端也无法连接到普通 WebSocket 服务器的原因。

自动

在某些特定情况下,服务器和客户端之间的 WebSocket 连接可能会中断,而双方都不知道链接的断开状态。

这就是 Socket.IO 包含心跳机制的原因,它会定期检查连接的状态。

当客户端最终断开连接时,它会自动以指数退避延迟重新连接,以免服务器不堪重负。

数据包

当客户端断开连接时,数据包会自动缓存,并在重新连接时发送。