当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现WebSocket实时通信教程

JavaScript实现WebSocket实时通信教程

2026-01-13 22:58:13 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript实现WebSocket实时通信方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

WebSocket需用new WebSocket("wss://...")显式指定协议，连接后须监听open事件再send；收消息用onmessage，二进制需设binaryType；断线重连需清旧实例、指数退避并区分关闭码。

javascript如何实现websocket_如何建立实时通信连接

WebSocket 构造函数怎么用

直接用 new WebSocket() 就能发起连接，但必须传入有效的 wss:// 或 ws:// URL。浏览器不支持协议自动降级，ws:// 在 HTTPS 页面会被拒绝，必须用 wss://。

常见错误：传入相对路径（如 "/ws"）或漏写协议，会报 SecurityError 或 SyntaxError: Invalid URL。

正确写法：const ws = new WebSocket("wss://api.example.com/ws")
不能省略协议，new WebSocket("localhost:8080") 会失败
如果后端只跑 HTTP 开发服务，临时可用 ws://localhost:8080，但上线必须切 wss

连接建立后怎么收发消息

WebSocket 是事件驱动的，靠监听 open、message、error、close 四个核心事件工作。别在 new WebSocket() 后立刻调用 send() —— 连接还没就绪。

典型误操作：没等 open 就发数据，导致 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state。

发消息前务必等 ws.readyState === WebSocket.OPEN，推荐用 ws.onopen 回调保证时机
接收消息统一走 ws.onmessage = (event) => { console.log(event.data) }，event.data 默认是字符串，二进制需设 ws.binaryType = "arraybuffer"
send() 支持字符串、Blob、ArrayBuffer、TypedArray，但不能直接传对象，得先 JSON.stringify()

如何处理断线与重连

WebSocket 没内置重连机制，网络抖动、服务重启、NAT 超时都会触发 close 事件，此时 readyState 变为 CLOSED，且不可复用该实例。

手动重连的关键点：避免无限重试、控制间隔、区分主动关闭和异常断开。

记录 ws.onclose = (e) => { if (e.code !== 1000) triggerReconnect() }，1000 表示正常关闭
重连前清掉旧实例，再 new WebSocket()，别试图复用已关闭的 ws
用指数退避（如 1s → 2s → 4s）限制重连频率，加个最大重试次数防雪崩

let reconnectTimeout = null;
function connect() {
  const ws = new WebSocket("wss://api.example.com/ws");
  ws.onopen = () => { clearTimeout(reconnectTimeout); };
  ws.onclose = (e) => {
    if (e.code !== 1000) {
      reconnectTimeout = setTimeout(connect, Math.min(30000, 1000 * Math.pow(2, retryCount)));
    }
  };
}