首先建立WebSocket连接并监听事件，然后实现自动重连与心跳机制以确保稳定性。
WebSocket 是实现前后端实时通信的核心技术，适合用于聊天系统、实时通知、数据监控等场景。要实现稳定的数据推送与重连机制，关键在于建立可靠的连接管理策略。
建立 WebSocket 连接并监听数据
前端通过 new WebSocket(url) 创建连接，监听 onopen、onmessage、onerror 和 onclose 事件，确保能及时响应状态变化。
示例代码：const socket = new WebSocket('ws://yourdomain.com/socket');
socket.onopen = () => {
console.log('连接已建立');
};
socket.onmessage = (event) => {
console.log('收到消息:', event.data);
};
socket.onerror = (error) => {
console.error('连接错误:', error);
};
socket.onclose = () => {
console.log('连接已关闭');
};
实现自动重连机制
网络不稳定或服务重启可能导致连接中断，需设计重连逻辑。使用定时器控制重连间隔，避免频繁请求，并支持最大重试次数。
可封装一个重连函数，在 onclose 或 onerror 触发时调用：
- 设置标志位防止重复启动重连
- 采用指数退避策略（如每次延迟增加）提升稳定性
- 记录重试次数，超过上限后提示用户或暂停尝试
let reconnectAttempts = 0;
const maxReconnects = 5;
const baseDelay = 1000;
function reconnect() {
if (reconnectAttempts >= maxReconnects) return;
const delay = baseDelay * Math.pow(2, reconnectAttempts);
setTimeout(() => {
createSocket();
reconnectAttempts++;
}, delay);
}
心跳检测维持连接活跃
长时间无数据交互可能被代理或防火墙断开连接。通过心跳包（ping/pong）保持连接活跃。
在连接建立后启动心跳：
- 客户端定时发送 ping 消息
- 服务端收到后返回 pong 响应
- 若连续多次未收到响应，主动关闭并触发重连
let heartCheck = {
timeout: 30000,
timer: null,
reset: function() { clearTimeout(this.timer); return this; },
start: function() {
this.timer = setInterval(() => {
if (socket.readyState === 1) {
socket.send('ping');
}
}, this.timeout);
}
};
// 在 onopen 中调用 heartCheck.reset().start();
基本上就这些。只要处理好连接、断线重连和心跳，就能构建一个稳定的实时推送系统。注意服务端也要配合处理异常连接和资源释放，整体才能健壮运行。
