사람들은 상호작용하는 웹 서비스를 위해 Long Polling
, Stream
등 다양한 방법을 사용했다. 하지만 이러한 방식은 브라우저가 HTTP Request
요청을 보내고 웹 서버가 이 요청에 대한 HTTP Response
응답을 보내는 단방향 메세지 교환이였다. 그렇기 때문에 상호작용하는 웹 페이즈를 복잡하고 어려운 코드로 구현해야 했다.
사용자들은 더 편리하고 자유로운 양방향 메시지 송수신을 원했고 필요로했다. 그래서 HTML5 표준안의 일부로 Web Socket API
가 등장했다.
사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하고 Web Socket API
를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. Web Socket API
은 별도의 포트를 사용하지 않고 HTTP
와 같은 80번 포트를 사용하고 있는데, 이 때문에 클라이언트인 웹 브라우저 뿐만 아니라 웹 서버도 기능을 지원하고 있어야 한다고한다.
Socket.io
는 JavaScript
를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.
WebSocket
, FlashSocket
, AJAX Long Polling
, AJAX Multi part Streaming
, IFrame
, JSONP Polling
을 하나의 API로 추상화한 것이다. 즉 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식이다.
npm install socket.io
위의 명령어로 터미널을 통해 Socket.io
를 설치한다.
그리고 HTML
에서 사용하기 위해
<script src="/socket.io/socket.io.js"></script>
를 CSS
에 링크를 걸듯
head 태그 안에 작성해준다.
express app.js
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
// 연결되었을 때
io.on('connection', function(socket){
console.log('connected');
// 연결이 끊겼을 때
socket.on('disconnect', function(){
console.log('disconnect');
});
});
꿀팁 감사합니다! 저도 이거 하고싶었는데 ㅠ