diff --git a/app/controller/socketController.js b/app/controller/socketController.js index 8865bf7..6eabe66 100644 --- a/app/controller/socketController.js +++ b/app/controller/socketController.js @@ -1,6 +1,6 @@ const { successResponse, failResponse } = require("../common/responseFormatter"); -const { emitJoinedNewChatroom, emitSystemMessageToSocket } = require("../../socket/emitters/chatEmitter.js"); +const { emitJoinedNewChatroom, emitMannerSystemMessage } = require("../../socket/emitters/chatEmitter.js"); /** * 특정 회원의 socket을 특정 chatroomUuid room에 join @@ -53,7 +53,7 @@ function socketRoomJoin(io) { function emitSystemMessage(io) { return async (req, res) => { // request body에서 데이터를 추출 - const { memberId, content } = req.body; + const { memberId, chatroomUuid, content } = req.body; // 현재 연결된 socket 중 해당 memberId를 가진 socket 객체 list 추출 let sockets = []; @@ -67,11 +67,11 @@ function emitSystemMessage(io) { } catch (error) { res.status(500).json(failResponse("SOCKET501", "해당 memberId를 가진 socket 객체 추출 도중 에러가 발생했습니다.")); } - // memberId를 가진 socket이 존재하면, 해당 socket을 chatroom join, joined-new-chatroom event emit + // memberId를 가진 socket이 존재하면, 해당 socket 모두에게 manner-system-message event emit if (sockets.length) { for (const connSocket of sockets) { try { - emitSystemMessageToSocket(connSocket, content); + emitMannerSystemMessage(connSocket, chatroomUuid, content); } catch (error) { res.status(500).json(failResponse("SOCKET503", "memberId에 해당하는 socket이 존재하지만 system message emit에 실패했습니다.")); } diff --git a/public/scripts/socket.js b/public/scripts/socket.js index da98a70..df09e20 100644 --- a/public/scripts/socket.js +++ b/public/scripts/socket.js @@ -300,6 +300,30 @@ function setupSocketListeners() { messagesElement.appendChild(li); } }); + socket.on("manner-system-message", (response) => { + const { chatroomUuid, ...newMessage } = response.data; + + // 현재 보고 있는 채팅방에서 온 시스템 메시지인 경우 + if (chatroomUuid === currentViewingChatroomUuid) { + messagesFromThisChatroom.push(newMessage); + + console.log("============== messagesFromThisChatroom Updated =============="); + console.log(messagesFromThisChatroom); + + // 시스템 메시지 요소 동적 생성 + const messagesElement = document.getElementById("messages"); + const li = document.createElement("li"); + li.classList.add("message-item"); + li.classList.add("system-message"); + + li.innerHTML = ` +
+ `; + messagesElement.appendChild(li); + } + }); socket.on("test-matching-chatting-success", (response) => { response.data.chatroomUuid; diff --git a/socket/emitters/chatEmitter.js b/socket/emitters/chatEmitter.js index fd820a0..4e0f778 100644 --- a/socket/emitters/chatEmitter.js +++ b/socket/emitters/chatEmitter.js @@ -47,12 +47,21 @@ function emitTestMatchingChattingSuccess(io, chatroomUuid) { } /** - * 해당 socket에게 system message emit + * 해당 socket에게 manner system message emit * @param {*} socket * @param {*} messageContent */ -function emitSystemMessageToSocket(socket, messageContent) { - socket.emit("chat-system-message", formatResponse("chat-system-message", messageContent)); +function emitMannerSystemMessage(socket, chatroomUuid, messageContent) { + const systemMessage = { + chatroomUuid: chatroomUuid, + senderId: 0, + senderName: "SYSTEM", + senderProfileImg: 0, + message: messageContent, + createdAt: null, + timestamp: null, + }; + socket.emit("manner-system-message", formatResponse("manner-system-message", systemMessage)); } module.exports = { @@ -60,5 +69,5 @@ module.exports = { emitJoinedNewChatroom, emitChatSystemMessage, emitTestMatchingChattingSuccess, - emitSystemMessageToSocket, + emitMannerSystemMessage, };