[Node]Instagram Clone - 12. Socket.io를 활용한 새로운 댓글 등록 알림 기능 구현

• Socket.IO를 사용해 새로운 댓글 알림 기능을 구현함.
• 클라이언트가 댓글을 남길 때마다 서버에서 실시간으로 알림을 보내게 되는데, 이를 통해 게시물에 댓글이 추가될 때마다 관련 정보가 전송되어 실시간 알림을 보낼 수 있음

1. 서버 코드

1) server.js 설정

• 서버에서 Socket.IO를 초기화하고, 클라이언트 연결을 관리하기 위한 파일을 구성함

// server.js
const socketIo = require("socket.io");

let io;

function initSocket(server) {
  io = socketIo(server);

  io.on("connection", (socket) => {
    console.log("A user connected");

    socket.on("disconnect", () => {
      console.log("User disconnected");
    });
  });
}

// emitComment 함수는 io가 초기화된 후 호출될 수 있도록 설정
function emitComment(data) {
  if (!io) {
    console.error("Socket.io is not initialized.");
    return;
  }

  console.log("Attempting to emit new-comment event...");
  io.emit("new-comment", data); // 이벤트 발생
  console.log("Emitted new-comment event:", data); // 이벤트 발생 후 로그 추가
}

module.exports = { initSocket, emitComment };

2) 기존의 Root index.js 수정

• 서버를 초기화하고, Socket.IO 서버를 설정.
• server.js 파일에서 만든 initSocket 함수로 Socket.IO를 초기화함.
• http 패키지에서 Server 객체를 가져와 express 패키지인 app을 감싸주고 이를 또 다시 Socket.IO메서드로 감싸줌

// index.js
const express = require("express");
const http = require("http");
...

// Socket.IO 연결, initSocket 함수를 가져옴
const { initSocket } = require("./server");

// 라우터
...

const app = express();
const server = http.createServer(app); // HTTP 서버 생성

// MongoDB 연결
...

// 미들웨어
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 라우트 등록
...

// 서버 초기화
initSocket(server);

// 서버 시작
server.listen(3000, () => {
  console.log(`Server is running on port 3000`);
});

module.exports = app;

3) 기존의 createComment.js 수정 (이벤트 발생)

• 댓글이 추가되면 emitComment 함수가 호출되어 Socket.IO를 통해 새로운 댓글 정보를 전송.

// createComment.js

const { emitComment } = require("../../server"); // server.js의 emit 함수 사용

router.post("/:postId", auth, async (req, res) => {
  const { text } = req.body;
  const postId = req.params.postId;
  const userId = req.user._id;

  try {
    const post = await Post.findById(postId);
    if (!post) {
      return res.status(404).json({ message: "게시물을 찾을 수 없습니다." });
    }

    const newComment = new Comment({
      post: postId,
      user: userId,
      text: text,
      createdAt: Date.now(),
    });

    await newComment.save();
    await Post.findByIdAndUpdate(postId, { $push: { comments: newComment._id } });

    emitComment({
      postId: postId,
      commentId: newComment._id,
      commentText: newComment.text,
      commenterId: userId,
    });

    return res.status(201).json({
      message: "댓글이 성공적으로 추가되었습니다.",
      comment: newComment,
    });
  } catch (error) {
    return res.status(500).json({
      message: "댓글 추가 중 오류가 발생했습니다.",
      error: error.message,
    });
  }
});

module.exports = router;

 

2. 클라이언트 코드 (임시)

• 아직 프론트쪽 구현을 안해서 기존의 Postman을 활용하려고 했는데, Postman을 사용한 테스트는 불가능했음
• 터미널에 Socket.IO 클라이언트 코드를 작성하여 이벤트가 서버에서 올바르게 전송되는지 확인했음.
• 클라이언트 기본 세팅

// client.js

const io = require("socket.io-client");

// 서버와의 소켓 연결
const socket = io("http://localhost:3000"); // 서버 URL에 맞게 수정

// 서버와 연결 성공 시
socket.on("connect", () => {
  console.log("서버에 연결되었습니다.");
});

// 서버에서 "new-comment" 이벤트 수신
socket.on("new-comment", (data) => {
  console.log("새로운 댓글이 추가되었습니다!");
  console.log(data); // 서버로부터 받은 데이터 출력
});

 

3. 결과 🎉