[Trouble-shooting] 클라이언트에서 Websocket-STOMP 연결 요청 시 FALLBACK이 사용되는 현상

서버 쪽 핸들러에 문제가 있는 건가 했는데, 결론적으로는 클라이언트에서 웹소켓 연결 요청할 때 전달되는 쿼리스트링에 인코딩 되지 않은 특수문자가 포함되어 있던 것이 원인이었다.

 

Websocket-STOMP & SockJS 코드 일부분

✅ 클라이언트 코드

const socket = new SockJS('http://localhost:8083/ws?token=' + username);

 
✅ 서버 코드

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/ws")
            .setAllowedOriginPatterns("*")
            .setHandshakeHandler(customHandshakeHandler)
            .withSockJS();
}

 
✅ 문제상황

개발자도구 콘솔 탭

개발자도구 네트워크 탭

위 이미지들을 보면 웹소켓 요청이 실패하여 폴백을 사용하고 있음을 알 수 있다.
즉 토큰 쿼리스트링 값이 정상적으로 전달되지 않아 웹소켓 요청이 실패한 것이다.

 

URL에 변수를 넣어 전달할 경우 꼭 인코딩 처리를 하자

개발자도구 애플리케이션 탭

• 토큰으로 전달되는 값이 ?? 문자열인데, URL을 통해 전달된 공백, =, &, ?, # 같은 특수 문자들은 URL에서 예약된 문자로 전환되므로 의도한 대로 요청이 전달되지 않는다.
• 즉 클라이언트 코드를 다음과 같이 수정해야 한다.

const socket = new SockJS('http://localhost:8083/ws?token=' + encodeURIComponent(username));

 

마치며

• 클라이언트와 서버 코드의 전체적인 논리는 틀린 게 없는데 웹소켓 요청이 계속 실패했다. 
• 인코딩 처리가 왜 필요한지 알 수 있었다.
• SockJS 사용 시 웹소켓 연결에 실패하면 폴백을 사용한다는 점을 알 수 있었다.

 

이미지 출처

How to Test WebSocket Applications Using a Mobile Phone