websocket 封装示例

import { useEffect, useRef } from "react";interface WebSocketService {send: (message: string) => void;addMessageListener: (listener: (message: string) => void) => void;
}const useWebSocket = (url: string): WebSocketService => {const socketRef = useRef<WebSocket | null>(null);const messageListeners = useRef<((message: string) => void)[]>([]);useEffect(() => {const newSocket = new WebSocket(url);socketRef.current = newSocket;newSocket.addEventListener("open", () => {console.log("%c 【 Websocket 已建立连接! 】........  ", "color: green");newSocket.send("web 已连接!");});newSocket.addEventListener("message", (event) => {messageListeners.current.forEach((listener) => listener(event.data));});newSocket.addEventListener("close", () => {console.log("WebSocket连接已关闭");});return () => {newSocket.close();};}, [url]);const send = (message: string) => {if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {socketRef.current.send(message);}};const addMessageListener = (listener: (message: string) => void) => {messageListeners.current.push(listener);};return { send, addMessageListener };
};export default useWebSocket;

调用示例

import useWebSocket from "@/components/Websocket/websocket";const { send, addMessageListener } = useWebSocket("ws://localhost:3000");useEffect(() => {send(['首页已连接','/api/homePage/Interface']);// 添加消息监听器addMessageListener((message) => {console.log("收到消息：", message);if (message === "/api/Interface/userInfo") {setDataSource([{key: "1",name: nanoid(),age: nanoid(),address: nanoid(),},{key: "2",name: nanoid(),age: nanoid(),address: nanoid(),},]);}});return () => {console.log("组件卸载，WebSocket 连接已关闭");};}, []);

此处消息监听可根据后端返来的具体字段数据做判定，重新调用接口更新页面数据 || 实现其它功能。

也可链接本地 node 做测试

代码如下：

const WebSocket = require('ws');
const http = require('http');const server = http.createServer((req, res) => {res.writeHead(200, { 'Content-Type': 'text/plain' });res.end('WebSocket Server\n');
});const wss = new WebSocket.Server({ server });wss.on('connection', (ws) => {console.log('connect OK!');ws.on('message', (message) => {console.log('收到消息：', message);// 向客户端发送消息setInterval(() => {ws.send('/api/Interface/userInfo');}, 1000);});// 连接关闭时的回调ws.on('close', () => {console.log('客户端已断开连接');});
});server.listen(3000, () => {console.log('WebSocket 服务器已启动在 http://localhost:3000');
});

打开终端运行  cnpm install xs ,  cnpm install nodemon

然后使用 nodemon xxx  ( 你 nodejs 代码的文件 ) 我此处是叫：websocket.js

那么我开启就需要使用 nodemon websocket.js 即可打开 node 进行链接。

时小记，终有成。