Soket.IO 사용하기

이전 절의 "ws" 패키지는 간단하게 웹소켓을 사용하고자 할 때 좋습니다. 

하지만 구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 편리합니다. 

Socket.IO가 할 수 있는 일을 "ws" 패키지가 못한다는 뜻은 아닙니다. 

Socket.IO에 편의 기능이 많이 추가되어 있다는 뜻입니다. 먼저  Socket.IO를 설치합니다.

 

npm i socket.io@2

 

그리고 ws 패키지 대신 Socket.io를 연결한다.

먼저 socket.io 패키지를 불러와서 익스프레스 서버와 연결합니다. 

Socket.IO 객체의 두 번째 인수로 옵션 객체를 넣어 서버에 관한 여러 가지 설정을 할 수 있습니다. 

여기서는 클라이언트가 접속할 경로인 "path" 옵션만 사용했습니다. 

 

클라이언트에서도 이 경로와 일치하는 path를 넣어야 합니다. 연결 후에는 이벤트 리스너를 붙입니다. 

"connection" 이벤트는 클라이언트가 접속했을 때 발생하며, 

콜백으로 소켓 객체(socket)를 제공합니다. io와 socket 객체가 Socket.IO의 핵심 입니다. 

 

socket.request 속성으로 요청 객체에 접근할 수 있습니다. socket.request.res로는 응답 객체에 접근할 수 있습니다. 

또한, socket.id로 소켓 고유의 아이디를 가져올 수 있습니다. 이 아이디로 소켓의 주인이 누구인지 특정할 수 있습니다. 

 

socket에도 이벤트 리스너를 붙였습니다. "disconnect"는 클라이언트가 연결을 끊었을 때 발생하고, 

"error"는 통신 과정에서 에러가 나왔을 때 발생합니다. 

"reply"는 사용자가 직접 만든 이벤트입니다. 

 

클라이언트에서 "reply"라는 이벤트명으로 데이터를 보낼 때 서버에서 받는 부분입니다. 

이렇게 이벤트명을 사용하는 것이 "ws" 모듈과는 다릅니다. 

아래에 emit 메서드로 3초마다 클라이언트 한 명에게 메시지를 보내는 부분이 있는데, 인수가 두 개입니다. 

첫 번째 인수는 이벤트 이름이고, 두 번째 인수는 데이터 입니다. 

즉, "news"라는 이벤트 이름으로 "Hello Socket.IO"라는 데이터를 클라이언트에 보낸 것입니다. 

클라이언트가 이 메시지를 받기 위해서는 "news" 이벤트 리스너를 만들어두어야 합니다. 

/socket.io/socket.io.js는 Socket.IO에서 클라이언트로 제공하는 스크립트입니다. 

실제 파일이 아니며, 이 스크립트를 통해서 버와 유사한 API로 웹소켓 통신이 가능합니다. 

이 스크립트를 통해 제공되는 io 객체에서 서버 주소를 적어 연결합니다. 

 

웹소켓 프로토콜이 아니라 HTTP 프로토콜을 사용한다는 점이 "ws" 모듈과 다릅니다. 

그 이유는 나중에 나옵니다. 옵션으로 path를 주었는데, 이 부분이 서버의 path 옵션과 일치해야 통신이 가능합니다.

서버에서 보내는 "news" 이벤트를 받기 위해 "news" 이벤트 리스너를 붙여두었습니다. 

"news" 이벤트가 발생하면 emit 메서드로 다시 서버에 답장을 합니다. 서버의 "reply" 이벤트 리스너로 답장이 갑니다.

서버를 실행하고 "http://localhost:8005"에 접속해봅시다. 

개발자 도구(F12)의 Network 탭을 보면 조금 독특한 것을 발견할 수 있습니다. 웹소켓 연결 말고도 폴링 연결(xhr)이 있습니다.

Socket.IO는 먼저 폴링 방식으로 서버와 연결을 수립합니다. 

그래서 (프론트)코드에서 HTTP 프로토콜을 사용한 것입니다. 

폴링 연결 후, 웹소켓을 사용할 수 있다면 웹소켓으로 업그레이드합니다. 

웹소켓을 지원하지 않는 브라우저는 폴링 방식으로, 웹소켓을 지원하는 브라우저는 웹소켓 방식으로 사용 가능합니다.

 

 

아직까지는 Socket.IO의 편리함이 크게 와닿지 않을 것입니다. 

다음 절에서 본격적으로 채팅방을 만들어보며 Socket.IO의 편리함을 느껴보시게 될 것입니다.