jitsi-roomsv2/frontend/src/hooks/useWebSocketConnection.ts

import { useCallback, useState } from "react";
import { WEBSOCKET_URL } from "../background/constants";
import { UserInfo } from "../components/jitsi/types";

const createWebSocketConnection = (userInfo: UserInfo) => {
  const webSocket = new WebSocket(WEBSOCKET_URL);
  console.log("[Rooms] createWebSocketConnection");
  webSocket.addEventListener("open", (_: Event) =>
    webSocket.send(JSON.stringify(userInfo))
  );

  return webSocket;
};

function useWebSocketConnection(userInfo: UserInfo) {
  console.log("[Rooms] useWebSocketConnection");

  const [webSocketConnection] = useState<WebSocket>(() =>
    createWebSocketConnection(userInfo)
  );

  const sendMessage = useCallback(
    (message: string) => {
      //if the socket's open, send a message:
      if (webSocketConnection.readyState === WebSocket.OPEN) {
        console.log("[Rooms] sending to ws", message);
        webSocketConnection.send(message);
      }
    },
    [webSocketConnection]
  );

  const onMessage = useCallback(
    (messageHandler: (messageHandler: string) => void) => {
      const wsMessageHandler = (ev: MessageEvent<any>) => {
        messageHandler(ev.data);
      };
      webSocketConnection.addEventListener("message", wsMessageHandler);
    },
    [webSocketConnection]
  );

  const disconnect = useCallback(webSocketConnection.close, [
    webSocketConnection,
  ]);

  return { onMessage, sendMessage, disconnect };
}

export default useWebSocketConnection;