웹 소켓

웹 소켓

HTML5에서 새로 추가된 스펙으로 실시간 양방향 데이터 전송을 위한 기술이다. HTTP와 다르게 WS라는 프로토콜을 사용한다. 이전에는 폴링이라는 방법(HTTP가 클라이언트에서 서버로 향하는 단방향 통신으므로 주기적으로 서버에 새로운 업데이트가 없는지 확인하는 요청을 보내, 있다면 새로운 내용을 가져오는 단순무식한 방법)을 사용했으나 브라우저와 웹 서버가 지속적으로 연결된 라인을 통해 실시간으로 데이터를 주고받을 수 있는 웹 소켓이 등장했다. 업데이트할 내용이 생겼다면 바로 클라이언트에게 알려준다. 그리고 HTTP 와 포트를 공유할 수 있어 다른 포트에 연결할 필요도 없다. socket.io는 웹 소켓을 편리하게 사용할 수 있는 라이브러리이다.

 

ws 모듈

bin/www

express 서버와 웹 소켓 서버를 연결한다.

 

socket.js

웹 소켓 서버에 이벤트 리스너를 붙여준다(wss). 웹 소켓은 이벤트 기반으로 작동한다고 생각하면 된다. connection 이벤트는 클라이언트가 서버와 웹 소켓 연결을 맺을 때 발생한다. req.headers['x-forwarded-for'] || req.connection.remoteAddress 는 클라이언트의 IP를 알아내는 방법이다. message는 클라이언트로부터 메세지가 왔을 때 발생한다. error는 웹 소켓 연결 중에 문제가 생겼을 때 발생한다. close는 클라이언트와의 연결이 끊겼을 때 발생한다. 웹 소켓에는 4가지 상태가 존재한다. CONNECTING, OPEN, CLOSING, CLOSED

 

views/index.pug

클라이언트에서도 웹 소켓을 사용해야 한다. 서버와 연결이 맺어지는 경우 onopen 이벤트 리스너가 호출되고, 서버로부터 메세지가 오는 경우에는 onmessage 이벤트 리스너가 호출된다.