西安汇友网站建设,网络推广平台cpa,策划营销有限公司,wordpress设置用户访问个数据库问题
在一个应用中#xff0c;如果需要在不同的组件之间共享同一个WebSocket连接#xff0c;可以采用多种方法来实现。 比如#xff1a;单例模式、全局变量、react context
React上下文#xff08;React Context#xff09;
如果你使用的是React#xff0c;可以使用Re…问题
在一个应用中如果需要在不同的组件之间共享同一个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 divComponent 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 divComponent 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 (WebSocketProviderComponent1 /Component2 //WebSocketProvider);
};export default App;
实例
WebSocketContext.ts
// contexts/WebSocketContext.tsimport React from react;
import WebSocketService from ../services/WebSocketService;// 此处允许值为 null
const WebSocketContext React.createContextWebSocketService | null(null);export default WebSocketContext;
WebSocketService.ts
import { GetServerVersionResponse } from renderer/ipc/renderer_to_main_ipc_invoker/proxy/fpptype CallbackFunction (message: any) void;
type InvokeDevIpFilesResponse {path: stringfolder: boolean}class WebSocketService {public static instance: WebSocketService;public ws: WebSocket;public listeners: Recordstring, 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(): Promisestring {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(): PromiseInvokeDevIpFilesResponse[] {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(): PromiseGetServerVersionResponse {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 包裹你的组件并传递 valueWebSocketContext.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;(占个坑后续更新一下)
