[웹소켓] WebSocket

📍웹 소켓(Web Socket) 이란?
HTTP 통신을 이용하면 클라이언트에서 서버에 요청을 보내야만 서버에서 응답을 할 수 있다.
즉, 서버에서는 요청을 받지 않으면 클라이언트에 통신할 수 없는 것!
이러한 문제점을 해결하기 위해서는 양방향으로 통신할 수 있는 웹 소켓 통신을 이용해야 한다.
채팅, 문의, 알림, 트레이딩과 같은 '실시간' 이라는 키워드가 필요한 기능들은 HTTP 통신을 사용해서는 구현할 수 없어,소켓통신을 이용해야 한다.

-> 배달 할 오더 목록을 바로바로 '실시간'으로 보기 위해 socket.io 라이브러리 설치 후 이용해 보자.
대신, 베터리 소모가 많다.

npm i socket.io-client

  const [socket, disconnect] = useSocket();

  useEffect(() => {
    const helloCallback = (data: any) => {
      console.log(data);
    };
    if (socket && isLoggedIn) {
      console.log(socket);
      socket.emit('login', 'hello');
      socket.on('hello', helloCallback);
    }
    return () => {
      if (socket) {
        socket.off('hello', helloCallback);
      }
    };
  }, [isLoggedIn, socket]);

  useEffect(() => {
    if (!isLoggedIn) {
      console.log('!isLoggedIn', !isLoggedIn);
      disconnect();
    }
  }, [isLoggedIn, disconnect]);
    const [socket, disconnect] = useSocket();

  useEffect(() => {
    const helloCallback = (data: any) => {
      console.log(data);
    };
    if (socket && isLoggedIn) {
      console.log(socket);
      socket.emit('login', 'hello');
      socket.on('hello', helloCallback);
    }
    return () => {
      if (socket) {
        socket.off('hello', helloCallback);
      }
    };
  }, [isLoggedIn, socket]);

  useEffect(() => {
    if (!isLoggedIn) {
      console.log('!isLoggedIn', !isLoggedIn);
      disconnect();
    }
  }, [isLoggedIn, disconnect]);