Gamechat im panel

Author: Christopher Strauss

src/main/client/src/feature/GameChat.jsx

@@ -0,0 +1,82 @@
+import { 
+  useState, 
+  useEffect, 
+  useCallback, 
+  useContext, 
+  useRef,
+} from "react"
+import {
+  useParams,
+} from "react-router-dom"
+import {
+  useAuthStore,
+} from "./../store.js"
+import {
+  StompContext,
+  tfetch,
+  doTry,
+} from "./../util.js"
+
+export const GameChat = () => {
+  let [messages, setMessages] = useState([]);
+  let divRef = useRef(null)
+
+  let stompClient = useContext(StompContext)
+  let { gameId } = useParams()
+  let auth = useAuthStore(state => state.auth)
+
+  useEffect(() => {
+    stompClient.subscribe("/topic/chat/" + gameId, (message) => {
+      let newMessage = JSON.parse(message.body)
+      setMessages(previous => [...previous, newMessage])
+    })
+
+    doTry(async () => {
+      let chat = await tfetch("/api/chat/" + gameId, {
+        method: "GET",
+        headers: {
+          "Authorization": "Bearer " + auth.token,
+          "Content-Type": "application/json",
+        },
+      })
+      setMessages(chat.messages || [])
+    })
+  }, [stompClient, auth, gameId])
+
+  useEffect(() => {
+    divRef.current?.scrollIntoView({behavior: 'smooth'});
+  }, [messages]);
+
+  let onSendMessage = useCallback((event) => doTry(async () => {
+    event.preventDefault()
+    let data = new FormData(event.target)
+    document.getElementById("sending").reset();
+    stompClient.publish({
+      destination: "/app/chat/send/",
+      body: JSON.stringify({
+        message: data.get("message"),
+        id: gameId,
+      }),
+    })
+  }), [ stompClient, gameId ])
+
+  return (
+
+    <div className="border border-gray-500 bg-gray-900 rounded-lg shadow relative my-1 mr-1">
+      <div>
+        <div className="max-h-80 h-80 px-2 py-1 overflow-auto">
+          {messages.map(message => (
+              <p>{message.user + ": " + message.message}</p>
+          ))}
+          <div ref={divRef} />
+        </div>
+      </div>
+      <form className="px-2 py-1" id="sending" onSubmit={onSendMessage}>
+        <input
+          type="text"
+          name="message"
+        />
+      </form>
+    </div>
+  );
+}

src/main/client/src/feature/GamePanel.jsx

@@ -31,6 +31,9 @@ import {
   useAuthStore,
   useGameStore,
 } from "../store.js"
+import {
+  GameChat,
+} from "./GameChat.jsx"
 
 export const GamePanel = ({zoom, setZoom}) => {
   return (
@@ -171,6 +174,9 @@ function Panel({zoom, setZoom}) {
           </div>
         </div>
       )}
+      <div className="absolute bottom-10 pr-2">
+        <GameChat />
+      </div>
     </>
   )
 }

src/main/java/com/bernd/ChatController.java

@@ -3,17 +3,16 @@
 import com.bernd.model.Chat;
 import com.bernd.model.ChatMessage;
 import com.bernd.model.ChatRequest;
+import com.bernd.util.Auth;
+import java.security.Principal;
 import java.util.ArrayList;
 import java.util.List;
-import java.util.Objects;
 import org.springframework.http.ResponseEntity;
 import org.springframework.messaging.core.MessageSendingOperations;
-import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.messaging.handler.annotation.MessageMapping;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 @Controller
@@ -32,14 +31,14 @@ public class ChatController {
   @ResponseBody
   @GetMapping("/api/chat/{id}")
   public Chat getChat(@PathVariable String id) {
+    System.out.println("GETCHAT " + id);
     return chats.get(id);
   }
 
-  @PostMapping("/api/send_chat")
-  public ResponseEntity<?> sendChat(@RequestBody ChatRequest chatRequest) {
-    Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
-    String user = Objects.toString(principal);
-    ChatMessage message = new ChatMessage(chatRequest.message(), user);
+  @MessageMapping("/chat/send/")
+  public ResponseEntity<?> sendChat(ChatRequest chatRequest, Principal principal) {
+    String user = Auth.getPrincipal(principal);
+    ChatMessage message = new ChatMessage(chats.chats().size(), chatRequest.message(), user);
     Chat chat = chats.get(chatRequest.id());
     if (chat != null) {
       chat.messages().add(message);
@@ -49,7 +48,7 @@ public ResponseEntity<?> sendChat(@RequestBody ChatRequest chatRequest) {
       chat = new Chat(chatRequest.id(), messages);
     }
     chats.put(chat);
-    operations.convertAndSend("/topic/chat/" + chat.id(), chat);
+    operations.convertAndSend("/topic/chat/" + chat.id(), message);
     return ResponseEntity.ok().build();
   }
 

src/main/java/com/bernd/model/ChatMessage.java

@@ -1,6 +1,7 @@
 package com.bernd.model;
 
 public record ChatMessage(
-        String message,
-        String user) {
+    int n,
+    String message,
+    String user) {
 }