Fix: msg was sended different room

사용자가 메시지를 보낼 때 다른 방에도 메시지가 보내지는 이슈를 해결했습니다.
원인은 방을 생성하거나 채팅을 보낼때 전역적으로 socketsJoin을 사용하여 채팅방에 활성된 유저가 초대되었기 때문인데…
이를 해결하기 위해 사용자가 채팅방 페이지에 접속할 때 GET /room/[room_id]를 실행시킴으로써 해당 socket만 채팅방에 접속하는 로직을 추가함으로써 해당 이슈를 해결했습니다.
기존에 채팅 로그를 가져오던 API는 GET /room/[room_id]/chats 로 이동시켜 API와의 충돌을 막았습니다.

pages/api/chat/[room_id].ts

@@ -25,7 +25,6 @@ export default async (req: NextApiRequest, res: NextApiResponseServerIO) => {
     },
   });
 
-  res.socket?.server?.io?.socketsJoin(room_id);
   res?.socket?.server?.io?.to(room_id)?.emit("message", data);
 
   res.status(201).json(data);

pages/api/room/[room_id]/chats.ts

@@ -0,0 +1,20 @@
+import { NextApiRequest } from "next";
+import { NextApiResponseServerIO } from "types/next";
+import { prisma } from "lib/prisma";
+
+export default async (req: NextApiRequest, res: NextApiResponseServerIO) => {
+  const room_id = String(req.query.room_id);
+
+  if (req.method === "GET") {
+    const response = await prisma.chat.findMany({
+      where: {
+        room_id,
+      },
+    });
+
+    res.json(response);
+  } else {
+    // block if method is not supported
+    return res.status(405).end();
+  }
+};

pages/api/room/[room_id]/index.ts

@@ -1,20 +1,28 @@
 import { NextApiRequest } from "next";
 import { NextApiResponseServerIO } from "types/next";
-import { prisma } from "lib/prisma";
 
 export default async (req: NextApiRequest, res: NextApiResponseServerIO) => {
-  const room_id = String(req.query.room_id);
+  const { room_id } = req.query;
 
   if (req.method === "GET") {
-    const response = await prisma.chat.findMany({
-      where: {
-        room_id,
-      },
+    res.socket.server.io.once("connection", (socket) => {
+      console.log(`client ${socket.id} has connected`);
+
+      // do not make duplicate join chat-room
+      if (!socket.rooms.has(String(room_id))) {
+        console.log(`client ${socket.id} has joined ${room_id}`);
+        socket.join(room_id);
+      }
+
+      // handle disconnect
+      socket.on("disconnect", (reason) => {
+        console.log(`client ${socket.id} has disconnected ${reason}`);
+        socket.leave(String(room_id));
+      });
     });
 
-    res.json(response);
+    res.end();
   } else {
-    // block if method is not supported
     return res.status(405).end();
   }
 };

pages/api/room/index.ts

@@ -21,8 +21,6 @@ export default async (req: NextApiRequest, res: NextApiResponseServerIO) => {
       },
     });
 
-    res?.socket?.server?.io?.socketsJoin(response.room_id);
-
     return res.status(201).json(response);
   } else {
     return res.status(405).end();

pages/room/[room_id]/index.tsx

@@ -22,7 +22,10 @@ const user = "694bedd3-8776-40fe-be5a-584d1021ebae";
 export const getServerSideProps: GetServerSideProps<IProps> = async (ctx) => {
   const room_id = String(ctx.query.room_id);
 
-  const response = await fetch(`http://localhost:3000/api/room/${room_id}`);
+  await fetch(`http://localhost:3000/api/room/${room_id}`, {
+    method: "GET",
+  });
+  const response = await fetch(`http://localhost:3000/api/room/${room_id}/chats`);
   const msg = await response.json();
 
   return {