useWebSocket

[hoyyChoi]

어떤 훅인가요?

useWebSocket 훅은 웹소켓(WebSocket) 연결을 React 환경에서 손쉽게 관리할 수 있도록 도와주는 훅입니다.
URL을 인자로 받아 서버와의 실시간 연결을 생성하고, 메시지 수신, 전송, 에러, 재연결 등의 생명주기를 React 상태로 관리할 수 있습니다.!

인터페이스

function useWebSocket(
  url: string,
  options?: {
    protocols?: string | string[]; // WebSocket 하위 프로토콜 (선택)
    autoReconnect?: boolean;       // 연결이 끊겼을 때 자동 재연결 여부
    reconnectInterval?: number;    // 재연결 간격 (기본값: 3000ms)
    onOpen?: (e: Event) => void;   // 연결 성공 시 콜백
    onMessage?: (msg: MessageEvent) => void; // 메시지 수신 시 콜백
    onClose?: (e: CloseEvent) => void;       // 연결 종료 시 콜백
    onError?: (e: Event) => void;            // 에러 발생 시 콜백
  }
): {
  socket: WebSocket | null;       // 현재 WebSocket 객체
  isConnected: boolean;           // 연결 상태
  lastMessage: string | null;     // 마지막으로 받은 메시지
  error: Event | null;            // 에러 정보
  sendMessage: (data: string | ArrayBuffer | Blob) => void; // 메시지 전송 함수
  close: () => void;              // 수동 연결 종료 함수
};

이 훅을 선정한 이유? (선택)

다른 팀들에서 webSocket을 많이 쓰는 것 같더라구요! 그래서 제가 한 번 탐구해보면서 해보고 싶은 마음에 이 훅을 선정했습니다.
선정된 사람이 잘 설명해주세요~ (@jeongyou 개인적으로 이 분이 가져가면 좋겠네요~)

참고할만한 자료(선택)

https://ahooks.js.org/hooks/use-web-socket
https://www.npmjs.com/package/react-use-websocket