websocket消息的实现

1. 创建 WebSocket 连接

WebSocket 是通过 WebSocket 对象建立的。连接成功后，前端可以与服务器双向通信。

const socket = new WebSocket('ws://your-server-url');

// 监听连接建立
socket.onopen = () => {
    console.log('WebSocket connection established');
    // 可以在连接建立后发送一条消息
    socket.send(JSON.stringify({ type: 'INIT', payload: 'Hello Server!' }));
};

// 监听错误
socket.onerror = (error) => {
    console.error('WebSocket error:', error);
};

// 监听连接关闭
socket.onclose = (event) => {
    console.log('WebSocket connection closed:', event);
};

2. 接收服务器消息

通过监听 onmessage 事件来处理服务器推送的消息。

socket.onmessage = (event) => {
    try {
        const message = JSON.parse(event.data); // 假设服务器发来的是 JSON 格式的数据
        console.log('Received message from server:', message);

        // 根据消息类型做不同处理
        switch (message.type) {
            case 'UPDATE':
                // 更新前端状态
                console.log('Update:', message.payload);
                break;
            case 'ALERT':
                // 展示提示信息
                alert(message.payload);
                break;
            default:
                console.warn('Unknown message type:', message.type);
        }
    } catch (err) {
        console.error('Error parsing message:', err);
    }
};

3. 发送消息到服务器

可以通过 socket.send 方法发送数据到服务器。

// 发送简单消息
socket.send('Hello Server');

// 发送 JSON 数据
socket.send(JSON.stringify({ type: 'PING', timestamp: Date.now() }));

4. 处理重连逻辑

为了提高 WebSocket 的可靠性，需要处理连接断开后的重连。

function createWebSocket(url: string) {
    let ws: WebSocket | null = null;

    function connect() {
        ws = new WebSocket(url);

        ws.onopen = () => console.log('Connected');
        ws.onmessage = (event) => console.log('Message received:', event.data);
        ws.onclose = (event) => {
            console.log('Disconnected:', event.reason);
            // 自动重连
            setTimeout(connect, 3000);
        };
        ws.onerror = (error) => {
            console.error('WebSocket error:', error);
        };
    }

    connect();
    return ws;
}

const socket = createWebSocket('ws://your-server-url');

5. 前端框架集成

React 中使用 WebSocket

使用 useEffect 创建和清理 WebSocket。

import React, { useEffect, useState } from 'react';

const WebSocketDemo: React.FC = () => {
    const [messages, setMessages] = useState<string[]>([]);

    useEffect(() => {
        const socket = new WebSocket('ws://your-server-url');

        socket.onopen = () => console.log('Connected');
        socket.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);
        };
        socket.onclose = () => console.log('Disconnected');
        socket.onerror = (error) => console.error('Error:', error);

        // 清理连接
        return () => {
            socket.close();
        };
    }, []);

    return (
        <div>
            <h1>WebSocket Messages</h1>
            <ul>
                {messages.map((msg, index) => (
                    <li key={index}>{msg}</li>
                ))}
            </ul>
        </div>
    );
};

export default WebSocketDemo;

6. 优化与注意事项

1. 心跳检测： 定期发送心跳包检测连接状态。

   ​setInterval(() => {    if (socket.readyState === WebSocket.OPEN) {        socket.send(JSON.stringify({ type: 'PING' }));    }}, 10000);​

2. 断开重连： 确保在连接断开时自动尝试重新连接。

3. 防止消息阻塞： 使用队列存储待发送消息，确保连接恢复时不会丢失重要信息。

4. 消息格式： 推荐使用 JSON 格式，明确消息类型和数据。