[Node]Instagram Clone - 13. Socket.io를 활용한 댓글 및 게시물 좋아요 알림 기능 구현

• 이번 글에서는 Socket.IO를 사용해 게시물과 댓글에 좋아요를 추가하면 실시간으로 알림을 보내는 기능을 구현함.
• 클라이언트는 즉시 좋아요가 반영된 정보를 받을 수 있음.

1. 서버 코드

1) 기존의 server.js 수정

• 서버에서 Socket.IO를 초기화하고 클라이언트와의 연결을 관리.
• 좋아요가 발생하면 like-post와 like-comment 이벤트를 클라이언트에게 전송합니다.

// 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");
    });
  });
}

function emitComment(data) {
  if (!io) {
    console.error("Socket.io is not initialized.");
    return;
  }
  io.emit("new-comment", data); // 이벤트 발생
  console.log("Emitted new-comment event:", data); // 이벤트 발생 후 로그 추가
}

function emitCommentLike(data) {
  if (!io) {
    console.error("Socket.io is not initialized.");
    return;
  } else {
    io.emit("like-comment", data);
    console.log("Emitting like-comment event:", data);
  }
}

function emitPostLike(data) {
  if (!io) {
    console.error("Socket.io is not initialized.");
    return;
  } else {
    io.emit("like-post", data);
    console.log("Emitting like-post event:", data);
  }
}

module.exports = { initSocket, emitComment, emitCommentLike, emitPostLike };

2) 기존의 likePost.js와 likeComment.js 수정(이벤트 발생)

• 게시물과 댓글에 좋아요가 눌리면, 각각 emitLikePost와 emitLikeComment 함수가 호출되어 Socket.IO를 통해 관련 정보를 클라이언트로 전송

likePost.js

// likePost.js
const { emitLikePost } = require("../../server");

router.post("/:postId/like", auth, async (req, res) => {
  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 index = post.likes.indexOf(userId);
    if (index > -1) {
      post.likes.splice(index, 1); // 좋아요 취소
    } else {
      post.likes.push(userId); // 좋아요 추가
    }

    await post.save();

    emitLikePost({
      postId: postId,
      userId: userId,
      likeCount: post.likes.length,
    });

    return res.status(200).json({
      message: "좋아요가 성공적으로 처리되었습니다.",
      likeCount: post.likes.length,
    });
  } catch (error) {
    return res.status(500).json({
      message: "좋아요 처리 중 오류가 발생했습니다.",
      error: error.message,
    });
  }
});

module.exports = router;

likeComment.js

// likeComment.js
const { emitLikeComment } = require("../../server");

router.post("/:commentId/like", auth, async (req, res) => {
  const commentId = req.params.commentId;
  const userId = req.user._id;

  try {
    const comment = await Comment.findById(commentId);
    if (!comment) {
      return res.status(404).json({ message: "댓글을 찾을 수 없습니다." });
    }

    // 이미 좋아요가 눌려있다면 좋아요 취소
    const index = comment.likes.indexOf(userId);
    if (index > -1) {
      comment.likes.splice(index, 1); // 좋아요 취소
    } else {
      comment.likes.push(userId); // 좋아요 추가
    }

    await comment.save();

    emitLikeComment({
      commentId: commentId,
      userId: userId,
      likeCount: comment.likes.length,
    });

    return res.status(200).json({
      message: "댓글 좋아요가 성공적으로 처리되었습니다.",
      likeCount: comment.likes.length,
    });
  } catch (error) {
    return res.status(500).json({
      message: "댓글 좋아요 처리 중 오류가 발생했습니다.",
      error: error.message,
    });
  }
});

module.exports = router;

 

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

// 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); // 서버로부터 받은 데이터 출력

});

// 서버에서 "like-comment" 이벤트 수신
socket.on("like-comment", (data) => {
  console.log("댓글을 좋아합니다!");
  console.log(data); // 서버로부터 받은 좋아요 알림 데이터 출력
});

// 서버에서 "like-post" 이벤트 수신
socket.on("like-post", (data) => {
  console.log("게시물을 좋아합니다!");
  console.log(data); // 서버로부터 받은 좋아요 알림 데이터 출력
});

 

3. 결과 🎉