Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.8 kB · 61 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162import { useRef } from "react";import useWebSocket from "react-use-websocket";import { useHandleWebsocketMessages } from "../livestream-store/use-store";import { useUrl } from "../streamplace-store";
export function useLivestreamWebsocket(src: string) { const url = useUrl(); const handleWebSocketMessages = useHandleWebsocketMessages();
let wsUrl = url.replace(/^http\:/, "ws:"); wsUrl = wsUrl.replace(/^https\:/, "wss:");
const ref = useRef<any[]>([]); const handle = useRef<NodeJS.Timeout | null>(null); const hasReceivedMessage = useRef(false); const hasErrored = useRef(false);
const { readyState } = useWebSocket(`${wsUrl}/api/websocket/${src}`, { reconnectInterval: 1000, shouldReconnect: () => !hasErrored.current,
onOpen: () => { ref.current = []; hasReceivedMessage.current = false; },
onError: (e) => { console.log("onError", e); if (!hasReceivedMessage.current) { hasErrored.current = true; handleWebSocketMessages([ { $type: "place.stream.error", code: "user_not_found", message: "this stream doesn't exist or is unavailable", }, ]); } },
// spamming the redux store with messages causes a zillion re-renders, // so we batch them up a bit onMessage: (msg) => { try { const data = JSON.parse(msg.data); hasReceivedMessage.current = true; ref.current.push(data); if (handle.current) { return; } handle.current = setTimeout(() => { handleWebSocketMessages(ref.current); ref.current = []; handle.current = null; }, 250); } catch (e) { console.log("onMessage parse error", e); } }, });}