23.03.16 17:34 작성
·
3.2K
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
답변 1
1
2023. 03. 16. 19:41
안녕하세요.
지금 쓰신 코드에서 ws 객체는 해당 컴포넌트가 매 렌더링 시마다 생성됩니다. WebSocket 객체가 재생성되면 웹소켓 연결은 끊어지고 재연결이 이뤄집니다.
리액트 함수 컴포넌트에서는 위 ws 객체를 상탯값으로 관리하셔야 합니다. ws 객체 생성 및 .onopen, .onmessage 이벤트 핸들러 설정은 useEffect를 통해서, 해당 컴포넌트에서 1회만 수행되도록 하시고,
.onmessage 호출 시에는 별도의 상탯값을 설정하는 setter를 호출하도록 하고, 그 상탯값을 jsx에서 렌더링하시는 접근을 취해보실 수 있습니다.
혹은 아래와 같이 웹소켓 커스텀 훅 라이브러리를 쓰시는 것도 한 방법입니다.
https://www.npmjs.com/package/react-use-websocket
차근차근 살펴보시고 질문 남겨주세요.
화이팅입니다. :-)
2023. 03. 17. 10:05
선생님 너무너무 감사합니다.
해결했구요, 혹시 다른분들도 필요하실수 있을것 같아 예제 남깁니다.