Colin's Blog
[javascript] Socket.io를 사용하여 실시간 온라인 문서 서비스를 어떻게 구현할 수 있나요?

Socket.io를 사용하여 실시간 온라인 문서 서비스를 구현하는 방법에 대해 알려드리겠습니다.

  1. 의존성 설치: 먼저, 프로젝트 폴더에서 npm install socket.io 명령어를 사용하여 Socket.io를 설치합니다.

  2. 서버 설정: Node.js 서버를 설정합니다. ```javascript 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(‘updateDocument’, (data) => { // 도큐먼트 업데이트 이벤트를 다른 모든 클라이언트에게 브로드캐스팅 socket.broadcast.emit(‘documentUpdated’, data); });

// 클라이언트의 연결이 끊어졌을 때 실행되는 이벤트 처리 socket.on(‘disconnect’, () => { console.log(‘클라이언트 연결이 종료되었습니다.’); }); });

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


3. 클라이언트 설정: 이제 클라이언트 측 코드를 작성합니다.
```html
<!DOCTYPE html>
<html>
<head>
  <title>실시간 문서 서비스</title>
</head>
<body>
  <textarea id="document"></textarea>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    // 도큐먼트 업데이트 이벤트를 서버로 보내기
    document.getElementById('document').addEventListener('input', (event) => {
      socket.emit('updateDocument', event.target.value);
    });

    // 도큐먼트 업데이트 이벤트를 다른 클라이언트로부터 받기
    socket.on('documentUpdated', (data) => {
      document.getElementById('document').value = data;
    });
  </script>
</body>
</html>

위 코드에서 io() 함수 호출을 통해 WebSocket 연결을 수립하고, emit() 메서드를 사용하여 도큐먼트 업데이트 이벤트를 서버로 전송하고, on() 메서드를 사용하여 도큐먼트 업데이트 이벤트를 다른 클라이언트로부터 받습니다.

실시간 문서 서비스는 클라이언트가 도큐먼트를 수정할 때마다 서버를 통해 도큐먼트의 변경 사항을 다른 클라이언트로 전파합니다. 이를 통해 여러 사용자가 실시간으로 동시에 도큐먼트를 편집할 수 있습니다.

Socket.io를 사용하면 실시간 데이터 전송이 간편하게 처리되며, WebSocket을 통해 클라이언트와 서버 간에 양방향 통신이 가능해집니다.

참고 자료:

© 2018 Colin. All rights reserved.