Soctet.io
NodeJS의 webscket 모듈인 socket.io 을 이용해서 채팅을 구현해 보자. 그 전에 간단하게 websocket에 대해 알아보자.
WebSocket
websocket 은 Html5에 포함되어진 프로토콜 중 하나이다.
Html vs WebSocket
html5이전에 사용되어진 html은 Request/Response 기반의 Statless 방식을 사용했다. 서버와 클라이언트 간의 Socket Connection 같은 영구적인 연결이 되어 있지 않고 클라이언트 쪽에서 필요할때 요청을 하면 서버가 응답을 하는 방식으로 진행되며, 각각의 요청은 과거의 요청 정보를 알지 못한다. 따라서 클라이언트가 요청을 해야 서버가 답을 줄수만 있으며, 서버 측에서 데이터가 바껴도 클라이언트가 refresh와 같은 요청을 하지 않으면 이를 알 수 없다. Ajax와 같은 기술을 통해 이러한 문제가 어느정도 해결될 수 있으나, 많은 데이터가 빠르게 변하는 경우 여전히 문제가 발생한다. (왜냐하면 ajax도 결국 클라이언트가 요청을 하는 polling 방식이기 때문.)
WebSocket는 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 양방향 통신이 가능하도록 하는 기술이다. 따라서 재 연결을 할 필요가 없다.
WebSocket의 연결은 Http 프로토콜을 통해 이루어진다. 연결이 정상적으로 되면 Http 프로토콜을 통해 WebSocket 연결이 이루어 지는 것이다. 하지만 그 후의 작업은 WebSocket 프로토콜로 이뤄 진다.
사용해보기
> npm install ws
서버측 코드
let WebSocket = require("ws").Server;
let wss = new WebSocket({port:3000});
wss.on("connection", function(ws) {
ws.send("보내고 싶은 msg");
ws.on("message", function(msg) {
console.log("Received : ", msg);
});
});
클라이언트쪽 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Websocket</title>
</meta>
</head>
<body>
<script>
let ws = new WebSocket("ws://localhost:3000");
ws.onopen = function(event) {
ws.send("hihi");
}
ws.onmessage = function(event) {
console.log("Sever message : ", event.data);
}
ws.onerror = function(event) {
console.log("Server error message: ", event.data);
}
</script>
</body>
</html>