JS如何实现WebSocket通信_JavaScriptWebSocket实时通信实现方法-js教程-PHP中文网

JS如何实现WebSocket通信_JavaScriptWebSocket实时通信实现方法

爱谁谁

发布： 2025-11-11 20:51:02

原创

700人浏览过

WebSocket通过单个TCP连接实现全双工通信，相比HTTP轮询更高效，适用于实时场景。在JavaScript中使用new WebSocket()创建连接，监听onopen、onmessage、onerror和onclose事件处理通信状态。连接建立后可通过send()发送字符串或二进制数据，接收消息时通过event.data获取内容，支持JSON解析。需检查readyState确保连接开启方可发送数据。主动调用close()关闭连接会触发onclose事件，网络异常时onerror触发但不自动重连，需手动实现重连机制。实际应用需前后端协同，确保协议一致与安全认证。

js如何实现websocket通信_javascriptwebsocket实时通信实现方法

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，能够实现客户端与服务器之间的实时数据交互。相比传统的 HTTP 轮询，WebSocket 更高效、延迟更低，非常适合聊天应用、实时通知、在线协作等场景。在 JavaScript 中，可以通过原生 API 实现 WebSocket 通信。

创建 WebSocket 连接

要使用 WebSocket，首先需要创建一个 WebSocket 实例，传入服务器的 WebSocket 地址（以 ws:// 或 wss:// 开头）。

const socket = new WebSocket('wss://echo.websocket.org');

连接建立后，会触发几个关键事件：

onopen：连接成功时触发
onmessage：收到服务器消息时触发
onerror：通信发生错误时触发
onclose：连接关闭时触发

示例代码：

立即学习“Java免费学习笔记（深入）”；

socket.onopen = () => {
console.log('连接已建立');
socket.send('Hello Server!');
};

接收服务器消息

当服务器向客户端发送数据时，客户端通过 onmessage 事件接收。事件对象的 data 属性包含实际消息内容。

socket.onmessage = (event) => {
console.log('收到消息:', event.data);
};

消息内容通常是字符串，也可以是 JSON 格式或二进制数据（如 Blob 或 ArrayBuffer）。如果传输的是 JSON 数据，建议使用 JSON.parse() 解析。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

发送消息到服务器

使用 send() 方法可以向服务器发送数据。支持发送字符串、ArrayBuffer 或 Blob。

socket.send('这是一条文本消息');
socket.send(JSON.stringify({ type: 'chat', msg: '你好' }));

注意：必须在连接状态为 OPEN（即 onopen 触发后）才能调用 send()，否则会报错。可通过 readyState 检查连接状态：

if (socket.readyState === WebSocket.OPEN) {
socket.send('可以发送');
}

关闭连接与异常处理

主动关闭连接可调用 close() 方法：

socket.close();

关闭后会触发 onclose 事件，可获取关闭码和原因：

socket.onclose = (event) => {
  if (event.wasClean) {
    console.log(`连接正常关闭，状态码=${event.code}`);
  } else {
    console.log('连接异常关闭');
  }
};

遇到网络中断或服务器问题时，onerror 被触发，但不会自动重连。实际项目中常需手动实现重连机制：

let retryTimes = 0;
const maxRetries = 5;
function connect() {
  const socket = new WebSocket('wss://your-server');
  socket.onclose = () => {
    if (retryTimes       setTimeout(connect, 2000);
      retryTimes++;
    }
  };
  socket.onerror = () => socket.close();
}

基本上就这些。掌握连接、收发消息和错误处理，就能在前端实现完整的 WebSocket 通信。实际开发中还需配合后端服务（如 Node.js、Socket.IO、Spring WebSocket 等），确保协议一致和安全认证。不复杂但容易忽略细节，比如状态判断和重连策略。

以上就是JS如何实现WebSocket通信_JavaScriptWebSocket实时通信实现方法的详细内容，更多请关注php中文网其它相关文章！