React을 websocket 클라이언트로 활용

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

작성

3.2K

선생님 안녕하세요.

저는 사용자 정보를 websocket에서 받아 사용을 해야 하는데요,

아무리 해도 웹소켓에서 리턴한 데이터를 화면에 뿌려줄수가 없습니다..

대략적인 코드는 이렇습니다.

 const ws = new WebSocket("wss://localhost:8080");
ws.onopen = () => ws.send('{"rqtype": "0000", "token": ""}');
ws.onmessage = (e) => {
 // e.Data를 Box안에 뿌리고 싶어요.
};
return (
    <Box>
        <Header emp_no={""} name={"유저"} />
                  

    </Box>

);

제 짐작으로는 ajax로 Django로 e.Data를 보낸 다음 화면에 뿌려주는 방법을 찾아야 할것 같은데.. 혹시 다른 방법이 있다면 조언 부탁드립니다.

감사합니다.

#react #websocket #Django

react python django docker

답변 1

이진석

지식공유자

안녕하세요.

지금 쓰신 코드에서 ws 객체는 해당 컴포넌트가 매 렌더링 시마다 생성됩니다. WebSocket 객체가 재생성되면 웹소켓 연결은 끊어지고 재연결이 이뤄집니다.

리액트 함수 컴포넌트에서는 위 ws 객체를 상탯값으로 관리하셔야 합니다. ws 객체 생성 및 .onopen, .onmessage 이벤트 핸들러 설정은 useEffect를 통해서, 해당 컴포넌트에서 1회만 수행되도록 하시고,
.onmessage 호출 시에는 별도의 상탯값을 설정하는 setter를 호출하도록 하고, 그 상탯값을 jsx에서 렌더링하시는 접근을 취해보실 수 있습니다.

혹은 아래와 같이 웹소켓 커스텀 훅 라이브러리를 쓰시는 것도 한 방법입니다.
https://www.npmjs.com/package/react-use-websocket

차근차근 살펴보시고 질문 남겨주세요.

화이팅입니다. :-)

김윤정

질문자

선생님 너무너무 감사합니다.

해결했구요, 혹시 다른분들도 필요하실수 있을것 같아 예제 남깁니다.

let [data, changeData] = useState("");

useEffect(() =>{
     const ws = new WebSocket("wss://localhost:8080");
ws.onopen = () => ws.send('{"rqtype": "0000", "token": ""}');
ws.onmessage = (e) => {
changeData(e.data);
};
}, [])

return (
    <Box>
        <Header user={data}/>
           <Outlet/>
    </Box>

);

인프런 커뮤니티 질문&답변

React을 websocket 클라이언트로 활용