第 17 卷

第 17 / 21 卷日期：2026-01-02

Code block

1// 发送文本数据（JSON格式，最常用）

2ws.send(JSON.stringify({ type: "chat", data: { content: "Hello WebSocket" } }));

3 4// 发送纯文本

5ws.send("Hello WebSocket");

7	//发送二进制数据（如Blob对象、ArrayBuffer）
8	const blob = new Blob(["二进制数据"], { type: "application/octet-stream" });
9	ws.send(blob);

注意：发送数据前需确保连接已建立（ ws.readyState === 1），否则会抛出错误。

readyState 状态值说明：0（CONNECTING，连接中）、1（OPEN，连接成功）、2 （CLOSING，关闭中）、3（CLOSED，已关闭）。

步骤4：主动关闭WebSocket连接

通过 ws.close(code, reason) 方法主动关闭连接，可选指定关闭代码和原因：

Code block

1// 主动关闭连接（code为关闭状态码，reason为关闭原因）

2ws.close(1000, "客户端主动关闭连接");

常用关闭状态码：1000（正常关闭）、1001（客户端离开，如页面关闭）、1002（协议错误）、 1003（不支持的数据格式）。

二、进阶优化：实现自动重连机制

网络波动、服务端重启等情况可能导致连接异常关闭，前端需实现自动重连机制保障可用性，核心逻辑是“关闭后延迟重试，重试次数限制，避免无限重试”：

Code block

1let ws;

2let reconnectTimer = null; // 重连定时器

8function initWebSocket() {

9	ws = new WebSocket("wss://example.com/ws");
10	//绑定事件（open、message、error、close）...（同步骤2）
11	}

12 13// 重连函数

14function reconnect() { 15// 清除之前的重连定时器

16	if (reconnectTimer) clearTimeout(reconnectTimer);
17	//超过最大重连次数，停止重试
18	if (reconnectCount >= MAX_RECONNECT_COUNT) {
19	console.log("已达到最大重连次数，停止重连");
20	reconnectCount = 0;
21	return;
22	}
23	//延迟重连，避免频繁重试
24	reconnectTimer = setTimeout(() => {
25	reconnectCount++;
26	console.log(`第${reconnectCount}次重连...`);
27	initWebSocket();
28	}, RECONNECT_DELAY);
29	}

30 31// 页面卸载时主动关闭连接，避免资源泄漏

32	window.addEventListener("beforeunload", () => {
33	if (ws && ws.readyState === 1) {
34	ws.close(1000, "页面卸载，主动关闭连接");
35	}
36	if (reconnectTimer) clearTimeout(reconnectTimer);
37	});

38 39// 初始化连接

40initWebSocket();

三、注意事项（生产环境必备）

优先使用 wss:// 加密协议：避免数据传输过程中被窃听或篡改， ws:// 明文协议可能被部分浏

览器或网络环境拦截；

处理跨域问题：服务端需验证 Origin 请求头，仅允许信任的客户端域名连接，避免恶意跨域连

数据序列化规范：前后端约定统一的数据格式（如JSON）和字段（如 type 用于区分消息类

型），避免解析错误；

资源清理：页面卸载、组件销毁时，主动关闭WebSocket连接并清除定时器，避免内存泄漏和无效

连接占用资源。

✅ 核心总结

前端实现WebSocket连接的核心是“利用原生 WebSocket API+事件驱动模型”，通过创建连接、监听核心事件、发送数据、关闭连接完成基础通信；生产环境需补充自动重连、心跳机制、加密传输

等优化措施，确保连接稳定性和数据安全性。其典型应用场景包括实时聊天、实时通知、在线协作等。

WebSocket连接如何处理心跳和断线重连?

WebSocket建立的持久连接可能因网络波动、防火墙超时、服务端重启等原因出现“僵死连接”（连接存在但无法通信）或意外断线。为保障连接稳定性，需通过心跳机制主动检测连接状态，通过断线

重连机制恢复连接，两者通常配合使用，具体实现方案如下：

一、心跳机制：主动检测连接有效性

心跳机制的核心逻辑是“客户端与服务端周期性互发小型数据包”，若一方长时间未收到对方心跳响应，则判定连接异常，主动关闭连接并触发重连。核心目标是避免僵死连接占用资源，确保连接状态

可感知。

实现核心要素

• 心跳包格式：通常为轻量数据（如空消息、固定标识字符串“ping”/“pong”），避免占用过多

带宽；

• 心跳周期：需小于网络设备（如防火墙）的连接超时时间（通常防火墙默认超时30秒-5分钟），推

荐设置为30秒-60秒；

超时阈值：设定“未收到心跳响应的最大时间”（如2倍心跳周期），超过则判定连接失效。

完整实现流程（客户端主导，服务端配合）
连接成功后启动心跳计时器：客户端在WebSocket的 open 事件触发后，启动周期性定时器，定

时发送心跳包；

全站分卷索引 · 21 卷