[javascript] Socket.io를 사용하여 어떻게 실시간 통신을 구현할 수 있나요?

27 Nov 2023

javascript

Socket.io는 실시간 웹 애플리케이션을 구축하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 웹 서버와 클라이언트 간에 양방향 통신을 구현할 수 있습니다. 웹 소켓을 기반으로 동작하며, 실시간 데이터의 전송과 이벤트 기반 통신을 제공합니다.

이제 Socket.io를 사용하여 실시간 통신을 구현하는 방법에 대해 알아보겠습니다.

필수 패키지 설치하기

먼저, Node.js 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다. 다음 명령어를 사용하여 Socket.io를 설치합니다.

npm install socket.io

서버 측 설정하기

서버 측 코드를 작성해보겠습니다.

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);

io.on('connection', (socket) => {
  console.log('새로운 클라이언트가 접속했습니다.');

  // 클라이언트로부터의 메시지 이벤트 처리하기
  socket.on('message', (data) => {
    console.log('클라이언트로부터 메시지를 받았습니다:', data);
    // 다른 클라이언트에게 메시지 전송하기
    io.emit('message', data);
  });

  // 클라이언트와의 연결 종료 이벤트 처리하기
  socket.on('disconnect', () => {
    console.log('클라이언트가 연결을 종료했습니다.');
  });
});

server.listen(3000, () => {
  console.log('서버가 3000번 포트에서 동작 중입니다.');
});

클라이언트 측 설정하기

이제 클라이언트 측 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io 예제</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Socket.io 예제</h1>

  <input type="text" id="message" placeholder="메시지 입력">
  <button onclick="sendMessage()">전송</button>

  <ul id="message-list"></ul>

  <script>
    // 서버로부터의 메시지 이벤트 처리하기
    const socket = io();
    socket.on('message', (data) => {
      const list = document.getElementById('message-list');
      const item = document.createElement('li');
      item.appendChild(document.createTextNode(data));
      list.appendChild(item);
    });

    // 메시지 전송 함수
    function sendMessage() {
      const input = document.getElementById('message');
      const message = input.value;
      socket.emit('message', message);
      input.value = '';
    }
  </script>
</body>
</html>

애플리케이션 실행하기

이제 서버와 클라이언트 코드가 준비되었습니다. 다음 명령어를 사용하여 서버를 실행합니다.

node server.js

웹 브라우저를 열고 http://localhost:3000으로 접속하면 실시간 통신이 동작하는 것을 확인할 수 있습니다. 입력한 메시지는 다른 모든 클라이언트에게 전달되고, 전달받은 메시지는 화면에 표시됩니다.

이렇게 Socket.io를 사용하여 실시간 통신을 구현할 수 있습니다. Socket.io는 다양한 기능과 이벤트를 제공하기 때문에, 더 복잡한 실시간 애플리케이션을 구현할 때 유용하게 사용할 수 있습니다.

더 자세한 내용은 Socket.io 공식 문서를 참조하시기 바랍니다.