[Vite] vite로 이유 모르게 웹소켓 통신이 안되는 경우(ws, sockjs)

springboot로 만든 시그널링 서버와 react의 클라이언트 연결을 시도하는 중에 이유를 알 수 없게 연결이 되지 않았다.

여러 차례 다시 확인해봐도 코드 상으로 전혀 문제가 없는데, 연결이 전혀 되지 않았다.

진짜 킹받는 whoops

이상한 느낌이 들어서 똑같은 코드를 cra해서 만들어보고 실행해보았다.

좌 : cra / 우 : vite

딱 한가지의 차이점이 있었는데 vite쪽 웹 소켓을 vite-hmr이라는 프로토콜을 사용하고 있었다.

switching protocols가 발생하면서 cra는 /ws가 붙지만 vite는 붙지 않는다.

물론 cra로 진행한쪽은 통신이 잘된다.

 

HMR은 Hot Module Replacement의 약자로 애플리케이션을 다시 시작하지 않고도 일부 컨텐츠만을 갱신할 수 있다는 vite의 특징이자 장점이다. 하지만 통신 프로토콜과는 무슨 상관이 있는지 알기가 힘들다.

Vite Hot Module Replacement - A Complete Example

 

vite는 다음 스택오버플로우의 글처럼 config설정을 건드려줘야 하는 것 같다.

Vitejs: WebSocket connection to 'wss://host:port/' failed due to HMR

 

서버 hmr 설정 관련해서는 공식문서에 옵션이 설명되어 있지만, 디테일한 사용법이나 용어에 대해서는 설명하고 있지 않아서 기술적인 공부가 되어 있어야 할 것 같다.

 

Vite

자세한 해결책은 자세히 알 수는 없었지만, vite에서 웹소켓 통신이 되지 않는 이유나 해결책의 키워드를 제시하는 정도는 했을 것이라고 보고 글을 남긴다.