WebSocket 的使用

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

Node.js 事件模块Events
Nodejs中不存在浏览器中冒泡，捕获这些行为，Nodejs中实现了events这个模块，Nodejs中大多数模块都集成了这个模块，所以events是Nodejs中最重要的一个模块。

socket.ts

import { EventEmitter } from "events";
import { useRef } from "react";

const ip = "127.0.0.1"
const SocketHost = `ws:${ip}:8888`;

const getFormatData = (data: any) => {
    try {
        return JSON.parse(data);
    } catch (e) {
        return {};
    }
};

export const useSocket = (url?: string) => {
    const socket = useRef < WebSocket > ();
    //自定义一个对象继承于EventEmitter
    const emitter = useRef < EventEmitter > (new EventEmitter());
    const start = () => {
        if (socket.current) return socket.current;
        // 使用 WebSocket() 构造函数来构造一个 WebSocket 。
        const ws = (socket.current = new WebSocket(
            SocketHost + (url || "/phm/socket/xxx")
        ));
        // event 事件对象上的方法
        const _emitter = emitter.current;
        ws.onopen = () => {
            if (ws.readyState === 1) {
                _emitter.emit("connect");
            }
        };
        // 收到服务器数据后触发的回调函数
        ws.onmessage = (e) => {
            const data = getFormatData(e.data);
            // 触发 message 事件
            _emitter.emit("message", data);
        };
        ws.onclose = () => {
            _emitter.emit("close");
        };
        ws.onerror = (err) => {
            _emitter.emit("onerror");
        };
        return ws;
    };

    return {
        start,
        stop() {
            socket.current && socket.current.close();
        },
        on(name: string, callback: (...args: any[]) => void) {
            // 绑定事件
            emitter.current?.on(name, callback);
            return () => {
                emitter.current?.off(name, callback);
            };
        },
    };
};

index.ts

import { useSocket } from './socket.ts';
const HomePage: React.FC = (props) => {
    const [homeData, setHomedata] = useState({});
    const [extendLogData, setExtendLogData] = useState({});

    const { start, stop, on } = useSocket('/socket/eva-xxx');
    const { start: logStart, stop: logStop, on: logOn } = useSocket('/socket/homepage_xxx')

    useEffect(() => {
        // 绑定 message 事件
        on('message', (data) => {
            setHomedata(data);
        });
        logOn('message', (data) => {
            setExtendLogData(data);
        });

        // 开始连接
        start();
        logStart();

        // 组件销毁时，关闭连接
        return () => {
            stop();
            logStop();
        }
    }, []);
}