웹소켓 Socket.io와 WS의 차이

두 모듈을 사용하다보니 차이가 나는 것을 알 수 있었고 포스팅하려 합니다.

ws는 조금 불친절하지만 원하는대로 코드 작성하기가 쉬웠고, socket.io는 기능이 많고 쉽게 사용하기 쉬우며 직관적입니다. 처음 배우기에 확실히 좋은건 socket.io, 원하는대로 커스텀하여 만들기 좋은 것은 ws라고 할 수 있습니다.

두가지 모듈로 각각 채팅을 구현하면서 느낀 다른 점들을 서술해보려 합니다.🙂

1. socket.io는 추가적인 설치를 해야 한다.

둘 다 서버에서는 모듈 설치가 필요하지만 ws는 웹소켓 표준이라 클라이언트에 추가적인 설치를 요구하지 않습니다.
반면, ws에서는 new WebSocket('서버주소/네임스페이스')으로 객체를 생성을 바로 사용할 수 있지만, socket.io는 js파일을 추가해야 합니다.

2. ws는 string형으로 데이터를 전송한다.

socket.io는 이벤트명과 데이터를 명확하게 구분하고 모든 자료형을 주고 받을 수 있지만, ws는 string 자료형 하나로 데이터를 주고 받습니다. 이벤트명도 데이터에 포함해서 받으므로 데이터를 parsing하는 과정이 필요합니다.
이를 활용하기 위해 주로 JSON.parse나 JSON.stringify함수를 사용하게 되며, NestJS에서는 event로 이벤트명을 지정하고 data로 데이터명을 지정하는 규약을 가집니다.

3. ws에는 룸이 없다.

socket.io에서는 당연하게 지원되는 room과 broadcast와 같은 기능을 ws에서는 직접 만들어야 하는 경우가 있습니다. 다행히 namespace는 ws도 지원합니다!
socket.io에서는 서버.broadcast.emit('이벤트명, 데이터)으로 자신을 제외한 사용자에게 데이터를 보낼 수 있지만, ws에서는 클라이언트.send(데이터)를 for문 반복하여 보내야 합니다.

4. socket.io는 계속해서 연결을 시도한다.

연결이 끊어졌을 때 socket.io는 주기적으로 연결을 시도합니다. ws는 한번 연결이 끊어졌을 때, 복구되지 않으므로 같은 기능을 구현하려면 추가적인 코드가 필요합니다.

결론

둘 다 같은 기능을 하면서 기능적인 차이가 많지만 장단점이 있다고 생각합니다. ws가 직관적이고 가벼운 느낌이라 편했지만 socket.io의 to, of 와 같이 특정 클라이언트를 지정하는 기능을 무시할 수 없었습니다. socket.io가 ws의 확장판같은 느낌으로 편하기 때문에 많이 쓰는 이유를 알 수 있었습니다.