Socket.io를 사용하여 실시간 스트리밍 채팅 구현하기

Socket.io는 JavaScript로 작성된 실시간 웹 어플리케이션을 구축하기 위한 라이브러리입니다. 이를 활용하여 실시간 스트리밍 채팅 기능을 구현할 수 있습니다. 이 글에서는 Socket.io를 이용하여 어떻게 실시간 스트리밍 채팅을 구현하는지 알아보겠습니다.

1. Socket.io 설치하기

먼저, Socket.io를 설치해야 합니다. 프로젝트 폴더에서 npm을 사용하여 다음 명령어를 실행하세요:

npm install socket.io --save

2. 서버 측 코드 작성하기

다음으로는 서버 측에서 Socket.io를 초기화 하고 클라이언트로 메시지를 보내는 코드를 작성해야 합니다. 다음은 간단한 예시 코드입니다:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('A user connected');
  
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
  
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

http.listen(3000, () => {
  console.log('Server is running on port 3000');
});

위 코드는 서버를 초기화하고 클라이언트로부터 메시지를 받아서 다시 전체 클라이언트로 메시지를 보내는 간단한 코드입니다. io.on('connection')은 클라이언트가 연결되었을 때의 이벤트를 처리하는 부분이며, socket.on('chat message')는 클라이언트로부터 받은 메시지를 처리하는 부분입니다.

3. 클라이언트 측 코드 작성하기

클라이언트 측에서는 Socket.io를 초기화하고 서버로부터 받은 메시지를 표시하는 코드를 작성해야 합니다. 다음은 간단한 예시 코드입니다:

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Chat</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    
    socket.on('chat message', (msg) => {
      const messageElement = document.createElement('li');
      messageElement.textContent = msg;
      document.getElementById('messages').appendChild(messageElement);
    });
    
    function sendMessage() {
      const message = document.getElementById('messageInput').value;
      socket.emit('chat message', message);
      document.getElementById('messageInput').value = '';
    }
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input id="messageInput" type="text" autocomplete="off" />
  <button onclick="sendMessage()">Send</button>
</body>
</html>

위 코드는 HTML 파일 내에 작성되어 있습니다. 클라이언트는 서버로부터 메시지를 받으면 화면에 표시하고, 메시지를 입력하고 전송버튼을 클릭하면 서버로 메시지를 보내는 기능을 구현하고 있습니다.

4. 서버 실행하기

이제 서버를 실행해보겠습니다. 프로젝트 폴더에서 다음 명령어를 실행하세요:

node <서버파일.js>

위 명령어를 실행하고 웹 브라우저에서 http://localhost:3000에 접속하면 실시간 스트리밍 채팅 기능이 구현된 페이지를 확인할 수 있습니다.

결론

위에서 설명한 방법을 통해 Socket.io를 사용하여 실시간 스트리밍 채팅 기능을 구현할 수 있습니다. Socket.io를 사용하면 간단한 코드로 실시간 웹 어플리케이션을 구축할 수 있어 개발자들에게 많은 편리함을 제공합니다.

참고자료

Socket.io 공식 문서: https://socket.io/docs/
Express.js 공식 웹사이트: http://expressjs.com/