什么是WebSocket_JavaScript中如何建立实时连接

顺亿

2026-10-07 • 👁 0人浏览过

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

。 Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载立即学习 “ Java免费学习笔记（深入） ”；用

setTimeout

实现指数退避（如 1s → 2s → 4s → 8s），超过 5 次失败后暂停重连并提示用户在

onclose

回调里设置标志位（如

isManuallyClosed = false

），区分是用户主动关闭还是异常断开避免在

onerror

里直接重连——它可能在

onopen

前就触发（例如 DNS 解析失败），此时重连毫无意义使用

AbortController

无法中断 WebSocket 连接，它只对

fetch

有效；真正的清理只能靠

ws.close()

+ 置空引用真实项目里最难的从来不是“怎么连上”，而是“怎么知道它什么时候断了、为什么断、该不该重连、重连时要不要清缓存、用户离线期间的消息怎么补”。这些逻辑没法靠一个

new WebSocket()

解决，得结合业务状态、心跳响应、服务端 ACK 机制一起设计。

相关文章