react 웹소켓 http-proxy-middleware 설정 문제 관련 질문드립니다.

Question

react &#43; spring boot으로 채팅이 가능한 프로젝트를 진행중에 있습니다. react에서 StompJs &#43; SockJS를 통해서 spring boot와 연결을 맺습니다. 서버(spring boot)에서 Stomp 설정의 endPoint를 /handShake로 등록을 했습니다. react에서 SockJS객체를 만들때 webSocketFactory: () &#61;> new SockJS(&#34;/handShake&#34;)로 설정하였습니다. 웹소켓 설정 위해 react에서 http-proxy-middleware를 이용하여 setupProxy.js에 아래와 같이 작성하였습니다. module.exports &#61; (app) &#61;> { app.use( &#34;/handShake&#34;, createProxyMiddleware({ target: &#34;http://localhost:8080&#34;, ws: true, }) ); }; 이후 react에서 localhost:3000에서 로그인 페이지를 만들고 로그인 시 웹 소켓에 대한 구독, 활성화(activate) 처리를 진행합니다. setupProxy.js에 ws설정을 true로 설정 하고 localhost:3000에서 로그인 (웹소켓 handShake 및 연결) 이후에 다른 브라우저(새로운 chrome창, edge 창)등을 열어 localhost:3000을 입력하면 WebSocketClient.js:13 WebSocket connection to 'ws://localhost:3000/ws' failed: Invalid frame header과 같은 에러가 발생합니다. react에서 확인시 [HPM] WebSocket error: Error: read ECONNRESET at TCP.onStreamRead (node:internal/stream_base_commons:217:20) { errno: -4077, code: 'ECONNRESET', syscall: 'read' } 가 발생하는 것으로보아 중복으로 웹소켓에 대한 연결을 요청해서 발생하는 에러라고 판단됩니다. 또한 개발자 도구 Network를 살펴봤을때도 최초 로그인 (웹소켓 handShake 및 연결)시, websocket으로 연결하는 것과 달리 ws로 계속 연결을 시도하는 것으로 보여집니다. 그래서 ws설정을 false로 해봤더니 위의 증상이 나타나지 않습니다. 1. 위 상황에서 false로 설정했다면 연결이 되지 않아야 하는게 아닌지 궁금합니다. 왜냐하면 StompJs로 구독을 걸어놓은 URL로 발송시 서버의 &#64;MessageMapping으로 데이터가 수신 되었기 때문입니다. 혹시 이때는 websocket이 아닌 polling, longPolling으로 처리가 되는건지 궁금합니다. 2. ws를 true로 했을때 제가 생각했던 것 대로 이중으로 연결되어서 해당 에러가 발생하는지도 궁금합니다. 이 케이스에는 어떻게 대응할 수 있을까요? 3. 욕심이겠지만 위와 관련된 내용이 제공된 참조 문서를 첨부해 주시면 공부하는데 많은 도움이 될 것 같습니다. 긴 글 읽어 주셔서 감사합니다. 새해 복 많이받으세요.

react 웹소켓 http-proxy-middleware 설정 문제 관련 질문드립니다.

0개의 답변

기술 목록