HTML5 웹 소켓(WebSockets)
웹 소켓의 개념과 필요성(Concept and Necessity of WebSockets)
웹 소켓(WebSockets)은 HTML5에서 제공하는 양방향 통신 프로토콜로, 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있습니다. HTTP의 요청-응답 방식과 달리, 웹 소켓은 연결이 한 번 성립되면 클라이언트와 서버 간에 지속적인 데이터 통신이 가능해집니다.
필요성:
- 실시간 애플리케이션: 채팅 애플리케이션, 온라인 게임, 실시간 데이터 피드 등의 구현에 적합.
- 네트워크 효율성: HTTP보다 적은 오버헤드로 양방향 통신을 제공, 네트워크 사용량 감소.
- 빠른 응답 시간: 지속적인 연결을 통해 빠른 응답을 제공.
웹 소켓 API(WebSocket API)
웹 소켓 API는 JavaScript에서 웹 소켓을 쉽게 사용할 수 있도록 도와줍니다. 웹 소켓 객체는 WebSocket 생성자를 통해 생성되며, 다양한 이벤트와 메서드를 제공합니다.
주요 메서드:
WebSocket(url): 웹 소켓 객체를 생성하고 서버에 연결.send(data): 서버로 데이터를 전송.close(): 연결을 종료.
주요 이벤트:
open: 연결이 성립되었을 때 발생.message: 서버로부터 메시지를 받을 때 발생.error: 통신 중 오류가 발생할 때 발생.close: 연결이 종료되었을 때 발생.
실시간 양방향 통신 구현(Implementing Real-Time Bidirectional Communication)
웹 소켓을 사용하면 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있습니다. 다음은 웹 소켓을 사용한 간단한 실시간 채팅 애플리케이션의 예제입니다.
예제: 실시간 채팅 클라이언트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실시간 채팅</title>
<script>
let socket;
function init() {
socket = new WebSocket('ws://localhost:8080');
socket.onopen = function(event) {
console.log('연결이 성립되었습니다.');
};
socket.onmessage = function(event) {
const messages = document.getElementById('messages');
const message = document.createElement('li');
message.textContent = event.data;
messages.appendChild(message);
};
socket.onclose = function(event) {
console.log('연결이 종료되었습니다.');
};
socket.onerror = function(event) {
console.error('오류가 발생하였습니다:', event);
};
}
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
socket.send(message);
input.value = '';
}
</script>
</head>
<body onload="init()">
<h1>실시간 채팅</h1>
<ul id="messages"></ul>
<input type="text" id="messageInput">
<button onclick="sendMessage()">전송</button>
</body>
</html>
웹 소켓 서버와 클라이언트 예제(WebSocket Server and Client Example)
웹 소켓 서버 예제 (Node.js 사용)
// server.js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', socket => {
console.log('클라이언트가 연결되었습니다.');
socket.on('message', message => {
console.log('받은 메시지:', message);
// 모든 클라이언트에게 메시지 전송
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
socket.on('close', () => {
console.log('클라이언트 연결이 종료되었습니다.');
});
socket.on('error', error => {
console.error('오류가 발생하였습니다:', error);
});
});
console.log('웹 소켓 서버가 포트 8080에서 실행 중입니다.');
웹 소켓 클라이언트 예제
위에서 제공된 HTML 클라이언트 예제는 ws://localhost:8080 URL로 웹 소켓 서버에 연결합니다. 사용자가 메시지를 입력하고 전송 버튼을 클릭하면 메시지가 서버로 전송되고, 서버는 받은 메시지를 다시 모든 클라이언트에게 브로드캐스트합니다.
웹 소켓을 사용하면 HTTP의 요청-응답 모델보다 효율적이고 실시간성이 높은 양방향 통신을 구현할 수 있습니다. 이를 통해 채팅 애플리케이션, 실시간 데이터 대시보드, 멀티플레이어 게임 등 다양한 실시간 애플리케이션을 구축할 수 있습니다.