Function SocketProvider

frontend/src/context/SocketContext.jsx:49–118

({ children })

};

const SocketProvider = ({ children }) => {
  const [state, dispatch] = useReducer(socketReducer, initialState);

  const { socket, wsTimeoutDuration } = state;

  useEffect(() => {
    // run once on first render
    (async () => {
      try {
        const response = await fetch("config.json");
        const data = await response.json();
        if (Object.prototype.hasOwnProperty.call(data, "wsUrl")) {
          dispatch({
            type: "initSocket",
            url: data.wsUrl,
          });
        } else {
          console.error("config.json is invalid");
        }
      } catch (e) {
        console.error(e.message);
      }
    })();
  }, []);

  useEffect(() => {
    if (!socket) return;

    socket.onopen = () => {
      dispatch({ type: "resetTimeout" });
      dispatch({ type: "resetTimeoutDuration" });
      console.log("Connected to websocket");
    };

    socket.onclose = (e) => {
      const { reason } = e;
      console.log(
        `Socket is closed. Reconnect will be attempted in ${Math.min(
          wsTimeoutDuration / 1000
        )} second. ${reason}`
      );

      const timeout = setTimeout(() => {
        //check if websocket instance is closed, if so renew connection
        if (!socket || socket.readyState === WebSocket.CLOSED) {
          dispatch({ type: "renewSocket" });
        }
      }, wsTimeoutDuration);

      dispatch({
        type: "updateTimeout",
        timeout,
      });
    };

    // err argument does not have any useful information about the error
    socket.onerror = () => {
      console.error(`Socket encountered error. Closing socket.`);