웹 애플리케이션에서 실시간 통신은 사용자 경험을 향상시키는 중요한 요소입니다. WebSocket은 이러한 실시간 통신을 효과적으로 구현할 수 있는 강력한 기술입니다. 이번 글에서는 WebSocket의 기본 개념부터 구현 방법까지 자세히 살펴보겠습니다.
WebSocket이란?
WebSocket은 HTML5 표준의 일부로, 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 전통적인 HTTP 통신 방식은 클라이언트가 요청을 보내고 서버가 응답하는 방식으로 작동하지만, WebSocket은 처음 연결이 성립된 이후 지속적으로 데이터를 주고받을 수 있습니다. 이를 통해 실시간 채팅, 온라인 게임, 실시간 피드 업데이트 등의 애플리케이션을 구현할 수 있습니다.
WebSocket의 특징
- 양방향 통신: 클라이언트와 서버가 자유롭게 데이터를 주고받을 수 있습니다.
- 실시간: 지속적인 연결을 통해 실시간 데이터 전송이 가능합니다.
- 낮은 오버헤드: HTTP의 헤더 오버헤드가 없어 효율적입니다.
WebSocket의 기본 동작
WebSocket의 동작은 크게 세 단계로 나눌 수 있습니다:
- 핸드셰이크: 클라이언트가 서버에 WebSocket 연결을 요청합니다.
- 연결 성립: 서버가 요청을 승인하면 WebSocket 연결이 성립됩니다.
- 데이터 프레임 교환: 연결이 성립된 후, 클라이언트와 서버는 지속적으로 데이터를 주고받을 수 있습니다.
WebSocket 구현 예시
Node.js와 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('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});클라이언트 설정:
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const socket = io();
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const input = document.querySelector('#message');
socket.emit('chat message', input.value);
input.value = '';
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
document.querySelector('#messages').appendChild(li);
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form>
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>WSS로 안전한 실시간 통신 구현하기
실시간 애플리케이션에서 데이터 보안은 매우 중요합니다. WebSocket의 보안을 강화한 WebSocket Secure(WSS)는 데이터를 암호화하여 안전한 통신을 보장합니다. 이번에는 WSS의 기본 개념부터 구현 방법까지 자세히 살펴보겠습니다.
WebSocket Secure(WSS)란?
WebSocket Secure는 TLS(전송 계층 보안)를 사용하여 WebSocket 통신을 암호화한 것입니다. 이를 통해 중간자 공격이나 데이터 도청을 방지할 수 있습니다. 민감한 데이터가 오가는 실시간 애플리케이션에서는 WSS를 사용하는 것이 권장됩니다.
WSS의 특징
- 보안: TLS를 사용하여 데이터 암호화.
- 실시간: WebSocket과 동일하게 실시간 양방향 통신 가능.
- 안정성: 데이터의 무결성 및 기밀성을 보장.
WSS의 기본 동작
- TLS 핸드셰이크: 클라이언트와 서버 간의 TLS 핸드셰이크가 먼저 수행되어 안전한 연결이 설정됩니다.
- WebSocket 핸드셰이크: TLS 연결이 설정된 후 WebSocket 핸드셰이크가 수행됩니다.
- 데이터 프레임 교환: 연결이 성립되면 클라이언트와 서버는 안전한 WebSocket 연결을 통해 데이터를 주고받습니다.
WSS 구현 예시
Node.js를 사용하여 간단한 WSS 기반 채팅 애플리케이션을 만들어 보겠습니다.
서버 설정:
const https = require('https');
const fs = require('fs');
const WebSocket = require('ws');
const server = https.createServer({
cert: fs.readFileSync('path/to/cert.pem'),
key: fs.readFileSync('path/to/key.pem')
});
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
console.log('received: %s', message);
});
ws.send('something');
});
server.listen(8080, () => {
console.log('Server is running on port 8080');
});클라이언트 설정:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Secure Example</title>
</head>
<body>
<script>
const socket = new WebSocket('wss://server.example.com');
socket.addEventListener('open', (event) => {
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server ', event.data);
});
</script>
</body>
</html>결론
WebSocket과 WebSocket Secure는 실시간 통신을 구현하는 데 매우 유용한 도구입니다. WebSocket은 낮은 오버헤드로 실시간 양방향 통신을 가능하게 하며, WebSocket Secure는 여기에 보안을 추가합니다. 이 글을 통해 WebSocket과 WSS의 기본 개념과 구현 방법을 이해하고, 실시간 애플리케이션에 적용할 수 있기를 바랍니다.