React에서 Socket 연결을 Custom Hook 이용하여 구성해 보았다.

웹 소켓을 이용하여 채팅 메시지를 보여줘야 할 필요가 있었는데,

  

React - Hooks 를 주로 사용하는 프로젝트에 붙여야 했다.

 

그냥 웹소켓에 연결하고 응답받는거야 그리 큰 어려움은 아니겠지만,

뭔 상태하나가 바뀌건, props 가 바뀌건, 시도때도없이 render 를 호출하는 리액트 hooks 에,

웹소켓 연결을 붙이는것은 고민이 좀 많이 되었었다. 

 

그래서 이래저래 많은 시도를 해보았는데,

커스텀 훅을 만드들어서 해결한 방법이 가장 깔끔했고, 리액트 훅에 잘 어울린것 같다.

 

use-my-socket.ts

export enum MySocketState {
  onNewChatReceived = 'onNewMessageReceived',
  onConnectionFailed = 'onConnectionFaield',
  onConnectionOpened = 'onConnectionOpened'
}


export const useMySocket = (
    onConnectionStateChanged: (state: MySocketState) => void
  ) => {

  //응답받은 문자열을 넘겨줄 state
  const [responseMessage, setResponseMessage] = useState('')

  // 연결을 시작한다.
  useEffect(() => {
    connectStart()
  }, [])

  
  //소켓 연결 시작.
  const connectStart = () => {
    const ws = new WebSocket(MY_HOST_NAME);
    ws.onmessage = (e) => {
      e.preventDefault();      
      const data = e.data;
      
      setResponseMessage(data)
      onConnectionStateChanged(MySocketState.onNewMessageReceived)
    }

    ws.onopen = () => {
      onConnectionStateChanged(MySocketState.onConnectionOpened)
    };

    ws.onclose = () => {
      onConnectionStateChanged(MySocketState.onConnectionFailed)
    };
  }

  return {responseMessage: responseMessage}
}

 

useMySocket 을 사용할 React Component

import { useMySocket, MySocketState } from './use-my-socket';

export default MyComponent = () => {
  
  const { responseMessage } = useMySocket((state) => {
    if (state === MySocketState.onNewMessageReceived ) {
      console.log('onNewMessageReceived');
    }
    else if (state === MySocketState.onConnectionFailed ) {
      console.error('onConnectionFailed');
    }
    else if (state === MySocketState.onConnectionOpened) {
      console.log('onConnectionOpened');
    }
  });

  return (
    <div>{responseMessage}</div>
  )
}