一、Web Work定義
useEffect(() => {let webSocketIndex = -1const websocketWorker = new Worker(new URL('./websocketWorker.worker.ts?worker', import.meta.url),{type: 'module' // 必須聲明模塊類型});//初始化WEBSOCKET（多個服務器選擇最快建立連接的一個）const urls = (import.meta.env.VITE_WEB_SOCKET).split(',');for(const url of urls) {this.works.websocketWorker.postMessage({type: "INIT_WEBSOCKET", payload: {url: url}});}websocketWorker.onmessage = (e) => {//接收子線程消息//接收連接打開消息if(e.data.type === "OPEN") {//這里通過變量改變只使用一次opne選擇最快反饋的服務器if(webSocketIndex === -1) {webSocketIndex = e.data.index;websocketWorker.postMessage({type: "SELECT_SOCKET", payload:e.data.index});}}};return () => {if(websocketWorker ) {websocketWorker.postMessage({ type: "CLOSE_WEBSOCKET" });const str = setTimeout(() => {websocketWorker .terminate()clearTimeout(str);}, 500);}};}, []);
二、子線程中WebSocket 的啟動使用
let socket: WebSocket | null = null;
let sockets: WebSocket[] = [];
let pingTimer: NodeJS.Timeout | null = null;self.onmessage = (e) => {const message = e.data as MessageData;//webSocket 子進程switch(message.type) {//初始化webSocketcase "INIT_WEBSOCKET":const ws = new WebSocket(message.payload.url);sockets.push(ws);ws.onopen = () => self.postMessage({ type: 'OPEN', index: sockets.indexOf(ws) });return "";case "SELECT_SOCKET":socket = sockets[message.payload];// 發送Ping幀（心跳檢測）pingTimer = setInterval(() => {(socket as WebSocket).send(new Uint8Array([0x89, 0x00])); }, PING_TIME);//消息隊列先進先出const queue = new WebSocketQueue(socket);queue.listen((msg) => {console.log('SOCKET:', msg.timestamp, msg.data);});//其他socket連接關閉節省資源const otherSocket = sockets.filter((_, index) => index !== message.payload);for(const other of otherSocket) {other.close();}return ""; case "CLOSE_WEBSOCKET":if(socket) (socket as WebSocket).close();if(pingTimer) clearInterval(pingTimer);return ""; default:return ""; }};
三、補充（WebSocket 消息隊列實現）
/*** WebSocket消息隊列，先進先出*/
export class WebSocketQueue {private queue: {data: any, timestamp: number}[] = [];private messageHandler?: (msg: {data: any, timestamp: number}) => void;constructor(socket: WebSocket) {socket.onmessage = (ev) => {this.queue.push({data: ev.data, timestamp: Date.now()});this.messageHandler?.(this.queue.shift()!); // FIFO處理};}// 注冊消息處理器public listen(handler: (msg: {data: any, timestamp: number}) => void) {this.messageHandler = handler;}
}
