WebSocket是什么？JS如何实现实时连接

大家好，我们又见面了啊~本文《WebSocket是什么？JavaScript如何实现实时连接》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

WebSocket 是独立于 HTTP 的 TCP 上层协议，需服务端支持、正确握手及生命周期管理；构造函数仅需 ws:// 或 wss:// 开头的 URL，readyState 异步变化，须监听 open 事件后发送消息，代理需配置 Upgrade 和 Connection 头。

WebSocket 是浏览器与服务器之间建立全双工、持久化通信通道的协议，不是 HTTP 的替代品，而是一种独立的 TCP 上层协议；JavaScript 中用 WebSocket 构造函数就能发起连接，但成败关键不在“怎么写”，而在服务端是否真正支持、握手是否通过、以及连接生命周期是否被正确管理。

WebSocket 构造函数怎么用？参数和状态要注意什么？

只传一个 url 字符串即可初始化，但必须是 ws:// 或 wss:// 开头（不能用 http://）。连接建立是异步的，readyState 会经历 0（CONNECTING）、1（OPEN）、2（CLOSING）、3（CLOSED）四个值，绝不能在 new WebSocket(...) 后立刻发消息。

• url 必须和服务端实际暴露的 WebSocket 端点完全一致，包括路径（如 ws://localhost:3000/ws），多一个斜杠或少一个都可能 404
• 构造后立即检查 ws.readyState === WebSocket.OPEN 一定是 false，应监听 open 事件再发送数据
• 某些代理（如 Nginx）默认不转发 WebSocket 升级头，会导致连接卡在 CONNECTING 状态，需显式配置 Upgrade 和 Connection 头

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

ws.onopen = () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'auth', token: 'abc123' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = (event) => {
  console.log('Disconnected', event.code, event.reason);
};

为什么 onmessage 收不到数据？常见断连原因有哪些？

收不到消息不等于没发出去，更可能是服务端没响应、心跳没维持、或连接已被静默关闭。浏览器不会主动重连，onclose 触发后连接对象就不可用，再次调用 send() 会抛出 InvalidStateError。

• 服务端未实现 PING/PONG 心跳，中间网络设备（如 NAT、防火墙）可能在 60 秒无流量后主动断开 TCP 连接
• 发送了非字符串或非 ArrayBuffer 类型的数据（如直接传 Object），send() 会静默失败，控制台无提示
• 多个标签页共用同一 WebSocket 实例（比如挂载在 window.ws），一个页面刷新或关闭会导致其他页面的 ws 对象进入 CLOSED 状态
• Chrome 开发者工具的 Network 面板里看不到 WebSocket 的帧内容，需在 Console 中用 ws.addEventListener('message', ...) 手动监听才能调试

如何安全地重连？避免无限循环或资源泄漏？

自动重连必须带退避策略和最大重试次数，否则网络恢复瞬间可能触发大量并发连接请求，压垮服务端或触发限流。每次新建 WebSocket 实例前，务必清除旧实例的事件监听器，并检查其 readyState 是否已为 CLOSED。

• 用 setTimeout 实现指数退避（如 1s → 2s → 4s → 8s），超过 5 次失败后暂停重连并提示用户
• 在 onclose 回调里设置标志位（如 isManuallyClosed = false），区分是用户主动关闭还是异常断开
• 避免在 onerror 里直接重连——它可能在 onopen 前就触发（例如 DNS 解析失败），此时重连毫无意义
• 使用 AbortController 无法中断 WebSocket 连接，它只对 fetch 有效；真正的清理只能靠 ws.close() + 置空引用

真实项目里最难的从来不是“怎么连上”，而是“怎么知道它什么时候断了、为什么断、该不该重连、重连时要不要清缓存、用户离线期间的消息怎么补”。这些逻辑没法靠一个 new WebSocket() 解决，得结合业务状态、心跳响应、服务端 ACK 机制一起设计。

今天关于《WebSocket是什么？JS如何实现实时连接》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！