Socket.io를 사용하여 실시간 메모 어플리케이션 구현하기

Socket.io는 JavaScript를 사용하여 실시간 웹 애플리케이션을 구현하는 데 사용되는 라이브러리입니다. 이를 이용하여 실시간 메모 어플리케이션을 구현하는 방법에 대해 알아보겠습니다.

1. 소켓 서버 설정

먼저, 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('새로운 클라이언트가 연결되었습니다.');

  socket.on('disconnect', () => {
    console.log('클라이언트가 연결을 해제하였습니다.');
  });
});

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

위 코드는 Express를 사용하여 간단한 HTTP 서버를 생성합니다. Socket.io를 통해 클라이언트와의 연결을 관리하기 위해 io.on('connection') 이벤트를 사용합니다. 클라이언트와의 연결이 성립되면 ‘새로운 클라이언트가 연결되었습니다.’라는 메시지를 콘솔에 출력하고, 연결이 해제되면 ‘클라이언트가 연결을 해제하였습니다.’라는 메시지를 출력합니다.

2. 클라이언트 연결

이제 클라이언트에서 서버에 연결하고 실시간 메모 어플리케이션을 구현할 차례입니다. HTML 파일에 다음과 같은 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 메모</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <textarea id="memo"></textarea>
  
  <script>
    const socket = io();

    const memoTextarea = document.getElementById('memo');

    memoTextarea.addEventListener('input', () => {
      const memo = memoTextarea.value;
      socket.emit('updateMemo', memo);
    });

    socket.on('memoUpdated', (memo) => {
      memoTextarea.value = memo;
    });
  </script>
</body>
</html>

위 코드는 Socket.io JavaScript 파일을 불러오고, <textarea> 요소를 추가합니다. JavaScript 코드에서는 Socket.io 클라이언트와 서버에 연결하기 위한 io() 함수를 호출합니다. <textarea>의 내용이 변경될 때마다 updateMemo 이벤트를 서버로 전송하고, 서버에서는 memoUpdated 이벤트를 클라이언트로 보내 실시간으로 메모 내용을 갱신합니다.

3. 어플리케이션 실행

위의 코드를 모두 작성한 후에는 명령 프롬프트를 열고 프로젝트 디렉토리로 이동한 다음, 아래의 명령어로 필요한 패키지들을 설치합니다.

npm install express http socket.io

이후 server.js 파일이 있는 디렉토리에서 다음의 명령어를 실행하여 서버를 실행합니다.

node server.js

웹 브라우저에서 http://localhost:3000에 접속하면 실시간 메모 어플리케이션이 실행됩니다. 여러 클라이언트가 연결되어 있을 때 하나의 클라이언트에서 메모를 수정하면 나머지 클라이언트의 메모 내용도 함께 갱신되는 것을 확인할 수 있습니다.

이제 Socket.io를 사용하여 실시간 메모 어플리케이션을 구현할 수 있습니다. Socket.io의 다양한 기능을 활용하면 추가적인 기능들도 구현할 수 있으니, 공식 문서를 참고해보시기 바랍니다.

Socket.io를 사용하여 실시간 메모 어플리케이션 구현하기

1. 소켓 서버 설정

2. 클라이언트 연결

3. 어플리케이션 실행

참고 자료