[javascript] 웹 소켓을 활용한 실시간 코디네이션 툴 구현

15 Dec 2023

javascript

본 포스트에서는 웹 소켓을 활용하여 실시간으로 여러 사용자들이 협업할 수 있는 코디네이션 툴을 구현하는 방법을 알아보겠습니다. 웹 소켓은 클라이언트와 서버 간에 양방향 통신을 가능하게 하는 웹 기술로, 사용자들 간의 실시간 상호작용을 구현할 수 있습니다.

1. 웹 소켓이란?

웹 소켓은 TCP 연결을 통해 양방향 통신을 제공하는 표준 프로토콜로, HTTP와는 달리 연결을 유지하면서 실시간 데이터 전송이 가능합니다. 이를 통해 실시간 채팅, 협업 툴, 실시간 게임 등 다양한 애플리케이션을 구현할 수 있습니다.

2. 웹 소켓을 활용한 실시간 코디네이션 툴 구현

2.1. 환경 설정

먼저, Node.js와 웹 소켓을 지원하는 라이브러리인 Socket.IO를 설치합니다.

npm install socket.io

2.2. 서버 구현

다음은 Node.js를 사용하여 간단한 웹 소켓 서버를 구현하는 예제 코드입니다.

// 서버 구현
const http = require('http');
const express = require('express');
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('chat message', (msg) => {
    console.log('메시지: ' + msg);
    // 모든 클라이언트에게 메시지 전송
    io.emit('chat message', msg);
  });

  // 연결 종료 시 처리
  socket.on('disconnect', () => {
    console.log('사용자가 나갔습니다.');
  });
});

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

2.3. 클라이언트 구현

웹 페이지에서 웹 소켓 클라이언트를 사용하여 서버와 실시간으로 통신하는 예제 코드입니다.

<!-- 클라이언트 구현 -->
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script>
  const socket = io('http://localhost:3000');

  // 서버로 메시지 전송
  function sendMessage() {
    const message = document.getElementById('messageInput').value;
    socket.emit('chat message', message);
  }

  // 서버로부터 메시지 수신
  socket.on('chat message', (msg) => {
    // 받은 메시지 처리
    console.log('받은 메시지: ' + msg);
  });
</script>

3. 마치며

웹 소켓을 활용하여 실시간으로 사용자들이 협업할 수 있는 코디네이션 툴을 구현하는 방법에 대해 알아보았습니다. 웹 소켓을 사용하면 마치 실제로 같은 방 안에서 소통하듯이 실시간으로 데이터를 주고받을 수 있으며, 이를 통해 사용자들의 협업 경험을 향상시킬 수 있습니다.

참고문헌: