채팅앱 만들어보기 (2) - React 프론트 구성

WebSocket은 기본으로 제공하는 라이브러리라서 별도의 설치가 필요없습니다

App.tsx

 const ws = new WebSocket("ws://localhost:8001/");

  useEffect(() => {
    (() => {
      ws.onopen = (e) => {
        console.log("success");
      };

      ws.onmessage = (e) => {
        console.log("received message", e);
      };

      ws.onclose = (e) => {
        console.log("close", e);
      };
    })();
  }, []);

이정도만 하셔도 기본적인 연결은 됩니다

하지만 웹소켓은 연결이 불안정하고 언제든지 끊길 위험이 있어서 연결을 따로 관리를 해주는게 좋습니다.

리팩토링

    const webSocket = useRef<WebSocket | null>(null);

  useEffect(() => {
    // 재연결을 할지 할지 구분 용도
    let isReconnect = true;

    // 연결 로직
    const connectWebSocket = () => {
      webSocket.current = new WebSocket("ws://localhost:8001/");

      const onConnect = async () => {
        console.log("연결성공");
      };

      const onReceive = async (e: any) => {
        console.log("메시지 수신", e);
      };

      const onDisconnect = () => {
        console.log("연결종료");
        reconnectWebSocket(isReconnect);
      };

      webSocket.current.onopen = onConnect;
      webSocket.current.onmessage = onReceive;
      webSocket.current.onclose = onDisconnect;
    };

    // 재연결 로직
    const reconnectWebSocket = (_isReconnect: boolean) => {
      if (!_isReconnect) return;
      console.log("재연결");
      connectWebSocket();
    };

    connectWebSocket();

    return () => {
      isReconnect = false;
      webSocket.current?.close?.();
      webSocket.current = null;
    };
  }, []);

1. 소켓이 끊겼을때 onDisconnect을 거쳐 reconnectWebSocket을 실행합니다.
2. reconnectWebSocket에서는 isReconnect으로 재연결 할지 판단합니다.
3. 재연결이 필요할때는 isReconnect가 true로 유지됩니다.
4. 페이지를 벗어나면 useEffect에 return문이 실행되면서 isReconnect가 false로 변경됩니다.
5. 재연결을 시도하지않습니다.

위의 방법을 통해 소켓이 끊겼을때 재연결 관리와 페이지를 벗어났는데 예상치 못한 연결을 방지 할 수 있습니다

소스코드보기