Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 7x 3x 3x 3x 3x 2x 2x 2x 1x 3x 3x 3x 3x 3x 3x 2x 2x 3x 3x 3x 2x 2x 2x 2x | import React, {createContext, useContext, useEffect, useRef} from "react";
export const WebSocketContext = createContext(null);
export function WebSocketProvider({ children }) {
const ws = useRef(null);
const queue = useRef([]);
const listeners = useRef(new Set());
const processMessages = () => {
Iif (queue.current.length === 0) return;
const message = queue.current.shift();
for (let listener of listeners.current) {
listener(message);
}
};
const addListener = (fn) => listeners.current.add(fn);
const removeListener = (fn) => listeners.current.delete(fn);
useEffect(() => {
const proto = window.location.protocol === "https:" ? "wss" : "ws";
ws.current = new WebSocket(`${proto}://${window.location.host}/api/ws`);
ws.current.onmessage = (event) => {
queue.current.push(JSON.parse(event.data));
processMessages();
};
return () => ws.current.close();
}, []);
const send = (object) => ws.current?.send(JSON.stringify(object));
return (
<WebSocketContext.Provider value={{ addListener, removeListener, send }}>
{children}
</WebSocketContext.Provider>
);
}
export function useWebSocket(handleMessage) {
const { addListener, removeListener } = useContext(WebSocketContext);
useEffect(() => {
addListener(handleMessage);
return () => removeListener(handleMessage);
}, [addListener, removeListener, handleMessage]);
}
|