JS WebSocket 深度解析

JS WebSocket 深度解析

在这里插入图片描述

文章目录

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

五、优点与缺点

优点

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

缺点

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

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

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');
  // 可以在这里实现重连机制
};

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

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