• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

React을 websocket 클라이언트로 활용

23.03.16 17:34 작성 조회수 2.72k

0

선생님 안녕하세요.

저는 사용자 정보를 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

course-thumbnail

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

답변 1

답변을 작성해보세요.

1

이진석님의 프로필

이진석

지식공유자

2023.03.16

안녕하세요.

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

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

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

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

화이팅입니다. :-)

김윤정님의 프로필

김윤정

질문자

2023.03.17

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

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

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>

);

 

이 글과 비슷한 Q&A