React을 websocket 클라이언트로 활용
3453
작성한 질문수 1
선생님 안녕하세요.
저는 사용자 정보를 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
안녕하세요.
지금 쓰신 코드에서 ws 객체는 해당 컴포넌트가 매 렌더링 시마다 생성됩니다. WebSocket 객체가 재생성되면 웹소켓 연결은 끊어지고 재연결이 이뤄집니다.
리액트 함수 컴포넌트에서는 위 ws 객체를 상탯값으로 관리하셔야 합니다. ws 객체 생성 및 .onopen, .onmessage 이벤트 핸들러 설정은 useEffect를 통해서, 해당 컴포넌트에서 1회만 수행되도록 하시고,
.onmessage 호출 시에는 별도의 상탯값을 설정하는 setter를 호출하도록 하고, 그 상탯값을 jsx에서 렌더링하시는 접근을 취해보실 수 있습니다.
혹은 아래와 같이 웹소켓 커스텀 훅 라이브러리를 쓰시는 것도 한 방법입니다.
https://www.npmjs.com/package/react-use-websocket
차근차근 살펴보시고 질문 남겨주세요.
화이팅입니다. :-)
3
선생님 너무너무 감사합니다.
해결했구요, 혹시 다른분들도 필요하실수 있을것 같아 예제 남깁니다.
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>
);
안녕하세요.
0
51
1
[OneToOne Field Demo] get_user_model() 메서드를 활용해야 하는 이유?
0
275
1
useEffect 훅에서 else 유무에 따른 결과
0
211
1
useAxios 훅의 dependency array 설정
0
245
1
useEffect에서 변수 업데이트 관련 질문
0
382
1
rest_framework.generics.CreateAPIView의 model 속성 유무
0
268
1
bootstrap4
0
471
4
리뉴얼 강의가 오픈이 되면 기존 강의는 더이상 못보는걸까요
1
365
1
admin form에서 앞선 필드 선택 후 다른 필드 select widget 구성하는 방법
0
574
3
useState는 필수일까요?
0
263
1
python manage.py makemigrations instagram 시 created_at default 오류가 발생합니다.
0
600
4
Django allauth를 사용한 소셜 로그인 시 에러
0
655
1
프로젝트명 변경 뒤, 디버그툴바+디버그모드 사용 시 에러
0
556
2
useLocalStorage() 함수 사용여부
0
229
1
django에 LOGIN_URL = '/accounts/login/'의 의미?
0
449
1
리듀서의 의미 재확인
0
430
1
simple-jwt Refresh Token 사용 노하우
0
899
2
docker compose 를 통한 배포 관련 오류 문의
0
673
1
파이썬 속도 장고 관련 궁금한게 있습니다.
0
365
1
is_like_user
0
233
1
related_name 오류
0
275
1
re_path 오류
0
259
1
re_path url
0
251
1
No post matches the given query
0
661
2