[javascript] Socket.io를 사용하여 실시간 이슈 트래커를 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

Socket.io는 자바스크립트를 통해 양방향 통신을 가능하게 하는 라이브러리입니다. 이를 활용하여 실시간 이슈 트래커를 구현할 수 있습니다. 실시간 이슈 트래커는 사용자가 작성한 이슈를 실시간으로 추적하고, 다른 사용자들과 즉각적으로 공유하는 기능을 제공합니다.

다음은 Socket.io를 사용하여 실시간 이슈 트래커를 구현하는 간단한 예시 코드입니다.

서버 측 구현

먼저, 서버 측에서 Socket.io를 설정하고 클라이언트의 연결을 처리해야 합니다. 다음은 Express.js를 사용하여 서버를 구현하는 예시 코드입니다.

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);

// 클라이언트의 연결을 처리하는 핸들러
io.on("connection", (socket) => {
  console.log("사용자가 연결되었습니다.");

  // 클라이언트로부터 이슈 생성 이벤트를 받음
  socket.on("createIssue", (issue) => {
    // 이슈를 다른 연결된 클라이언트들에게 보냄
    io.emit("newIssue", issue);
  });

  // 클라이언트의 연결이 끊어지는 경우 처리하는 핸들러
  socket.on("disconnect", () => {
    console.log("사용자가 연결을 끊었습니다.");
  });
});

// 서버를 시작함
http.listen(3000, () => {
  console.log("서버가 시작되었습니다.");
});

클라이언트 측 구현

이제 클라이언트 측에서 Socket.io를 사용하여 서버와 통신하면서 이슈를 생성하고 실시간으로 업데이트할 수 있습니다. 다음은 HTML과 JavaScript로 이슈 트래커 클라이언트를 구현하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 이슈 트래커</title>
</head>
<body>
  <h1>이슈 트래커</h1>

  <h2>이슈 생성</h2>
  <form id="issueForm">
    <input type="text" id="issueTitle" placeholder="이슈 제목" />
    <input type="submit" value="생성" />
  </form>

  <h2>이슈 목록</h2>
  <ul id="issueList"></ul>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
  <script>
    const socket = io();

    // 이슈 생성 폼 제출 이벤트 핸들러
    document.getElementById("issueForm").addEventListener("submit", (event) => {
      event.preventDefault();
      const issueTitle = document.getElementById("issueTitle").value;
      socket.emit("createIssue", { title: issueTitle });
    });

    // 이슈 생성 이벤트를 받는 핸들러
    socket.on("newIssue", (issue) => {
      const issueList = document.getElementById("issueList");
      const newIssueItem = document.createElement("li");
      newIssueItem.textContent = issue.title;
      issueList.appendChild(newIssueItem);
    });
  </script>
</body>
</html>

위의 코드 예시에서는 클라이언트에서 이슈를 생성하면 서버로 이슈 생성 이벤트를 보내고, 서버에서는 받은 이슈를 모든 클라이언트에게 업데이트하는 방식으로 구현되어 있습니다. 클라이언트는 이벤트 핸들러를 등록하여 실시간으로 업데이트된 이슈를 화면에 표시합니다.