6.1 WebSocket의 기본 개념
WebSocket은 하나의 TCP 연결 위에서 풀 듀플렉스 통신을 제공하는 통신 프로토콜이야. 이 프로토콜은 클라이언트와 서버 간의 양방향 데이터 전송을 가능하게 해주어 채팅, 온라인 게임, 알림 시스템과 같이 실시간 데이터 교환이 필요한 애플리케이션에 이상적이야.
WebSocket의 장점
- 양방향 통신: WebSocket은 양방향 데이터 전송을 제공하여 서버와 클라이언트가 언제든지 서로 메시지를 보낼 수 있어.
- 지연시간 감소: 전통적인 HTTP 요청에 비해 WebSocket은 지속적인 연결을 통해 지연시간을 줄여줘.
- 서버 부하 감소: WebSocket은 HTTP 요청 수를 줄여서 서버 부하를 감소시켜.
WebSocket의 주요 구성 요소
- WebSocket 서버: WebSocket 연결을 수락하고 처리하는 서버 측이야.
- WebSocket 클라이언트: 서버와 연결을 설정하고 데이터를 교환하는 클라이언트 측이야.
6.2 JavaScript에서의 WebSocket 작업
JavaScript에서 WebSocket 작업은 연결 설정, 메시지 송수신, 이벤트 처리를 위한 메서드를 제공하는 WebSocket 객체를 통해 이뤄져.
WebSocket 연결 생성:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
WebSocket 이벤트:
open: 연결이 설정되었을 때 발생해.message: 서버로부터 메시지를 받았을 때 발생해.error: 오류가 발생했을 때 발생해.close: 연결이 종료되었을 때 발생해.
WebSocket의 사용 예:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
6.3 Node.js에서 WebSocket 서버 예제
WebSocket 서버를 만들기 위해 Node.js에서 ws 라이브러리를 사용할 수 있어.
라이브러리 설치:
Terminal
npm install ws
WebSocket 서버 예제:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
6.4 WebSocket의 주요 이벤트와 메서드
클라이언트 이벤트:
onopen: WebSocket 연결이 설정되었을 때 발생해onmessage: 서버로부터 메시지를 받았을 때 발생해onclose: WebSocket 연결이 종료되었을 때 발생해onerror: WebSocket 오류가 발생했을 때 발생해
클라이언트 메서드
send(data): 서버로 데이터를 보낸다close(code, reason): 주어진 코드와 이유로 WebSocket 연결을 종료한다
서버 이벤트
connection: 클라이언트가 서버에 연결되었을 때 발생해message: 서버가 클라이언트로부터 메시지를 받았을 때 발생해close: WebSocket 연결이 종료되었을 때 발생해error: WebSocket 오류가 발생했을 때 발생해
서버 메서드
send(data): 클라이언트로 데이터를 보낸다close(code, reason): 주어진 코드와 이유로 WebSocket 연결을 종료한다
6.5 WebSocket 사용 예제
예제: 실시간 채팅
클라이언트 측:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="메시지를 입력하세요" />
<button onclick="sendMessage()">전송</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
서버 측:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// 모든 연결된 클라이언트에게 메시지를 전송
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
GO TO FULL VERSION