이번 강좌에서는 Node.js의 Express 프레임워크와 Socket.io 라이브러리를 사용하여 실시간 통신을 구현하는 방법에 대해 알아보겠습니다. 실시간 통신은 사용자와 시스템 간의 즉각적인 데이터 전송을 가능하게 하여, 웹애플리케이션의 사용자 경험을 크게 향상시킵니다. 예를 들어, chatting application이나 실시간 데이터 대시보드와 같은 시스템에서 유용하게 사용됩니다.
1. Socket.io란?
Socket.io는 웹 소켓을 기반으로 한 실시간 양방향 통신을 위한 JavaScript 라이브러리입니다. Socket.io는 클라이언트와 서버 간의 실시간 연결을 생성하고, 이를 통해 데이터를 실시간으로 전송할 수 있게 해줍니다. 이 라이브러리는 웹 소켓, HTTP Long Polling 등 여러 전송 방법을 지원합니다.
1.1 특징
- 실시간 양방향 통신 지원
- 이벤트 기반 API
- 모든 브라우저 지원
- 자동 재연결 기능
2. 환경 설정
이제 Express와 Socket.io를 설치하고 기본적인 서버를 설정해 보겠습니다. Node.js가 설치되어 있어야 합니다. 만약 설치되어 있지 않다면, Node.js 공식 웹사이트(nodejs.org)에서 다운로드하여 설치할 수 있습니다.
2.1 프로젝트 초기화
mkdir socketio-example
cd socketio-example
npm init -y2.2 필요한 패키지 설치
npm install express socket.io3. 서버 및 클라이언트 생성
이제 기본적인 Express 서버를 생성하고 Socket.io를 연결하겠습니다.
3.1 Express 서버 설정
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);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('새로운 클라이언트 연결됨');
socket.on('disconnect', () => {
console.log('클라이언트 연결 해제');
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`서버가 http://localhost:${PORT}에서 실행 중`);
});3.2 클라이언트 HTML 파일 생성
서버의 기본 페이지로 사용할 index.html 파일을 생성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Socket.io 예제</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('connect', () => {
console.log('서버에 연결됨');
});
</script>
</head>
<body>
<h1>Socket.io와 함께하는 실시간 통신</h1>
</body>
</html>3.3 서버 실행
이제 서버를 실행해 보겠습니다.
node index.js서버가 실행 중인 상태에서 브라우저에서 http://localhost:3000으로 이동하면 “Socket.io와 함께하는 실시간 통신”이라는 문구가 표시되는 웹 페이지를 볼 수 있을 것입니다.
4. 기본 이벤트 통신 구현
이제 Socket.io의 기본적인 스트림을 사용하여 클라이언트와 서버 간의 메시지를 주고받는 기능을 구현해 보겠습니다.
4.1 메시지 전송
서버 코드 수정
io.on('connection', (socket) => {
console.log('새로운 클라이언트 연결됨');
socket.on('chat message', (msg) => {
console.log('메시지 수신: ' + msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('클라이언트 연결 해제');
});
});클라이언트 코드 수정
<body>
<h1>Socket.io와 함께하는 실시간 통신</h1>
<ul id="messages"></ul>
<form id="form" action="<!---->" onsubmit="sendMessage(event)">
<input id="m" autocomplete="off" />
<button>전송</button>
</form>
<script>
const socket = io();
function sendMessage(event) {
event.preventDefault();
const input = document.getElementById('m');
socket.emit('chat message', input.value);
input.value = '';
return false;
}
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>4.2 결과 확인
서버를 재실행하고 http://localhost:3000에 접속한 후, 메시지를 전송하면 클라이언트 간에 메시지가 실시간으로 전송되는 것을 볼 수 있습니다.
5. Room 기능 구현
Socket.io의 강력한 기능 중 하나는 방(Room) 기능입니다. 이를 통해 여러 개의 방을 만들어 특정 클라이언트만 메시지를 수신하도록 할 수 있습니다.
5.1 방 만들기
io.on('connection', (socket) => {
console.log('새로운 클라이언트 연결됨');
socket.on('join room', (room) => {
socket.join(room);
console.log(`방 ${room}에 접속함.`);
});
socket.on('chat message', (msg) => {
const room = msg.room;
const message = msg.message;
console.log(`방 ${room}에 메시지 수신: ${message}`);
io.to(room).emit('chat message', message);
});
socket.on('disconnect', () => {
console.log('클라이언트 연결 해제');
});
});5.2 클라이언트 방 입장 기능 추가
const roomInput = document.getElementById('room-input');
socket.emit('join room', roomInput.value);
socket.emit('chat message', { room: roomInput.value, message: input.value });5.3 결과 확인
방 기능 추가 후, 특정 방에 들어가서 메시지를 주고받을 수 있는지 확인해 보세요.
6. 결론
이번 강좌에서는 Express와 Socket.io를 사용하여 실시간 통신을 구현하는 방법에 대해 알아보았습니다. 실시간 채팅이나 데이터 전송을 필요로 하는 다양한 애플리케이션에서 이 기술을 활용할 수 있습니다.
실시간 통신을 구현하면서 여성화된 성격의 사용자 경험을 제공할 수 있으며, 더 나아가 웹 소켓을 통해 다양한 기능을 확장할 수 있습니다. Socket.io와 Express 조합을 이용한 실시간 통신의 가능성은 무궁무진합니다.
7. 더 알아보기
추가적인 자료나 포괄적인 Socket.io의 기능들을 탐구하고 싶다면 공식 문서(socket.io/docs)를 방문해 보세요. 자주 묻는 질문(FAQ) 섹션이나 다양한 예제 코드도 확인할 수 있습니다.