Web Socket을 도입하며 겪었던 트러블 슈팅들

얼마전에 소켓을 도입하여 프로젝트를 진행하는데, 생각보다 많은 트러블 슈팅을 겪었습니다.

프론트엔드 개발자 입장에서 소켓 도입은 큰 어려움이 아니라고 생각했는데, 역시 항상 실제 적용하는 건 다르더라구요. 오늘은 그 트러블 슈팅들을 정리해보고자 합니다.

 

1. 소켓이 제대로 연결되지 않는 문제점

저는 socket-io.client 라이브러리를 사용하는 것을 선택했는데요, 이 라이브러리에 문제점이 발생했습니다. 

아무리 WebSocket을 연결하려고 해도, 아래와 같은 경고 문구가 뜨면서 연결이 되지 않았습니다.

 

받은 소켓 메세지는 아래와 같았고요.

 

원인은 간단했습니다. (알고나니 간단) 

그냥 라이브러리 문제였어요.4.8.1 버전은 제대로 동작하지 않고, 2.4.0은 제대로 동작하더라구요.

그래서 2.4.0 버전으로 다운그레이드했습니다. (명확한 원인을 알려면 라이브러리를 까봐야하는데, 시간이 없어서 생략했습니다.)

 

2. 소켓이 연결되었지만, 타입 스크립트에서 제공되지 않았던 문제점

2.4.0 으로 다운그레이드 했을 때의 아주 큰 문제점은 적절한 타입이 제공되지 않는다는 점입니다. 

이로 인해, 타입스크립트를 사용하는 프로젝트에서 빌드 에러를 마주칠 수 밖에 없었습니다. 

이를 해결하기 위해 제가 택한 방법은 아래와 같습니다.

 

  types/global.d.ts 
(저는 이름 바꿔서 socket.io-client.d.ts 로 파일을 만들었습니다.)

declare module "socket.io-client" {
    import { io, Socket } from "socket.io-client";
    export = Socket;
    export function io(uri: string, opts?: any): Socket;
}

 

이런 간단한 타입을 정의해주어서 해결했습니다.

 

3. 소켓을 연결하더라도, 원하는 메세지가 오지 않던 문제들

프론트 측 문제인 줄 알고 정말 많은 시간을 들여 찾아보았지만, 알고 보니 서버 문제였습니다. 

연결이 확실하게 되었다면, 연결 직후 메세지가 잘 올텐데 특정 메세지만 안 온다면 이는 서버에서 로직이 꼬였을 가능성이 높다는 것도 배웠습니다. 덕분에 정말 많은 소통을 해보고, 자바도 현재는 잘 모르는데 같이 들여다보는 시간을 갖기도 했네요.