WebSocket 사용하기

이전 글에서 Spring으로 WebSocket 서버를 구현했으니 React에서 WebSocket 클라이언트를 구현해 보겠습니다.

컴포넌트에서 useEffect가 호출된 경우 WebSocket을 새로 만들어 연결하고, 각 이벤트를 등록해 처리하도록 구현을 하면 웹 소켓 통신이 가능합니다.

export default function MyCmp() {
    const [sockConnected, setSockConnected] = useState(false);

    const url = "ws://webSockServer.com/ws/chat";
    let ws = useRef(null);

    useEffect(() => {
        if(!ws.current) {
            ws.current = new WebSocket(url);
            ws.current.onopen = () => {
                // 연결 된 경우 호출
                setSockConnected(true);
            }
            ws.current.onclose = (err) => {
                // 연결이 끊긴 경우 호출
            }
            ws.current.onerror = (err) => {
                // Exception이 발생한 경우 호출
            }
            ws.current.onmessage = (res) => {
                // 메시지 수신 받은 경우 호출
                const data = res.data; // 문자열 데이터

            }
        }

        return () => {
            // Unmount 되는 경우 연결 해지
            ws.current.close();
        }
    }, [])

    const SendMsg = () => {
        if(sockConnected) {
            // WebSocket 전송
            ws.current.send("전송할 문자열");
        }
    }

    return (
        <div>
            .. 중략
        </div>
    )
}