ws 모듈로 웹소켓 사용하기

git-chat라는 폴더 생성 후 기본 패키지 구성

 

 

app.js

 

routes/index.js 

 

 

 

npm install ws

웹 소켓을 익스트프레스 서버와 연결.

 

웹 소켓 로직이 들어있는 socket.js 파일 작성

 

ws 모듈을 불러온 후 익스프레스 서버를 웹소켓 서버와 연결했습니다. 

익스프레스(HTTP)와 웹소켓(WS)은 같은 포트를 공유할 수 있어 별도의 작업이 필요하지 않습니다.

연결 후에는 웹소켓 서버(wss)에 이벤트 리스너를 붙입니다. 웹소켓은 이벤트 기반으로 작동한다고 생각하면 됩니다.

실시간으로 데이터를 전달받으므로 항상 대기하고 있어야 합니다.

 

"connection" 이벤트는 클라이언트가 서버와 웹소켓 연결을 맺을 때 발생합니다.

req.headers['x-forwarded-for']와 req.connection.remoteAddress는

클라이언트의 IP를 알아내는 방법 중 하나이므로 알아두는 것이 좋습니다.

익스프레스에서는 IP를 확인할 때 proxy-addr 패키지를 사용하므로 이 패키지를 사용해도 괜찮습니다.

로컬호스트로 접속한 경우, 크롬에서는 IP가 "::1"로 뜹니다. 다른 브라우저에서는 "::1" 외의 다른 IP가 뜰 수 있습니다.

익스프레스 서버와 연결한 후, 웹소켓 객체(ws)에 이벤트 리스너 세 개, 즉 "message", "error", "close"를 연결했습니다.

"message"는 클라이언트로부터 메시지가 왔을 때 발생하고,

"error"는 웹소켓 연결 중 문제가 생겼을 때 발생합니다.

"close" 이벤트는 클라이언트와 연결이 끊겼을 때 발생합니다.

setInterval은 3초마다 연결된 모든 클라이언트에게 메시지를 보내는 부분입니다. 

먼저 readyState가 OPEN 상태인지 확인합니다. 웹소켓에는 네 가지 상태가 있습니다. 

 

CONNECTING(연결 중), OPEN(열림), CLOSING(닫는 중), CLOSED(닫힘)입니다. 

OPEN일 때만 에러 없이 메시지를 보낼 수 있습니다. 확인 후 ws.send 메서드로 하나의 클라이언트에 메시지를 보냅니다. 

 

"close" 이벤트에서 setInterval을 clearInterval로 정리하는 것도 꼭 기억해두길 바랍니다. 

이 부분이 없다면 메모리 누수가 발생할 수 있습니다. 프로그래밍을 할 때는 이렇게 사소한 것이 큰 영향을 미치기도 합니다.

 

 

웹소켓은 단순히 서버에서 설정한다고해서 작동하지는 않습니다. 

클라이언트에서도 웹소켓을 사용해야 합니다. 양방향 통신이기 때문입니다. 

"views" 폴더를 만들고 "index.html" 파일을 작성하여, <script> 태그에 웹소켓 코드를 넣겠습니다. 

"views" 폴더 안에 "error.html"도 같이 작성합니다.

 

WebSocket 생성자에 연결할 서버 주소를 넣고 WebSocket 객체를 생성합니다. 

서버 주소의 프로토콜이 "ws"인 것에 주의하세요. 클라이언트에서도 역시 이벤트 기반으로 동작합니다. 

서버와 연결이 맺어지는 경우에는 "onopen" 이벤트 리스너가 호출되고, 

서버로부터 메시지가 오는 경우에는 "onmessage" 이벤트 리스너가 호출됩니다. 

서버에서 메시지가 오면 클라이언트는 서버로 답장을 보냅니다.

서버를 실행하는 순간, 서버는 클라이언트에 3초마다 메시지를 보내고, 클라이언트도 서버로부터 메시지가 오는 순간 바로 답장을 보냅니다. 브라우저와 노드 콘솔에서 결과를 확인해봅시다.

"http://localhost:8005"에 접속하여 개발자 도구(F12)의 Console 랩을 켭니다. 

접속하는 순간부터 노드의 콘솔과 브라우저의 콘솔에 3초마다 메시지가 찍힙니다.

 

 

서버로부터 3초마다 메시지가 오지만, 

보낸 네트워크 요청은 처음 "http://localhost:8005"를 요청한 것과 웹소켓을 요청한 것 두 번 뿐입니다. 

HTTP를 사용하는 폴링 방식이었다면 매번 요청을 보내서 응답을 받아와야 했을 것입니다. 

웹소켓을 통해 주고받은 내용은 웹소켓 항목을 클릭한 후 Messages 탭에서 볼 수 있습니다.

 

 

이제 브라우저 하나를 종료하면 접속해제라는 메시지가뜨고, 메시지의 양이 다시 하나가 됩니다.

 

웹소켓이 무엇인지 대략적으로 이해하셨을 것입니다.

 그러나 이것을 바탕으로 직접 채팅방을 구현하려면 어려움을 느낄 수 있습니다. 

게다가 IE9와 같이 웹소켓을 지원하지 않는 브라우저에서도 실시간 채팅을 구현해야 한다면 더욱 어려움을 겪을 수 있습니다.

 이때 Socket.IO를 사용하면 도움이 될 수 있습니다