6. WebSocket 프로토콜의 동작 방식
WebSocket 프로토콜은 클라이언트와 서버 간의 지속적이고 양방향의 통신을 가능하게 한다.
WebSocket 프레임 (WebSocket Frames)
WebSocket 통신은 "프레임"이라는 단위로 데이터를 전송한다. 각 프레임은 페이로드 데이터(payload data)와 이 데이터에 대한 메타데이터(meta-data)를 포함한다. 메타데이터는 프레임의 길이, 종류, 페이로드 데이터의 해석 방법 등을 지정한다.
통신 과정
-
연결 설정 (Connection Establishment):
- 클라이언트는 HTTP 요청을 통해 서버에 WebSocket 연결을 요청한다. 이 요청에는 "Upgrade: websocket" 헤더가 포함된다.
- 서버는 클라이언트의 요청을 수락하고, "101 Switching Protocols" 응답을 전송한다. 이 응답에는 "Upgrade: websocket" 헤더가 포함된다.
- 이제 클라이언트와 서버 사이에 WebSocket 연결이 설정되었으며, 양방향 통신을 시작할 수 있다.
-
데이터 전송 (Data Transmission):
- 클라이언트와 서버는 WebSocket 프레임을 사용하여 데이터를 주고받는다.
- WebSocket 연결이 유지되는 동안, 클라이언트와 서버는 양방향으로 어떠한 데이터도 전송할 수 있다.
-
연결 종료 (Connection Termination):
- 클라이언트나 서버 중 어느 한쪽이 연결을 종료하려면, 종료 프레임(termination frame)을 전송한다.
- 연결이 종료되면, 양쪽 모두 소켓을 닫고 자원을 해제한다.
7. WebSocket의 장단점
WebSocket은 실시간 양방향 통신을 제공하는 강력한 프로토콜이지만, 장단점이 있다.
장점
- 실시간 양방향 통신: WebSocket은 실시간 양방향 통신을 제공하여, 클라이언트와 서버 간에 빠르고 지속적인 데이터 교환을 가능하게 한다.
- 지속적인 연결: 한 번 연결되면, WebSocket 연결은 유지되어 추가적인 연결 설정 없이 데이터를 주고받을 수 있다.
- 낮은 지연 시간 (Low Latency): WebSocket은 연결 설정 후 낮은 지연 시간으로 데이터를 전송한다.
단점
- 호환성 (Compatibility): 일부 오래된 웹 브라우저나 네트워크 인프라가 WebSocket을 지원하지 않을 수 있다.
- 보안 (Security): WebSocket 연결은 적절한 보안 조치 없이는 중간자 공격(man-in-the-middle attacks)에 취약할 수 있다.
WebSocket 프로토콜은 실시간 양방향 통신이 필요한 다양한 웹 애플리케이션에서 중요한 역할을 수행한다. 하지만, 사용 시에는 해당 프로젝트의 요구 사항과 WebSocket의 장단점을 고려하여 적절한 구현 방법을 선택해야 한다.
- Socket.IO 기초
Socket.IO는 실시간, 양방향 및 이벤트 기반의 통신을 가능하게 하는 라이브러리다. 이 라이브러리는 WebSocket을 기반으로 하지만, 추가로 재연결 지원, 네임스페이스, 룸 등의 기능을 제공하여 실시간 웹 애플리케이션 개발을 더욱 강력하고 유연하게 만들어 준다.
- 주요 특징:
- 실시간 양방향 통신: 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있다.
- 이벤트 기반: 사용자 정의 이벤트를 정의하고 이벤트 핸들러를 등록하여, 복잡한 비즈니스 로직을 쉽게 구현할 수 있다.
- 네임스페이스와 룸: 네임스페이스를 통해 서로 다른 로직을 분리하고, 룸을 통해 특정 그룹의 클라이언트에게만 메시지를 전송할 수 있다.
- 재연결 지원: 네트워크 이슈로 연결이 끊어진 경우, 자동으로 재연결을 시도한다.
- Socket.IO 설치 및 기본 사용 방법
Socket.IO는 Node.js 환경에서 동작하며, npm을 통해 쉽게 설치할 수 있다. 다음은 Socket.IO를 설치하고 간단한 예제를 실행하는 방법이다.
- 설치:
npm install socket.io- 서버 예제:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});- 클라이언트 예제:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
/* Add some style */
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="" autocomplete="off">
<input id="input" autocomplete="off"><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var socket = io();
$('form').submit(function() {
socket.emit('chat message', $('#input').val());
$('#input').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>위 예제는 간단한 채팅 애플리케이션을 만드는 방법을 보여준다. 사용자는 메시지를 입력하고 "Send" 버튼을 클릭하여 메시지를 전송하며, 서버는 이 메시지를 받아서 모든 클라이언트에게 브로드캐스트한다.
- Socket.IO의 활용 예제
Socket.IO는 실시간 통신이 필요한 다양한 애플리케이션에 활용할 수 있다. 이 섹션에서는 Socket.IO를 활용한 다양한 예제를 제공한다.
- 실시간 대시보드:
실시간 대시보드는 서버에서 수집된 데이터를 실시간으로 클라이언트에 표시해야 한다. Socket.IO를 사용하면 서버에서 클라이언트로 실시간으로 데이터를 푸시할 수 있다.
// 서버
io.on('connection', (socket) => {
setInterval(() => {
const data = getData(); // 데이터를 가져오는 함수
socket.emit('update data', data);
}, 1000);
});
// 클라이언트
socket.on('update data', (data) => {
updateDashboard(data); // 대시보드를 업데이트하는 함수
});이 예제에서는 서버가 1초마다 데이터를 가져와서 클라이언트에게 'update data' 이벤트를 통해 데이터를 전송한다. 클라이언트는 이 이벤트를 받아서 대시보드를 업데이트한다.
Socket.IO는 이와 같이 실시간 양방향 통신이 필요한 다양한 웹 애플리케이션에서 활용할 수 있으며, 사용자 정의 이벤트와 네임스페이스, 룸 기능을 통해 복잡한 비즈니스 로직을 쉽게 구현할 수 있다.
