WebSockets是什么？JavaScript如何实现实时通信

WebSocket是一种基于TCP的全双工实时通信协议，通过持久化连接实现浏览器与服务器间的低延迟、双向消息传输，显著优于传统HTTP轮询；它帧头轻量、高效可靠，广泛应用于聊天、实时通知、协同编辑和行情推送等场景，但需开发者手动处理重连、JSON序列化及连接状态管理——掌握其核心机制与JavaScript实践技巧，是构建现代实时Web应用的关键一步。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它让浏览器和服务器之间可以持续保持连接，实现低延迟、双向实时数据交换。相比传统的 HTTP 轮询或长轮询，WebSocket 减少了频繁建立连接的开销，更适合聊天、实时通知、协同编辑、股票行情等场景。

WebSocket 的核心特点

• 持久连接：客户端与服务器握手成功后，连接长期保持，不随每次请求断开。
• 双向通信：服务器可主动向客户端推送消息，无需等待客户端请求。
• 轻量高效：帧头仅 2–14 字节，比 HTTP 头小得多，适合高频小数据传输。
• 基于 TCP：底层可靠，但不内置重连、消息确认等机制，需应用层补充。

JavaScript 中创建 WebSocket 连接

使用 new WebSocket(url) 即可初始化连接，URL 以 ws://（非加密）或 wss://（加密，推荐）开头：

// 示例：连接本地测试服务
const socket = new WebSocket('wss://echo.websocket.org');

关键事件监听：

• onopen：连接建立成功，可在此发送首次消息。
• onmessage：收到服务器消息，event.data 包含内容（可能是字符串或 Blob）。
• onerror：发生网络或协议错误，通常不表示连接断开。
• onclose：连接关闭，可通过 event.code 和 event.reason 判断原因。

发送与接收消息的实用写法

WebSocket 默认只支持字符串和 ArrayBuffer（即二进制），如需传 JSON，需手动序列化/解析：

// 发送 JSON 数据
socket.onopen = () => {
  socket.send(JSON.stringify({ type: 'login', user: 'Alice' }));
};

// 接收并解析
socket.onmessage = (event) => {
  try {
    const data = JSON.parse(event.data);
    console.log('收到:', data);
  } catch (e) {
    console.warn('非 JSON 消息:', event.data);
  }
};

简单可靠的连接管理建议

原生 WebSocket 不自带重连，实际项目中建议封装基础逻辑：

• 使用 setTimeout 在 onclose 后延迟重连，避免密集失败。
• 记录连接状态（如 isConnected 标志），防止重复 send 导致报错。
• 发送前检查 socket.readyState === WebSocket.OPEN。
• 关闭前调用 socket.close(code, reason)，便于服务端日志归因。

今天关于《WebSockets是什么？JavaScript如何实现实时通信》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！