Cheng

Appearance

websocket 应用 ​

特点:

  • 建立在 TCP 协议之上，服务器端的实现比较容易
  • 数据格式比较轻量，性能开销小，通信高效
  • 可以发送文本，也可以发送二进制数据
  • 没有同源限制，客户端可以与任意服务器通信
  • 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

简单示例 ​

js
//发送按钮和文本框元素
const sendBtn = document.getElementById('sendBtn')
const messageBox = document.getElementById('messageBox')

// 创建 WebSocket 对象
const ws = new WebSocket('ws://echo.websocket.org'); 
// 设置 WebSocket 连接建立时
ws.onopen = function() {
   console.log('WebSocket 连接已建立');
};
// 设置 WebSocket 接收到消息时
ws.onmessage = function(event) {
   console.log('WebSocket 接收到消息:', event.data);
   messageBox.value += event.data + '\n';
};
// 设置 WebSocket 发生错误时
ws.onerror = function() {
   console.log('WebSocket 发生错误');
};
// 设置 WebSocket 连接关闭时
ws.onclose = function() {
   console.log('WebSocket 连接已关闭');
}
// 点击按钮发送消息
sendBtn.onclick = function() {
    const message = 'hello socket'
    socket.send(message)
    messageBox.value +='发送消息:'+message+'/n'
}

数据传输 ​

通信类型 ​

  1. text frames--文本数据
  2. binary data frames--二进制数据
  3. ping/pong frames--检查连接(心跳机制)

数据发送 ​

socket.send(body) 调用允许 body 是字符串或二进制格式(Blob，ArrayBuffer)。不需要额外的设置，直接发送就可以

数据接收 ​

数据一般以字符串形式呈现。对于二进制数据，通过设置socket.binaryType(Blob 和 ArrayBuffer), 默认"blob"

js
socket.binaryType = "arraybuffer";
socket.onmessage = (event) => {
  // event.data 可以是文本（如果是文本），也可以是 arraybuffer（如果是二进制数据）
};

连接关闭 ​

当一方关闭连接时(浏览器或服务器), 会发送一个数字code码和文本形式的原因

js
socket.close([code], [reason]);
  • 获取关闭事件
js
// 关闭方：
socket.close(1000, "Work complete");
// 另一方
socket.onclose = event => {
  // event.code === 1000
  // event.reason === "Work complete"
  // event.wasClean === true (clean close)
};
  • 常见code码含义
code码含义
1000默认正常关闭
1006表示连接丢失
1001一方正在离开，例如服务器正在关闭，或者浏览器离开了该页面
1009消息太大，无法处理
1011服务器上发生意外错误

连接状态 ​

要获取连接状态，可以通过带有值的 socket.readyState 属性：

  • 0 —— “CONNECTING”：连接还未建立，
  • 1 —— “OPEN”：通信中，
  • 2 —— “CLOSING”：连接关闭中，
  • 3 —— “CLOSED”：连接已关闭。

心跳检测 ​

机制: 客户端每隔固定时间发送一次, 保持客户端和服务端的长连接

思路 ​

  1. 客户端建立ws连接, 并开启定时发送心跳
  2. 创建心跳定时器的同时, 开启服务器返回超时定时器, 如果超时关闭ws连接
  3. 服务器响应数据后, 清空超时定时器和心跳定时器, 并重新开启定时任务
js
const initSocket = ()=>{
   socket = new 
}