JavaScript实现WebSocket连接教程

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript实现WebSocket教程》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

JavaScript 实现 WebSocket 的核心是 WebSocket 对象，它通过 API 建立客户端与服务器间的持久双向通信；1. 创建 WebSocket 对象并指定 ws:// 或 wss:// 地址；2. 监听 open、message、close、error 事件以管理连接状态和数据接收；3. 使用 socket.send() 发送文本或二进制数据；4. 调用 socket.close() 主动关闭连接；连接失败时需检查服务器状态、网络、CORS 配置及协议兼容性；为实现断线重连，可在 close 事件中结合指数退避算法和最大重连次数限制进行智能重试；心跳检测通过客户端定时发送 ping 消息并设置超时机制，若未在规定时间内收到服务器 pong 响应则判定连接失效并触发重连，服务器端需配合回复 pong 以维持连接活跃，从而确保通信的稳定性与可靠性。

JavaScript 实现 WebSocket 的核心在于 WebSocket 对象。它提供了一套 API，允许你在客户端和服务器之间建立持久的双向通信连接。简单来说，就是用 JavaScript 就能让浏览器跟服务器“唠嗑”，而且是长期的、实时的“唠嗑”。

解决方案

首先，你需要创建一个 WebSocket 对象，并指定服务器的 WebSocket 地址。这个地址通常以 ws:// 或 wss:// 开头 (安全连接)。

const socket = new WebSocket('ws://your-websocket-server.com');
// 或者使用安全连接：
// const socket = new WebSocket('wss://your-websocket-server.com');

接下来，你需要监听几个关键的事件：

• open: 连接建立时触发。
• message: 接收到服务器消息时触发。
• close: 连接关闭时触发。
• error: 发生错误时触发。

socket.addEventListener('open', (event) => {
  console.log('WebSocket 连接已建立');
  // 连接建立后，可以发送消息
  socket.send('你好，服务器！');
});

socket.addEventListener('message', (event) => {
  console.log('接收到服务器消息：', event.data);
});

socket.addEventListener('close', (event) => {
  console.log('WebSocket 连接已关闭');
});

socket.addEventListener('error', (event) => {
  console.error('WebSocket 发生错误：', event);
});

发送消息使用 socket.send() 方法，可以发送文本、二进制数据等。

socket.send('这是一条消息'); // 发送文本消息
const buffer = new ArrayBuffer(8); // 创建一个 8 字节的 ArrayBuffer
const view = new Uint8Array(buffer);
view[0] = 1;
view[1] = 2;
socket.send(buffer); // 发送二进制消息

最后，当你不再需要连接时，应该关闭它。

socket.close();

WebSocket 连接建立失败怎么办？

WebSocket 连接失败的原因有很多，比如服务器未启动、网络问题、CORS 策略限制、协议不匹配等等。

首先，检查你的服务器是否正确运行，并且监听了正确的端口。 可以使用 telnet your-websocket-server.com port 命令简单测试端口是否开放。

其次，确保你的客户端和服务器端使用的 WebSocket 协议版本兼容。老旧的浏览器可能不支持最新的 WebSocket 协议。

CORS 问题也比较常见。如果你的 WebSocket 服务器和客户端不在同一个域下，你需要确保服务器正确配置了 CORS 头部，允许跨域访问。 这通常需要在服务器端设置 Access-Control-Allow-Origin 头部。

网络问题也可能导致连接失败。 检查客户端的网络连接是否正常，防火墙是否阻止了 WebSocket 连接。

最后，一些代理服务器或中间件可能会干扰 WebSocket 连接。 确保你的网络环境允许 WebSocket 连接通过。

如何处理 WebSocket 断线重连？

WebSocket 连接可能因为各种原因断开，例如网络不稳定、服务器重启等。为了提高应用的健壮性，你需要实现断线重连机制。

一种简单的做法是，在 close 事件处理函数中，设置一个定时器，在一段时间后尝试重新连接。

let reconnectInterval = 3000; // 3秒后重连

socket.addEventListener('close', (event) => {
  console.log('WebSocket 连接已关闭，尝试重连...');
  setTimeout(() => {
    socket = new WebSocket('ws://your-websocket-server.com'); // 重新创建 WebSocket 对象
    // 重新绑定事件监听器 (open, message, close, error)
  }, reconnectInterval);
});

但是，简单的定时器重连可能会导致频繁的重连尝试，加重服务器负担。 更高级的做法是使用指数退避算法。 每次重连失败后，增加重连的间隔时间。 例如，第一次重连间隔 1 秒，第二次 2 秒，第三次 4 秒，以此类推。 这样可以避免在服务器出现问题时，客户端疯狂地尝试重连。

let reconnectInterval = 1000; // 初始重连间隔
let maxReconnectInterval = 30000; // 最大重连间隔
let reconnectAttempts = 0;

socket.addEventListener('close', (event) => {
  console.log('WebSocket 连接已关闭，尝试重连...');
  reconnectAttempts++;
  reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval); // 指数退避
  setTimeout(() => {
    socket = new WebSocket('ws://your-websocket-server.com'); // 重新创建 WebSocket 对象
    // 重新绑定事件监听器 (open, message, close, error)
    console.log(`第 ${reconnectAttempts} 次尝试重连，间隔 ${reconnectInterval} 毫秒`);
  }, reconnectInterval);
});

另外，你还可以添加一些额外的逻辑，例如：

• 限制最大重连次数。
• 在重连之前，检查网络连接是否可用。
• 记录重连失败的日志，方便排查问题。

如何使用 JavaScript 实现 WebSocket 心跳检测？

心跳检测是一种常用的机制，用于检测 WebSocket 连接是否仍然有效。客户端或服务器定期发送一个 "心跳" 消息，如果对方在一定时间内没有收到心跳消息，就认为连接已经断开。

客户端实现心跳检测的思路是：

1. 客户端定时发送心跳消息给服务器。
2. 客户端设置一个超时定时器。
3. 如果客户端在超时时间内没有收到服务器的响应，就认为连接已经断开，并尝试重连。

let heartbeatInterval = 30000; // 30 秒发送一次心跳
let heartbeatTimeout = 60000; // 60 秒超时
let heartbeatTimer;

function sendHeartbeat() {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send('ping'); // 发送心跳消息
    heartbeatTimer = setTimeout(() => {
      console.log('心跳超时，尝试重连');
      socket.close(); // 关闭连接，触发重连逻辑
    }, heartbeatTimeout);
  }
}

socket.addEventListener('open', (event) => {
  console.log('WebSocket 连接已建立');
  // 启动心跳检测
  setInterval(sendHeartbeat, heartbeatInterval);
});

socket.addEventListener('message', (event) => {
  if (event.data === 'pong') {
    // 收到服务器的 pong 响应，清除超时定时器
    clearTimeout(heartbeatTimer);
  } else {
    console.log('接收到服务器消息：', event.data);
  }
});

服务器端也需要实现类似的心跳检测逻辑。 当服务器收到客户端的心跳消息时，需要回复一个 "pong" 消息。 如果服务器在一定时间内没有收到客户端的心跳消息，也认为连接已经断开，并关闭连接。

需要注意的是，心跳消息的内容可以自定义，只要客户端和服务器端约定好即可。 例如，可以使用 JSON 格式的心跳消息，包含一些额外的信息。

本篇关于《JavaScript实现WebSocket连接教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！