export default function useWebsocketRequest()

in src/hooks/useWebsocketRequest/index.tsx [26:87]


export default function useWebsocketRequest<T>({
  url,
  queryParams = {},
  enabled = true,
  onConnecting,
  onOpen,
  onUpdate,
  onClose,
  onError,
}: HookConfig<T>): void {
  const qs = new URLSearchParams(queryParams).toString();

  useEffect(() => {
    let conn: ReconnectingWebSocket;

    const _onOpen = (e: OpenEvent) => {
      onOpen && onOpen(e);
    };
    const _onClose = (e: CloseEvent) => {
      onClose && onClose(e);
    };
    const _onMessage = (e: MessageEvent) => {
      if (e.data) {
        try {
          const event = JSON.parse(e.data) as Event<T>;
          onUpdate(event.event);
        } catch (e) {
          console.error(e);
        }
      }
    };
    const _onError = (e: ErrorEvent) => {
      console.error('Websocket connection error', e);
      onError && onError(e);
    };

    if (enabled) {
      const q = new URLSearchParams(queryParams).toString();
      const target = `${url}${q ? '?' + q : ''}`;

      onConnecting && onConnecting();

      conn = new ReconnectingWebSocket(apiWs(target), [], { maxRetries: 0 });

      conn.addEventListener('open', _onOpen);
      conn.addEventListener('close', _onClose);
      conn.addEventListener('message', _onMessage);
      conn.addEventListener('error', _onError);
    }

    return () => {
      if (conn) {
        conn.removeEventListener('open', _onOpen);
        conn.removeEventListener('close', _onClose);
        conn.removeEventListener('message', _onMessage);
        conn.removeEventListener('error', _onError);

        conn.close();
      }
    };
  }, [url, qs, enabled, onClose, onError, onOpen, onUpdate, onConnecting, queryParams]);
}