Merge pull request #35 from jphacks/feat/32-isSelfMessage

isSelfMessageを追加

backend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 80
+}

backend/src/bin/websocket.ts

@@ -79,8 +79,16 @@ export default function createWebsocketServer(httpServer: HttpServer) {
         const name = users[socket.id].name;
         const addressHash = users[socket.id].addressHash;
         const format = "text";
+        const isSelfMessage = socketId === socket.id;
         console.log(socketId);
-        io.to(socketId).emit("message", name, addressHash, format, message);
+        io.to(socketId).emit(
+          "message",
+          name,
+          addressHash,
+          format,
+          message,
+          isSelfMessage
+        );
       });
     });
   });

frontend/src/app/page.tsx

@@ -8,13 +8,12 @@ import { useLayoutEffect, useRef, useState } from "react";
 import io, { Socket } from "socket.io-client";
 import Bubble from "@/components/Bubble/Bubble";
 import styles from "./page.module.scss";
+import { MessageInterface } from "@/types/interface";
 
 let socket: Socket;
 
 export default function WebSocketPage() {
-  const [messageList, setMessageList] = useState<[string, string, string][]>(
-    []
-  );
+  const [messageList, setMessageList] = useState<MessageInterface[]>([]);
   const [modalClosed, setModalClosed] = useState<boolean>(false);
   const [name, setName] = useState<string>("");
   const [names, setNames] = useState<string[]>([]);
@@ -56,9 +55,25 @@ export default function WebSocketPage() {
     // 'message' イベントをリッスンして、メッセージを受信
     socket.on(
       "message",
-      (name: string, addressHash: string, format: string, message: string) => {
-        console.log("Received messages: ", name, addressHash, message);
-        setMessageList((prev) => [...prev, [name, addressHash, message]]); // TODO: formatも追加
+      (
+        senderName: string,
+        addressHash: string,
+        format: string,
+        message: string,
+        isSelfMessage: boolean
+      ) => {
+        console.log(
+          "Received messages: ",
+          senderName,
+          addressHash,
+          format,
+          message,
+          isSelfMessage
+        );
+        setMessageList((prev) => [
+          ...prev,
+          { senderName, addressHash, format, message, isSelfMessage },
+        ]);
       }
     );
 
@@ -87,13 +102,8 @@ export default function WebSocketPage() {
         ))}
         <div>
           <h2>Received Messages: </h2>
-          {messageList.map(([senderName, addressHash, message], index) => (
-            <Bubble
-              key={index}
-              senderName={senderName}
-              addressHash={addressHash}
-              message={message}
-            />
+          {messageList.map((bubble, index) => (
+            <Bubble key={index} bubble={bubble} />
           ))}
           <div ref={scrollBottomRef} />
         </div>

frontend/src/components/Bubble/Bubble.tsx

@@ -1,19 +1,10 @@
 import React from "react";
+import { MessageInterface } from "@/types/interface";
 
-interface BubbleProps {
-  senderName: string;
-  addressHash: string;
-  message: string;
-}
-
-export default function Bubble({
-  senderName,
-  addressHash,
-  message,
-}: BubbleProps) {
+export default function Bubble({ bubble }: { bubble: MessageInterface }) {
   return (
     <p>
-      {senderName} @{addressHash} : {message}
+      {bubble.senderName} @{bubble.addressHash}: {bubble.message}
     </p>
   );
 }

frontend/src/types/interface.ts

@@ -8,3 +8,11 @@ export interface User {
   position: Position;
   groupId: number;
 }
+
+export interface MessageInterface {
+  senderName: string;
+  addressHash: string;
+  format: string;
+  message: string;
+  isSelfMessage: boolean;
+}