노드와 Socketio를 이용한 실시간 웹 애플리케이션 구현
노드와 Socketio를 이용한 실시간 웹 애플리케이션 구현
들어가기 전
웹 애플리케이션의 대부분은 사용자의 요청에 따라 응답하는 방식으로 동작합니다. 하지만 때로는 실시간으로 정보를 공유하는 애플리케이션을 구현해야 할 경우가 있습니다. 이때 사용하는 기술 중 하나가 바로 Socketio입니다. 이번 포스트에서는 노드와 Socketio를 이용해 실시간 웹 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.
Socketio란?
Socketio는 브라우저와 서버간의 실시간 양방향 통신을 가능하게 하는 JavaScript 라이브러리입니다. WebSocket, AJAX Long Polling, AJAX Multi-part Streaming 등 다양한 프로토콜을 지원하며, 브라우저와 서버 모두에서 사용할 수 있습니다.
노드와 Socketio 설치하기
Socketio를 사용하기 위해서는 먼저 노드와 Socketio를 설치해야 합니다. 아래의 명령어를 터미널에 입력하여 노드와 Socketio를 설치해주세요.
npm install socket.io간단한 채팅 애플리케이션 만들기
간단한 채팅 애플리케이션을 만들어보겠습니다. 먼저 server.js 파일을 생성하여 아래와 같이 코드를 작성해주세요.
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
1. 먼저 라이브러리를 불러옵니다.
2. io 함수를 실행하고, 포트 3000으로 서버를 시작합니다.
3. connection 이벤트가 발생하면, 클라이언트와 소켓 객체를 연결합니다.
4. 클라이언트에서 “chat message”라는 이벤트가 발생하면, 해당 이벤트를 전달받고, 콘솔에 메시지를 출력합니다. 그리고 다시 “chat message” 이벤트를 모든 클라이언트들에게 보내게 됩니다.
이제 index.html 파일을 생성하여 아래와 같이 코드를 작성해주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.io 채팅 애플리케이션</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="chat-form" action="">
<input id="chat-input" type="text" autocomplete="off">
<button>Send</button>
</form>
<ul id="chat-messages"></ul>
<script>
const socket = io();
const form = $('#chat-form');
const input = $('#chat-input');
const chatMessages = $('#chat-messages');
form.submit((e) => {
e.preventDefault();
socket.emit('chat message', input.val());
input.val('');
return false;
});
socket.on('chat message', (msg) => {
const el = '<li>' + msg + '</li>';
chatMessages.append(el);
});
</script>
</body>
</html>
1. 먼저 Socketio를 불러오기 위해 /socket.io/socket.io.js 스크립트를 로드합니다.
2. index.html에서 메세지를 입력해서 서버에 보내기 위한 폼을 작성합니다.
3. 클라이언트에서 “chat message”라는 이벤트를 발생시켜 서버에 메세지를 전송합니다.
4. 서버에서 “chat message”라는 이벤트를 받으면, 모든 클라이언트들에게 메시지를 전송합니다.
5. 클라이언트에서 “chat message” 이벤트를 받으면, 메시지를 화면에 출력합니다.
이제 터미널에서 server.js를 실행하고 웹 브라우저에서 index.html을 열어보세요. 여러 개의 브라우저 창을 열어서 채팅을 시작해보면, 모든 창에서 실시간으로 대화가 가능합니다.
마치며
이번 포스트에서는 노드와 Socketio를 이용해 간단한 실시간 채팅 애플리케이션을 만드는 방법에 대해 알아보았습니다. Socketio는 다양한 프로토콜을 지원하며, 브라우저와 서버간의 실시간 양방향 통신을 가능하게 합니다. 이를 이용해 방대한 양의 데이터를 처리하거나, 사용자와 실시간으로 상호작용하는 기능을 구현하는데 활용될 수 있습니다.
키워드: 자바스크립트, 노드, Socket.io, 실시간, 웹 애플리케이션