JS WebSocket 深度解析

JS WebSocket 深度解析

---

文章目录

• • • [JavaScript WebSocket 深度解析](#JavaScript WebSocket 深度解析)
    • • [一、WebSocket 是什么](#一、WebSocket 是什么)
      • [二、JS 中如何使用 WebSocket](#二、JS 中如何使用 WebSocket)
      • • [1. 创建 WebSocket 对象](#1. 创建 WebSocket 对象)
        • [2. 连接打开事件](#2. 连接打开事件)
        • [3. 监听消息事件](#3. 监听消息事件)
        • [4. 监听错误事件](#4. 监听错误事件)
        • [5. 关闭连接](#5. 关闭连接)
      • [三、WebSocket 包含哪些属性或方法 API](#三、WebSocket 包含哪些属性或方法 API)
      • • [1. 属性](#1. 属性)
        • [2. 方法](#2. 方法)
      • 四、扩展与高级技巧
      • • [1. 心跳检测](#1. 心跳检测)
        • [2. 重连机制](#2. 重连机制)
        • [3. 消息分片与重组](#3. 消息分片与重组)
        • [4. 安全性增强](#4. 安全性增强)
        • [5. 兼容性处理](#5. 兼容性处理)
      • 五、优点与缺点
      • • 优点
        • 缺点
      • 六、对应"八股文"或面试常问问题
      • • [1. WebSocket 与 HTTP 的主要区别是什么？](#1. WebSocket 与 HTTP 的主要区别是什么？)
        • [2. WebSocket 如何保证数据传输的安全性？](#2. WebSocket 如何保证数据传输的安全性？)
        • [3. WebSocket 连接过程中的状态码有哪些？](#3. WebSocket 连接过程中的状态码有哪些？)
        • [4. WebSocket 的心跳检测有什么作用？](#4. WebSocket 的心跳检测有什么作用？)
        • [5. WebSocket 的 `bufferedAmount` 属性有什么作用？](#5. WebSocket 的 bufferedAmount 属性有什么作用？)
      • 七、总结与展望
      • 八、完整使用示例

JavaScript WebSocket 深度解析

一、WebSocket 是什么

WebSocket 是一种网络通信协议，它提供了浏览器和服务器之间的全双工通信渠道。与传统的 HTTP 请求相比，WebSocket 允许服务器主动向客户端发送信息，客户端也可以随时向服务器发送消息，实现了真正的双向即时通信。

二、JS 中如何使用 WebSocket

1. 创建 WebSocket 对象

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

2. 连接打开事件

socket.onopen = function(event) {
  console.log('Connection opened');
};

3. 监听消息事件

socket.onmessage = function(event) {
  console.log('Message from server ', event.data);
};

4. 监听错误事件

socket.onerror = function(event) {
  console.error('WebSocket error observed:', event);
};

5. 关闭连接

socket.onclose = function(event) {
  console.log('Connection closed');
};

三、WebSocket 包含哪些属性或方法 API

1. 属性

• socket.readyState：表示连接状态，可以是 CONNECTING (0), OPEN (1), CLOSING (2), 或 CLOSED (3)。
• socket.bufferedAmount：未发送至服务器的字节数。

2. 方法

• socket.send(data)：发送数据到服务器。
• socket.close([code[, reason]])：关闭连接。

四、扩展与高级技巧

1. 心跳检测

案例：

let heartbeatTimer = null;
const heartbeatInterval = 30000; // 心跳间隔时间，设为30秒

// 开启心跳检测
function startHeartbeat() {
  heartbeatTimer = setInterval(() => {
    socket.send(JSON.stringify({ type: 'ping' }));
  }, heartbeatInterval);
}

// 清除心跳检测
function clearHeartbeat() {
  if (heartbeatTimer) {
    clearInterval(heartbeatTimer);
    heartbeatTimer = null;
  }
}

socket.onopen = function() {
  startHeartbeat();
};

socket.onclose = function() {
  clearHeartbeat();
};

2. 重连机制

案例：

let reconnectTimer = null;
const reconnectInterval = 5000; // 重连间隔时间，设为5秒

function reconnect() {
  if (socket.readyState === WebSocket.CLOSED) {
    console.log('Attempting to reconnect...');
    socket = new WebSocket('wss://example.com/socket');
    socket.onopen = function() {
      console.log('Reconnection successful');
      startHeartbeat();
    };
    socket.onerror = function(event) {
      console.error('WebSocket error during reconnection:', event);
    };
    socket.onclose = function() {
      console.log('Reconnection closed, attempting again...');
      reconnect();
    };
  }
}

socket.onclose = function() {
  clearHeartbeat();
  reconnectTimer = setInterval(reconnect, reconnectInterval);
};

3. 消息分片与重组

案例：

let buffer = '';

socket.onmessage = function(event) {
  const message = event.data;
  buffer += message;

  // 假设我们约定每个完整消息都以换行符结束
  const messages = buffer.split('\n');
  buffer = messages.pop(); // 保存最后一个不完整的消息片段

  messages.forEach(completeMessage => {
    console.log('Complete message received:', completeMessage);
    // 处理完整消息
  });
};

4. 安全性增强

使用 wss 协议，确保数据传输的安全性。这部分主要依赖于服务器端的配置，客户端在创建 WebSocket 对象时使用 wss:// 开头的 URL 即可。

5. 兼容性处理

对于不支持 WebSocket 的浏览器，可以提供降级方案，如使用长轮询（long polling）。这部分通常需要在服务器端进行逻辑处理，根据客户端的请求头或参数来判断是否使用 WebSocket。

五、优点与缺点

优点

1. 真正的双向通信。
2. 较少的控制开销。连接创建后，客户端和服务器之间交换数据时，用于协议控制的数据包头部相对较小。
3. 更好的二进制支持。
4. 没有同源限制，客户端可以与任意服务器通信。

缺点

1. 少数浏览器不支持，且部分浏览器中的 WebSocket 受同源策略影响。
2. 服务器端的逻辑比轮询复杂。
3. 代理服务器配置可能较为复杂。

六、对应"八股文"或面试常问问题

1. WebSocket 与 HTTP 的主要区别是什么？

WebSocket 是全双工通信，而 HTTP 是请求/响应模式。

2. WebSocket 如何保证数据传输的安全性？

WebSocket 使用 wss（WebSocket Secure）协议，它是 WebSocket 协议的加密版本，相当于 HTTPS。

3. WebSocket 连接过程中的状态码有哪些？

WebSocket 连接过程中的状态码包括 CONNECTING (0), OPEN (1), CLOSING (2), 和 CLOSED (3)。

4. WebSocket 的心跳检测有什么作用？

心跳检测用于保持连接的活跃性，并检测对方是否仍然在线。

5. WebSocket 的 bufferedAmount 属性有什么作用？

bufferedAmount 属性表示还未发送至服务器的字节数，可以用来控制发送速率，避免发送过快导致数据丢失。

七、总结与展望

WebSocket 提供了一种高效的双向通信机制，非常适合需要实时数据交互的应用场景。随着技术的发展，WebSocket 将在更多领域得到应用，并成为实时通信的首选技术。

八、完整使用示例

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

// 心跳检测和重连机制的代码可以放在这里

socket.onopen = function(event) {
  console.log('Connection opened');
  socket.send('Hello Server!');
};

socket.onmessage = function(event) {
  console.log('Message from server ', event.data);
};

socket.onerror = function(event) {
  console.error('WebSocket error observed:', event);
};

socket.onclose = function(event) {
  console.log('Connection closed');
  // 可以在这里实现重连机制
};

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！