websocket

一、什么是websocket？

<code>WebSocket 是一种基于 TCP 的网络协议。在 2009 年诞生，2011 年被 W3C 定为标准

（万维网联盟：Web技术领域具有权威和影响力的国际中立性技术标准机构。））

WebSocket 是一种全双工通信的协议，双端建立连接成功了，既允许客户端向服务器主动发送消息，也允许服务器主动向客户端发送消息。在 WebSocket 中，客户端和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，进行双向数据传输。

聊天室在线协作编辑实时通知和提醒（CRM-消息通知；H5-签到页面实时刷新）

二、为什么使用websocket？

<code>答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

websocket未出现之前实时通讯的解决方案

1、短轮询（Short Polling）

短轮询是指客户端每隔一段时间就询问一次服务器是否有新的消息，如果有就接收消息。

优点

实现简单；浏览器兼容性较好

缺点

有一定延迟、服务器压力较大

浪费带宽流量、大部分是无效请求

延迟：客户端30s发送请求，

​ 服务端在第15s左右有消息，

2、长轮询（Long Polling）

客户端发送一个 HTTP 请求到服务器，服务器保持请求打开，直到有新数据可发送，然后立即回复给客户端。客户端收到响应后，再发送新的请求，如此往复。

优点

减少轮询次数，低延迟

缺点

服务器需要保持大量连接。

等等。。。

相比之下，WebSocket 允许双方自由通讯，减少一部分限制，大大提高了效率和性能

三、如何使用websocket？

1、创建websocket对象

const socket = new WebSocket('ws://example.com/socket');

// 在这里，ws://example.com/socket 是 WebSocket 服务器的地址。

websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"加密"wss".便于开发者理解和使用

2、处理连接事件

常用属性

onopen: 连接建立成功时触发。

onmessage: 接收到服务器发送的消息时触发。

onclose: 连接关闭时触发。

onerror: 连接发生错误时触发。

socket.onopen = function(event) {

console.log('连接已打开');

};

socket.onmessage = function(event) {

console.log('接收到消息: ' + event.data);

};

socket.onclose = function(event) {

console.log('连接已关闭');

};

socket.onerror = function(error) {

console.error('连接发生错误: ' + error.message);

};

方法

websocket.send(data) ：向服务器发送消息

websocket.close() ：当不再需要连接时，可以调用 close 方法关闭连接

// 发送消息

socket.send('Hello, WebSocket!');

// 关闭链接

socket.close();

心跳重连机制

问题：

websocket在连接后，如果长时间服务端和客户端不发消息，连接可能会断开，或者存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。

为了解决上面的问题，就需要⼀种方案来检测客户端和服务端是否处于正常的连接状态。

心跳机制的目的是定期发送小的探测消息，以确保连接仍然有效，如果连接断开或出现问题，可以及时发现并采取措施。

实现方法

1、建立连接后定义心跳间隔

const heartbeatInterval = 30000; // 30秒

2、定义心跳消息

const heartbeatMessage = 'ping';

发送方->接收方：ping – 客户端接收方->发送方：pong – 服务端

3、设置心跳定时器

一旦WebSocket连接打开，使用setInterval函数设置一个定时器，以便每隔一段时间发送心跳消息。

socket.onopen = function(event) {

console.log('WebSocket连接已打开');

heartbeat = setInterval(() => {

socket.send(heartbeatMessage);

}, heartbeatInterval);

};

4、处理心跳消息

socket.onmessage = function(event) {

const message = event.data;

if (message === 'pong') {

console.log('接收到心跳消息');

// 在这里可以执行一些处理心跳消息的操作

} else {

console.log('接收到其他消息：', message);

// 处理其他类型的消息

}

};

5、清除心跳定时器

当WebSocket连接关闭时，清除之前设置的心跳定时器，以防止继续发送心跳消息。

socket.onclose = function(event) {

console.log('WebSocket连接已关闭');

clearInterval(heartbeat);

};