Colin's Blog
[javascript] Socket.io를 사용하여 실시간 공유 도큐먼트 편집기를 어떻게 구현할 수 있나요?

소개

실시간 공유 도큐먼트 편집기는 여러 사용자가 동시에 문서를 편집할 수 있는 기능을 제공합니다. 이를 위해 Socket.io를 사용하여 실시간 데이터 통신을 구현할 수 있습니다. Socket.io는 웹 소켓을 기반으로 작동하며, 클라이언트와 서버 간의 양방향 실시간 데이터 통신을 가능하게 해줍니다.

구현 단계

1. 프로젝트 설정

가장 먼저, 프로젝트를 위한 폴더를 생성하고, 필요한 의존성을 설치해야 합니다. 아래 명령어를 사용하여 프로젝트를 설정합니다.

mkdir realtime-editor
cd realtime-editor
npm init -y
npm install express socket.io

2. 서버 구현

다음으로, 서버 파일을 생성하고, Express와 Socket.io를 사용하여 실시간 통신을 처리하는 서버를 구현해야 합니다. 아래는 간단한 예시 코드입니다.

// server.js
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('New client connected');

  socket.on('document_update', (data) => {
    console.log('Document updated:', data);

    // 변경된 문서 데이터를 연결된 모든 클라이언트에게 전송
    io.emit('document_update', data);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

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

위 코드에서 io.emit('document_update', data)는 서버에 연결된 모든 클라이언트에게 document_update 이벤트와 함께 변경된 문서 데이터를 전송합니다.

3. 클라이언트 구현

이제 클라이언트 측에서도 Socket.io를 사용하여 서버와 실시간 통신을 구현해야 합니다. 클라이언트 코드는 다음과 같습니다.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Realtime Editor</title>
</head>
<body>
  <textarea id="editor"></textarea>

  <script src="https://cdn.socket.io/socket.io-3.1.2.min.js"></script>
  <script>
    const socket = io();

    // 편집기에서 문서가 변경되면 서버로 업데이트 요청
    document.getElementById('editor').addEventListener('input', (event) => {
      const data = event.target.value;
      socket.emit('document_update', data);
    });

    // 서버로부터 업데이트된 문서 데이터를 수신하여 편집기에 반영
    socket.on('document_update', (data) => {
      document.getElementById('editor').value = data;
    });
  </script>
</body>
</html>

위 코드에서 event.target.value는 편집기에서 발생한 변경 내용을 의미합니다. 클라이언트는 socket.emit('document_update', data)를 사용하여 서버에 변경 내용을 전송하고, socket.on('document_update', data)를 사용하여 서버로부터 업데이트된 문서 데이터를 수신합니다.

실행

프로젝트 폴더에서 다음 명령어를 사용하여 서버를 실행합니다.

node server.js

웹 브라우저에서 http://localhost:3000에 접속하면 실시간 공유 도큐먼트 편집기를 사용할 수 있습니다.

결론

이렇게 Socket.io를 사용하여 실시간 공유 도큐먼트 편집기를 구현할 수 있습니다. Socket.io의 강력한 실시간 통신 기능을 활용하면 여러 사용자가 동시에 작업하는 프로젝트에 유용하게 활용할 수 있습니다.

참고: Socket.io 공식 문서

© 2018 Colin. All rights reserved.