前端代码
let ws;
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
let reconnectTimer = null;
// 初始化连接
function connect() {
ws = new WebSocket('ws://localhost:3001');
ws.onopen = () => {
console.log('✅ 连接成功');
reconnectAttempts = 0; // 重置重连计数器
document.body.style.backgroundColor = '#cfc';
};
ws.onmessage = (event) => {
document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
};
ws.onerror = (error) => {
console.error('💥 连接错误:', error);
document.body.style.backgroundColor = '#fcc';
};
ws.onclose = (event) => {
console.log('🔌 连接关闭');
if (reconnectAttempts < maxReconnectAttempts) {
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
console.log(`⏳ ${delay/1000}秒后尝试重连...`);
reconnectTimer = setTimeout(connect, delay);
reconnectAttempts++;
}
};
}
// 手动重连
function manualReconnect() {
if (reconnectTimer) clearTimeout(reconnectTimer);
reconnectAttempts = 0;
connect();
}
// 首次连接
connect();
node模拟处理
// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3001 });
wss.on('connection', (ws) => {
console.log('✅ 客户端已连接');
// 定时推送消息
const interval = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(`服务端消息 ${new Date().toISOString()}`);
}
}, 2000);
// 断开处理
ws.on('close', () => {
console.log('❌ 客户端断开'+new Date().toISOString());
clearInterval(interval);
});
});
console.log('🚀 服务端运行在: ws://localhost:3001');