Socket.io는 실시간 웹 기술을 구현하기 위한 JavaScript 라이브러리입니다. 이를 사용하여 채팅 애플리케이션을 만들 수 있습니다. 이 문서에서는 Node.js 환경에서 Socket.io를 사용하여 간단한 채팅 애플리케이션을 만드는 방법을 안내하겠습니다.
1. 프로젝트 설정
먼저, 프로젝트를 설정하고 의존성을 설치해야 합니다. 다음 명령어를 사용하여 프로젝트 디렉토리를 생성하고 npm을 사용하여 필요한 패키지를 설치합니다.
mkdir chat-app
cd chat-app
npm init -y
npm install express socket.io
2. 서버 구현
다음으로, 서버를 구현해야 합니다. server.js 파일을 생성하고 다음 코드를 추가합니다.
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('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 listening on port 3000');
});
위 코드는 Express를 사용하여 정적 파일을 제공하고, Socket.io를 사용하여 실시간 통신을 처리하는 서버를 구현합니다. 클라이언트로부터 chat message 이벤트를 받으면 해당 메시지를 모든 클라이언트로 전송합니다. 또한, 유저가 연결 끊김 이벤트를 발생시키면 이를 콘솔에 출력합니다.
3. 클라이언트 구현
이제, 클라이언트를 구현해야 합니다. public 디렉토리를 생성하고, index.html 파일을 생성하고 다음 코드를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat App</title>
<script src="/socket.io/socket.io.js"></script>
<script src="app.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="chat-form">
<input id="message-input" autocomplete="off" />
<button>Send</button>
</form>
</body>
</html>
다음으로, app.js 파일을 생성하고 다음 코드를 추가합니다.
const socket = io();
const messageList = document.getElementById('messages');
const chatForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message-input');
chatForm.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
if (message) {
socket.emit('chat message', message);
messageInput.value = '';
messageInput.focus();
}
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messageList.appendChild(li);
});
위 코드는 클라이언트에서 Socket.io를 사용하여 서버와 통신하는 기능을 구현합니다. 사용자가 메시지를 입력하고 전송 버튼을 클릭하면 서버로 메시지를 전송하고, 서버로부터 받은 메시지를 화면에 표시합니다.
4. 실행
모든 코드 작성이 완료되면 다음 명령어를 사용하여 서버를 실행합니다.
node server.js
웹브라우저에서 http://localhost:3000을 열고, 여러 클라이언트 창을 열어서 상호간에 채팅 메시지를 주고받을 수 있습니다.
이렇게 Socket.io를 사용하여 채팅 애플리케이션을 구현할 수 있습니다. Socket.io는 손쉽게 실시간 웹 기능을 구현할 수 있도록 도와주는 강력한 라이브러리입니다.
참고문서: Socket.io 공식 문서