통신사 테더링시 웹소켓 연결이 안되는 이슈!

배경

최근 사내 플랫폼에 웹소켓 관련 코드가 추가되었다. 

실시간 관련 처리가 필요한 부분이 있어 Node.js 기반 웹소켓을 구현하여 각 클라이언트가 구동시 웹소켓 서버에 연결되도록 처리하였다. 

여러 테스트를 마치고 실 운영서버에 반영 한 후 한달정도 시간이 지난 듯 하다. 

종종 들리는 이슈로는 로그인이 한번에 잘 안되고 여러번 눌러야 된다는 들려왔지만, 재현이 불가능하여 추후에 다시 확인해봐야지 생각과동시에 이 부분이 웹소켓관련 부분임을 의심하고 있던 찰나 우연히 한 고객에 의해 재현 방법이 밝혀졌다.

이전에 있었던 이슈와 같은 S사 테더링 환경..

 

원인

결론부터 말하자면 통신사 S사 테더링을 이용한 경우, IPv6 방식으로 통신을 수립하려 하고 그 과정에서 연결이 되지 않는 현상이였다. 

이 부분에 대해서는 사실 일반 API 통신 과정에서 이미 한번 경험해 본 사례이다. 

아래 글을 통해 좀 더 자세한 내용, 이전 이슈 경험과 해결방안에 대해 확인 할 수 있다.

통신사 테더링 후 Node.js 프로그램 내 Request 안되는 이슈 (1/2)

통신사 테더링 후 Node.js 프로그램 내 Request 안되는 이슈 (1/2)

통신사 테더링 후 Node.js 프로그램 내 Request 안되는 이슈 (2/2)

통신사 테더링 후 Node.js 프로그램 내 Request 안되는 이슈 (2/2)

 

이번 사례의 다른 점은 일반 http request가 아니라 웹소켓 통신이였다는 점에서의 차이일뿐이다. 

 

해결

웹소켓 서버쪽에서 해결하기 보다, 웹소켓 클라이언트 측에서 처리를 진행하였다. 

let ws = null;
const wsUrl = getWsUrl();
try {
  ws = new WebSocket(wsUrl, { family: 4 });
  ws.clientKey = clientKey;

  ws.on("error", () => {
    console.error("websocket 연결 실패");
  });

  ws.on("open", () => {
    open({ ws, message: { isReconnect, key: clientKey } });
  });

  ws.on("message", (eventData, isBinary) => {
    const message = isBinary ? eventData : eventData.toString();
    eventCallback(message, ws, browserWindow);
  });
} catch (s) {
  // todo
}

사내 코드를 그대로 들고 올 수 없기에 급히 임시 예제코드로 대체하였다. 

4번째 줄을 보면 ws = new WebSocket( url , option )  부분이 있는데, 이 부분에서 option을 { family : 4 } 로 처리해주면 IPv4 통신을 기반으로 진행시키는것을 확인할 수 있었다. 

typescript 5.2 @types > ws > index.d.ts , WebSocket 부분에서 확인할 수 있다.

WebSocket 클라이언트 테스트를 진행 후 이상없이 되는 것을 보고 급히 클라이언트 반영을 완료할 수 있었고 그렇게 내 불금은 사라졌다.