当前位置：首页 > news >正文

websocket-react使用

news 2025/7/18 2:32:06

问题

在一个应用中，如果需要在不同的组件之间共享同一个WebSocket连接，可以采用多种方法来实现。
比如：单例模式、全局变量、react context

React上下文（React Context）

如果你使用的是React，可以使用React Context来共享WebSocket连接。通过创建一个WebSocket上下文，可以在整个应用中提供和消费这个WebSocket连接。

// WebSocketContext.js
import React, { createContext, useContext, useEffect, useState } from 'react';const WebSocketContext = createContext(null);export const WebSocketProvider = ({ children }) => {const [socket, setSocket] = useState(null);useEffect(() => {const ws = new WebSocket('ws://example.com/socket');setSocket(ws);return () => {ws.close();};}, []);return (<WebSocketContext.Provider value={socket}>{children}</WebSocketContext.Provider>);
};export const useWebSocket = () => {return useContext(WebSocketContext);
};// Component1.js
import React from 'react';
import { useWebSocket } from './WebSocketContext';const Component1 = () => {const socket = useWebSocket();useEffect(() => {if (socket) {socket.addEventListener('message', handleMessage);}return () => {if (socket) {socket.removeEventListener('message', handleMessage);}};}, [socket]);const handleMessage = (event) => {console.log('Message in Component 1:', event.data);};return <div>Component 1</div>;
};export default Component1;// Component2.js
import React from 'react';
import { useWebSocket } from './WebSocketContext';const Component2 = () => {const socket = useWebSocket();useEffect(() => {if (socket) {socket.addEventListener('message', handleMessage);}return () => {if (socket) {socket.removeEventListener('message', handleMessage);}};}, [socket]);const handleMessage = (event) => {console.log('Message in Component 2:', event.data);};return <div>Component 2</div>;
};export default Component2;// App.js
import React from 'react';
import { WebSocketProvider } from './WebSocketContext';
import Component1 from './Component1';
import Component2 from './Component2';const App = () => {return (<WebSocketProvider><Component1 /><Component2 /></WebSocketProvider>);
};export default App;

实例

WebSocketContext.ts

// contexts/WebSocketContext.tsimport React from 'react';
import WebSocketService from '../services/WebSocketService';// 此处允许值为 null
const WebSocketContext = React.createContext<WebSocketService | null>(null);export default WebSocketContext;

WebSocketService.ts

import { GetServerVersionResponse } from '@renderer/ipc/renderer_to_main_ipc_invoker/proxy/fpp'type CallbackFunction = (message: any) => void;
type InvokeDevIpFilesResponse = {path: stringfolder: boolean}class WebSocketService {public static instance: WebSocketService;public ws: WebSocket;public listeners: Record<string, CallbackFunction[]>;public constructor(url: string) {this.ws = new WebSocket(url);this.listeners = {};// 设置WebSocket事件监听器  this.ws.onmessage = this.handleMessage.bind(this);this.ws.onopen = this.handleOpen.bind(this);this.ws.onerror = this.handleError.bind(this);this.ws.onclose = this.handleClose.bind(this);}public static getInstance(url?: string): WebSocketService {if (!WebSocketService.instance) {if (!url) {throw new Error("WebSocketService instance has not been created yet. Please provide a URL.");}WebSocketService.instance = new WebSocketService(url);}return WebSocketService.instance;}public sendCommand(command: object): void {if (this.ws.readyState === WebSocket.OPEN) {this.ws.send(JSON.stringify(command));} else {console.error('WebSocket is not open.');}}public subscribe(command: string, callback: CallbackFunction): void {if (!this.listeners[command]) {this.listeners[command] = [];}this.listeners[command].push(callback);}public unsubscribe(command: string, callback: CallbackFunction): void {if (this.listeners[command]) {const index = this.listeners[command].indexOf(callback);if (index !== -1) {this.listeners[command].splice(index, 1);}}}//接收消息并处理private handleMessage(event: MessageEvent): void {const message = JSON.parse(event.data);console.log(message)if ( message.version ) {this.triggerCallbacks('version', message);} else if(Array.isArray(message)){const bagsList = message.filter(item => item.path && item.path.endsWith('.bag')) .map(item => item.path); if(bagsList){this.triggerCallbacks('bags', message);}}// 其他消息类型 在这里添加类似的处理逻辑}private triggerCallbacks(eventType: string, message: any): void {if (this.listeners[eventType]) {this.listeners[eventType].forEach((callback) => {callback(message);});}}private handleOpen(): void {console.log('WebSocket connected.');}private handleError(error: Event): void {console.error('❓ WebSocket error:', error);}private handleClose(): void {console.log('❌ WebSocket disconnected.');}public close(): void {this.ws.close();}public getGuiVersion(): Promise<string> {return new Promise((resolve, reject) => {const handleVersionMessage = (message: any) => {if (message.version) {resolve(message.version);this.unsubscribe('version', handleVersionMessage);}};this.subscribe('version', handleVersionMessage);this.sendCommand({ command: 'version' });setTimeout(() => {reject(new Error('Timeout waiting for GUI version.'));this.unsubscribe('version', handleVersionMessage);}, 5000);});}public getBagsList(): Promise<InvokeDevIpFilesResponse[]> {return new Promise((resolve, reject) => {const handleBagsMessage = (message: any) => {console.log(message)resolve(message);this.unsubscribe('bags', handleBagsMessage);};this.subscribe('bags', handleBagsMessage);const command = {command: 'bags',pattern: '*'};this.sendCommand(command);setTimeout(() => {reject(new Error('Timeout waiting for bags list.'));this.unsubscribe('bags', handleBagsMessage);}, 5000);});}public getMvizLink(): Promise<GetServerVersionResponse> {return new Promise((resolve, reject) => {const handleBagsMessage = (message: any) => {console.log(message)resolve(message);this.unsubscribe('bags', handleBagsMessage);};this.subscribe('bags', handleBagsMessage);const command = {command: 'bags',pattern: '*'};this.sendCommand(command);setTimeout(() => {reject(new Error('Timeout waiting for bags list.'));this.unsubscribe('bags', handleBagsMessage);}, 5000);});}}export default WebSocketService;

App.js

// App.js 或其他顶层组件import React from 'react';
import WebSocketContext from './contexts/WebSocketContext';
import WebSocketService from './services/WebSocketService';function App() {// 创建 WebSocketService 实例, 可以在这里传递你需要连接的WebSocket服务器的URLconst webSocketInstance = WebSocketService.getInstance('ws://your-websocket-url');return (// 使用 WebSocketContext.Provider 包裹你的组件并传递 value<WebSocketContext.Provider value={webSocketInstance}>{/* 这里是其他组件 */}</WebSocketContext.Provider>);
}export default App;

// SomeComponent.jsx

// SomeComponent.jsximport React, { useContext } from 'react';
import WebSocketContext from './contexts/WebSocketContext';function SomeComponent() {// 使用 useContext 钩子获取 WebSocketService 实例const webSocket = useContext(WebSocketContext);// 接下来可以使用 webSocket 发送消息或订阅事件// ...return (// 组件的其余部分);
}export default SomeComponent;