参考链接：https://blog.csdn.net/ORANGE_3iING/article/details/140819324

什么是websocket？

全双工通信的协议。与 HTTP 协议不同的是，WebSocket 允许服务器和客户端在连接建立后能够在不需要重新请求的情况下，相互发送数据。即浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。

使用场景

实时通讯的场景如：即时聊天应用、多人在线游戏、股票行情及天气预报等实时数据更新、在线白板工具、协同开发平台、在线协同绘图工具、设计协作平台等

工作原理

握手过程

WebSocket 连接的建立始于客户端的 HTTP 请求。服务器接收到请求后，会进行确认 并切换为 WebSocket 协议，从而建立连接。
握手成功后，HTTP 连接切换为 WebSocket 连接，此时客户端和服务器之间可以进行全双工通信。

数据传输

一旦 WebSocket 连接建立，客户端和服务器之间就可以进行双向的数据传输。

连接关闭

WebSocket 连接可以由客户端或服务器任意一方发起关闭。包括以下步骤：
发送关闭帧：一方发送一个关闭帧，表明希望关闭连接。
确认关闭请求：接收方回应一个关闭帧，确认关闭请求。
完成关闭：在双方都发送关闭帧后，连接正式关闭。客户端和服务器随后释放相关资源。

前端实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 创建 WebSocket 连接
const socket = new WebSocket('wss://localhost:9527');
 
// 连接成功打开时的处理
socket.onopen = function(event) {
    console.log('WebSocket 连接已打开');
    // 发送一条消息到服务器
    socket.send('halo啊哈哈哈哈哈哈(*´▽｀)ノノ!');
};
 
// 接收到消息时的处理
socket.onmessage = function(event) {
    // 处理接收到的消息
  const message = event.data;
  console.log('接收到消息咯O(∩_∩)O:', message);
};
 
// 连接关闭时的处理
socket.onclose = function(event) {
  console.log('啊喔…… WebSocket连接已关闭(｀・ω・´)');
};
 
// 连接发生错误时的处理
socket.onerror = function(error) {
  console.error('WebSocket发生错误啦:', error);
};
1
2
// 发送文本消息
socket.send('Hello Server!');
1
2
// 关闭 WebSocket 连接
socket.close(1000, 'Normal closure');

前端进阶

断线重连
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
socket.onclose = res => {
  console.log('连接断开');
  reconnect()
}

function reconnect() {
  if (isReconnecting) return
  setTimeout(() => {
    connected = false
    isReconnecting = true
    connect()
    setTimeout(() => {
      if (!connected) {
        isReconnecting = false
        reconnect()
      }
    }, 3000);
  }, 3000);
}
心跳机制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ws.onopen = res => {
  heartBeat()
}
ws.onmessage = res => {
  heartBeat()
}

function heartBeat() {
  sendTimeout && clearTimeout(sendTimeout)
  msgTimeout && clearTimeout(msgTimeout)
  sendTimeout = setTimeout(() => {
    ws.send('heartBeat')
    msgTimeout = setTimeout(() => {
      ws.close()
    }, 5000);
  }, 5000);
}

性能优化

1.减少数据量：合理控制传输的数据量，必要时可以对数据进行压缩
2.心跳机制和断线重连：保持连接活跃，提升体验
3.服务器端优化：合理配置服务器端的连接数和资源管理，以支持更多的并发连接。