웹소켓

웹소켓을 이용해서 웹소켓이 중간에 끊어저도 다시 자동으로 연결되어 데이터가 계속 업데이트 되게끔 해야하는 작업이 있어 간단한 웹소켓 코드를 작성 했었다.

let socket = new WebSocket(url);

  const connect = () => {
   setTimeout(() => {
    console.log('재연결 시도중...');
    socket = new WebSocket(url);
    socket.onopen = () => dispatch(webSocketConnected(id));
    socket.onclose = () => connect();
    socket.onmessage = (event: any) => {
      const message = JSON.parse(event.data);
      dispatch(socketData({message,id}));
    };
   }, 1000); // 1초 후에 연결을 시도합니다.
  };

  socket.onopen = () => dispatch(webSocketConnected(id));
  socket.onclose = () => connect();
  socket.onmessage = (event: any) => {
    const message = JSON.parse(event.data);
    console.log(message);
    dispatch(socketData({ message, id }));
  };
});

여기서 문제점이 중간에 웹소켓이 끊겼다가 다시 붙어도 데이터가 업데이트가 되지 않았다.

이유는 기존 웹소켓 인스턴스가 해제가 되지 않았고, 이로인해서 기존 리스너 함수들은 여전히 실행중이기 때문에 업데이트가 되지 않았던 것이다.

 

const connect = () => {
  console.log('재연결 시도중...');
  const newSocket = new WebSocket(url);
  newSocket.onopen = () => dispatch(webSocketConnected(id));
  newSocket.onclose = () => {
    socket = null; // 현재 socket 변수를 null로 설정
    newSocket.close(); // 새로운 WebSocket 인스턴스 닫기
    connect(); // 재연결 시도
  };
  newSocket.onmessage = (event: any) => {
    const message = JSON.parse(event.data);
    dispatch(socketData({ message, id }));
  };
};

위에와 같이 바꿔주게 되면

소켓이 끊어졌을경우 connect를 요청하게 되고 기존 socket을 null로 할당해주면서 GC에서 수거해갈수 있게 된다. 이로인해 메모리 누수도 막을 수 있으며 내가 의도한바와 같이 데이터도 잘 업데이트가 된다.