[react native]웹소켓 적용하기

리액트 네이티브에 웹소켓 적용하기

리액트 네이티브에서 웹소켓 통신을 사용하기 위해서 WebSocket을 사용하라고 권장한다.

페이스북 공식문서 - https://reactnative.dev/docs/network#websocket-support

현재 함수형 컴포넌트를 사용하고 있는데, 처음에 컴포넌트가 생성될 때 최초 1회만 웹소켓의 채널을 생성해야 한다. 따라서, useEffect hook을 사용해서 최초 1회 웹소켓을 정의했다.

useEffect(() => {
        let ws = new WebSocket(`ws://127.0.0.1:8000/ws/room/`)
        ws.onopen = () => {
            // connection opened
            console.log('connected')
        };
    
        ws.onmessage = (e) => {
            // a message was received
            console.log(e.data);
        };
    
        ws.onerror = (e) => {
            // an error occurred
            console.log(e.message);
        };
    
        ws.onclose = (e) => {
            // connection closed
            console.log(e.code, e.reason);
        };

        return () => {
            ws.close();
        };
    }, [])

웹소켓 인스턴스의 scope 문제

하지만 이렇게 useEffect hook 안에서 정의가 되기 때문에 다른 함수에서 웹소켓 인스턴스를 사용할 수 없게 된다. 이를 해결하는 방안으로 useRef hook을 사용하라고 한다.

해결방안 - https://stackoverflow.com/questions/60152922/proper-way-of-using-react-hooks-websockets

const ws = useRef(null);
useEffect(() => {
    ws.current = new WebSocket(`ws://127.0.0.1:8000/ws/room/632746/`)
    console.log(ws.current)
    ws.current.onopen = () => {
        // connection opened
        console.log('connected')
        // send a message
    };

    ws.current.onmessage = (e) => {
        // a message was received
        console.log(e.data);
    };

    ws.current.onerror = (e) => {
        // an error occurred
        console.log(e.message);
    };

    ws.current.onclose = (e) => {
        // connection closed
        console.log(e.code, e.reason);
    };

    return () => {
        ws.current.close();
    };
}, [])

ref는 단순히 DOM뿐만 아니라, 객체들을 저장하는 기능으로도 사용할 수 있다고 한다.

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class. more