HTTP 한계로 인한 Web Socket의 등장
- HTTP 프로토콜은 요청에 대해서만 응답을 보내는 단방향 프로토콜이다.
- 단순 문서 전달에 효율적
- html 문서를 받아 브라우저를 렌더링하는 데에 사용 - 매 요청, 응답마다 연결하는 과정이 필요
- 인터넷이 발전하며 문서 교환 이상으로 사용자 사이의 상호작용이 중요시되면서 양방향 통신이 필요하게 되었다.
-Long polling,Ajax등을 사용해도 어느정도 해결이 가능하긴 하다. - 이러한 이유로 HTML5 표준안에 WebSocket이 등장했다.
Web Socket
- 하나의 HTTP 접속으로 양방향 통신(or 데이터 전송)이 가능하다.
- ex. SNS, 멀티 게임, 주식, 채팅 등 - URI:
ws,wss(http,https와 같은 개념)
handshaking
- HTTP 핸드쉐이크가 끝나면, HTTP 프로토콜을 웹 소켓 프로토콜로 변환하여 통신을 시작한다.
- 클라이언트에서 웹 소켓 프로토콜로 업그레이드를 요청
- 소켓 버전, 비밀키 등을 요청 헤더에 포함시킴
- 서버에서 웹 소켓 프로토콜로 업그레이드 성공 응답을 전송한다.
대표적인 라이브러리
- Python: websocket
- JS: ws, websocket, socket.io
- Go: gorilla/websocket
Socket.io
- 설치:
npm i socket.io
간단한 채팅 구현하기
server
소켓 서버 셋팅
// index.js
const express = require('express');
const app = express();
const server = require('http').createServer(app); // http 서버 생성
const io = require('socket.io')(server); // http 서버를 socket.io 서버로 upgrade
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});소켓 서버 접속
- 인자로 클라이언트가 접속한
socket객체가 전달된다.
io.on('connection', (socket) => {
console.log('a user connected');
});
socket: 개발 클라이언트와 상호작용을 위한 객체io: 서버에 연결된 전체 클라이언트와 상호작용을 위한 객체
메세지 수신
socket.on('envetName', callback() { ... });
메세지 송신
- 접속된 모든 클라이언트에게 메세지 전송
io.emit('eventName', msg); - 메세지를 전송한 클라이언트에게만 메세지 전송
socket.emit('eventName', msg); - 메세지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메세지 전송
socket.broadcast.emit('eventName', msg); - 특정 클라이언트에게만 메세지 전송
io.to(id).emit('eventName', msg);
Client
소켓 클라이언트 셋팅
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</body>
</html>소켓 서버 접속
var socket = io();
메세지 송신
socekt.emit('envetName', msg);
메세지 수신
- 인자로 서버가 송신한 메세지가 전달된다.
socket.on("event_name", function(data) {
console.log('Message from Server: ' + data);
});참고자료
Socket.IO
10.5 Node.js(Express)와 Socket.io
Socket.io를 사용한 실시간 채팅 애플리케이션
[웹소켓] WebSocket의 개념 및 사용이유, 작동원리, 문제점
junior backend-developer 👶💻