WebSocket实时通信教程详解

本文深入浅出地讲解了如何使用 JavaScript 基于 WebSocket 实现实时、双向、低延迟的通信，涵盖从创建连接、监听核心事件（onopen/onmessage/onerror/onclose）、规范使用 JSON 传输结构化数据，到手动实现带退避策略和次数限制的健壮自动重连机制，并特别强调了生产环境中 wss:// 与 HTTPS 的协议匹配要求以及服务端跨域校验的关键注意事项——无论你是初学实时功能的新手，还是正在优化聊天、协作或通知类应用的开发者，这篇实用指南都能帮你避开常见坑点，快速构建稳定可靠的实时通信能力。

JavaScript 实现实时通信，最常用、最直接的方式就是使用 WebSocket。它是一种在单个 TCP 连接上进行全双工通信的协议，能让浏览器与服务器之间建立持久连接，实现低延迟、双向、实时的数据交换。

WebSocket 的基本使用流程

创建 WebSocket 连接非常简单，核心是实例化 WebSocket 对象，并监听关键事件：

• 连接建立：监听 onopen，连接成功后可立即发送数据
• 接收消息：监听 onmessage，服务端推送的数据会在这里触发
• 连接异常：监听 onerror，处理网络中断或协议错误
• 连接关闭：监听 onclose，可在此做清理或重连逻辑

示例代码：

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

ws.onopen = () => {
  console.log('已连接');
  ws.send(JSON.stringify({ type: 'join', user: 'Alice' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到消息：', data);
};

ws.onerror = (error) => {
  console.error('WebSocket 错误：', error);
};

ws.onclose = () => {
  console.log('连接已关闭');
};

发送与接收结构化数据

WebSocket 本身只收发字符串或 ArrayBuffer，实际项目中建议统一用 JSON 格式通信，便于前后端解析：

• 发送前用 JSON.stringify() 序列化对象
• 接收后用 JSON.parse() 解析字符串
• 可在消息体中加入 type 字段区分业务类型（如 'message'、'typing'、'online-list'）

处理断线与自动重连

WebSocket 并不自带重连机制，需手动实现。常见做法是：

• 在 onclose 或 onerror 中设置延时重试（避免频繁请求）
• 限制最大重试次数，防止无限循环
• 每次重连前检查 ws.readyState，避免重复连接（0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED）

注意同源与安全限制

WebSocket 协议不受同源策略限制，但浏览器仍要求页面协议与 WebSocket 协议匹配：

• HTTP 页面只能连接 ws://（开发环境可临时使用，生产不推荐）
• HTTPS 页面必须连接 wss://（加密 WebSocket，等价于 HTTPS 之于 HTTP）
• 若后端 WebSocket 服务部署在不同域名或端口，需确保服务端设置了正确的跨域响应头（如 Sec-WebSocket-Origin 已废弃，现代浏览器主要依赖服务端校验 Origin）

理论要掌握，实操不能落！以上关于《WebSocket实时通信教程详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！