HTML5WebSocket怎么建立_WebSocket实时通信实现教程

WebSocket

WebSocket

// 假设你的WebSocket服务器运行在 localhost:8080
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = (event) => {
    console.log('WebSocket 连接已建立！', event);
    ws.send('Hello from client!'); // 连接建立后可以发送数据
};

ws.onmessage = (event) => {
    console.log('收到服务器消息:', event.data);
};

ws.onerror = (event) => {
    console.error('WebSocket 错误:', event);
};

ws.onclose = (event) => {
    console.log('WebSocket 连接已关闭:', event.code, event.reason);
    // 可以在这里尝试重连
};

// 客户端主动关闭连接
// ws.close();

ws

// server.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('有新的客户端连接了！');

    ws.on('message', (message) => {
        console.log(`收到客户端消息: ${message}`);
        // 将收到的消息广播给所有连接的客户端
        wss.clients.forEach((client) => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(`有人说: ${message}`);
            }
        });
        // 或者直接回复给发送者
        ws.send(`服务器已收到你的消息: ${message}`);
    });

    ws.on('close', () => {
        console.log('客户端已断开连接。');
    });

    ws.on('error', (error) => {
        console.error('WebSocket 错误:', error);
    });

    ws.send('Hello from server!'); // 连接建立后服务器也可以主动发送数据
});

console.log('WebSocket 服务器已启动，监听端口 8080。');

server.js

node server.js

onclose

// 客户端重连示例伪代码
let reconnectAttempts = 0;
const maxReconnectAttempts = 10;
const reconnectInterval = 1000; // 初始重连间隔1秒

function connectWebSocket() {
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = () => {
        console.log('WebSocket 连接已建立！');
        reconnectAttempts = 0; // 成功连接后重置尝试次数
    };

    ws.onclose = () => {
        console.log('WebSocket 连接已关闭，尝试重连...');
        if (reconnectAttempts < maxReconnectAttempts) {
            reconnectAttempts++;
            const delay = reconnectInterval * Math.pow(2, reconnectAttempts - 1); // 指数退避
            setTimeout(connectWebSocket, Math.min(delay, 30000)); // 最大延迟30秒
        } else {
            console.error('达到最大重连次数，放弃重连。');
        }
    };
    // ... 其他事件处理
    return ws;
}

let currentWs = connectWebSocket();

ping

pong

pong

ping

let heartbeatInterval;
const pingInterval = 30000; // 每30秒发送一次ping

ws.onopen = () => {
    // ...
    heartbeatInterval = setInterval(() => {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({ type: 'ping' })); // 发送一个自定义的ping消息
            // 也可以使用WebSocket API原生的ping帧，但通常需要服务器端配合处理
        }
    }, pingInterval);
};

ws.onclose = () => {
    clearInterval(heartbeatInterval); // 关闭连接时清除心跳
    // ... 尝试重连
};

// 客户端收到服务器的pong回复时，可以重置一个timeout，确保连接活跃
let serverTimeout;
const serverTimeoutDuration = pingInterval * 2; // 比如ping间隔的两倍
ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'pong') {
        clearTimeout(serverTimeout);
        serverTimeout = setTimeout(() => {
            console.warn('长时间未收到服务器心跳，连接可能已断开。');
            ws.close(); // 主动关闭，触发重连
        }, serverTimeoutDuration);
    }
    // ... 处理其他消息
};

ping

pong

type

payload

// 客户端发送消息
{
    "type": "chatMessage",
    "payload": {
        "sender": "Alice",
        "message": "Hello, everyone!"
    }
}

// 服务器发送通知
{
    "type": "userJoined",
    "payload": {
        "username": "Bob",
        "timestamp": 1678886400
    }
}