initial stompClient integration

package-lock.json

@@ -8,6 +8,7 @@
       "name": "epq-web-project",
       "version": "0.1.0",
       "dependencies": {
+        "@stomp/stompjs": "^7.0.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -3349,6 +3350,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.0.0.tgz",
+      "integrity": "sha512-fGdq4wPDnSV/KyOsjq4P+zLc8MFWC3lMmP5FBgLWKPJTYcuCbAIrnRGjB7q2jHZdYCOD5vxLuFoKIYLy5/u8Pw=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/Chat/Chat.tsx

@@ -1,22 +1,12 @@
 import React from "react";
 import { Attachment, Avatar, ChatMessage, ServerMsgType, User } from "./ChatMessage";
 import { connect } from "http2";
+import { Message } from "./Message";
+import { Client, Stomp } from "@stomp/stompjs";
 const domain = "localhost"
 const port = "8080"
-const connectionAddress = `ws://${domain}:${port}`
+const connectionAddress = `ws://${domain}:${port}/ws`
-const Message = (
+const stompClient = new Client()
-    {
-        sender,
-        text,
-    }:
-    {
-        sender: string
-        text: string,
-    }
-    ): React.ReactElement<{sender: string, text: string}> => {
-    
-    return (<p>Message from {sender}: {text}</p>)
-}
 const Chat = (
     {
         user
@@ -29,6 +19,7 @@ const Chat = (
     const msgWrapperClassName = "msg-wrapper"
     const connection = new WebSocket(connectionAddress)
     const sendDataButtonHandler = (ev: React.MouseEvent) => {
+        console.log("WebSockets handler invoked.")
         ev.preventDefault()
         const entryElement: HTMLInputElement = document.getElementById("data-entry") as HTMLInputElement
         const messageData = 
@@ -65,7 +56,7 @@ const Chat = (
             <div className={msgWrapperClassName}>
             {messageElementsArray}
             </div>
-            <span><input id="data-entry"></input><button onClick={ev => sendDataButtonHandler}></button></span>
+            <span><input id="data-entry"></input><button onClick={ev => sendDataButtonHandler(ev)}>Send</button></span>
         </div>
     )
 }

src/Chat/Message.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const Message = (
+    {
+        sender, text,
+    }: {
+        sender: string;
+        text: string;
+    }
+): React.ReactElement<{ sender: string; text: string; }> => {
+
+    return (<p>Message from {sender}: {text}</p>);
+};