Merge pull request #21 from Callhub-Connect/websocket-message-listener

Added incoming websocket message display
Callhub-Connect · Nov 24, 2023 · 0723763 · 0723763
2 parents b852020 + 8f7c3b8
commit 0723763
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 16 deletions.
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import PdfFileManager from "./PdfManager";
-import { sendMessageWebsocket, disconnectWebsocket } from "../websocket";
+import { sendMessageWebsocket, disconnectWebsocket, subscribeToMessages, unsubscribeFromMessages} from "../websocket";
 
 const Container = styled.div`
     height: 100vh;
@@ -124,7 +124,7 @@ const Message = styled.div`
     flex-direction: column;
 `;
 
-const MessageBubble = styled.div`
+const YourMessageBubble = styled.div`
     align-self: flex-end;
     background-color: #ffffff;
     padding: 4px 10px 0 10px;
@@ -135,14 +135,33 @@ const MessageBubble = styled.div`
     font-size: x-large;
 `;
 
-const Timestamp = styled.div`
+const IncomingMessageBubble = styled.div`
+  align-self: flex-start;
+  background-color: #FFFFFF99;
+  padding: 4px 10px 0 10px;
+  border-radius: 30px 30px 30px 0px;
+  margin-top: 10px;
+  margin-left: 10px;
+  max-width: 70%;
+  font-size: x-large;
+`;
+
+const YourTimestamp = styled.div`
     margin-top: 5px;
     margin-right: 10px;
     text-align: right;
     font-size: 12px;
     color: #666;
 `;
 
+const IncomingTimestamp = styled.div`
+    margin-top: 5px;
+    margin-left: 10px;
+    text-align: left;
+    font-size: 12px;
+    color: #666;
+`;
+
 function Chat() {
   const storedMessages = JSON.parse(sessionStorage.getItem("chatMessages"));
   const [inputMessage, setInputMessage] = useState("");
@@ -157,7 +176,7 @@ function Chat() {
 
     const now = new Date();
     const timestamp = now.toLocaleTimeString();
-    const newMessage = { message: inputMessage, timestamp };
+    const newMessage = { message: inputMessage, timestamp, sentByYou: true };
 
     // send to websocket
     sendMessageWebsocket(inputMessage)
@@ -202,6 +221,30 @@ function Chat() {
   useEffect(() => {
     // Scroll to the bottom when messages change
     scrollToBottom();
+
+    // Subscribe to incoming WebSocket messages
+    const handleIncomingMessage = (message) => {
+      const messageJSON = JSON.parse(message);
+      const now = new Date();
+      const timestamp = now.toLocaleTimeString();
+      const newMessage = {
+        message: messageJSON.message,
+        timestamp,
+        sentByYou: false, // Set to false for incoming messages
+      };
+      console.log(messageJSON.message);
+
+      const newMessages = [...messages, newMessage];
+      sessionStorage.setItem("chatMessages", JSON.stringify(newMessages));
+      setMessages(newMessages);
+    };
+
+    subscribeToMessages(handleIncomingMessage);
+
+    // Unsubscribe when the component is unmounted
+    return () => {
+      unsubscribeFromMessages(handleIncomingMessage);
+    };
   }, [messages]);
 
   return (
@@ -218,14 +261,23 @@ function Chat() {
           <PdfFileManager />
         </Left>
         <Right>
-          <MessageContainer ref={messageContainerRef}>
-              {messages.map((messageItem, index) => (
-                <Message key={index}>
-                  <MessageBubble>{messageItem.message}</MessageBubble>
-                  <Timestamp>{messageItem.timestamp}</Timestamp>
-                </Message>
-              ))}
-          </MessageContainer>
+        <MessageContainer ref={messageContainerRef}>
+          {messages.map((messageItem, index) => (
+            <Message key={index}>
+              {messageItem.sentByYou ? (
+                <>
+                  <YourMessageBubble>{messageItem.message}</YourMessageBubble>
+                  <YourTimestamp>{messageItem.timestamp}</YourTimestamp>
+                </>
+              ) : (
+                <>
+                  <IncomingMessageBubble>{messageItem.message}</IncomingMessageBubble>
+                  <IncomingTimestamp>{messageItem.timestamp}</IncomingTimestamp>
+                </>
+              )}
+            </Message>
+          ))}
+        </MessageContainer>
           <InputContainer>
             <MessageInput
               type="text"

diff --git a/src/observable.js b/src/observable.js
@@ -0,0 +1,22 @@
+class Observable {
+    constructor() {
+      this.observers = [];
+    }
+
+    addObserver(observer) {
+      this.observers.push(observer);
+    }
+
+    removeObserver(observer) {
+      this.observers = this.observers.filter((obs) => obs !== observer);
+    }
+
+    notifyObservers(data) {
+      this.observers.forEach((observer) => {
+        observer(data);
+      });
+    }
+  }
+
+  export default Observable;
+
diff --git a/src/websocket.js b/src/websocket.js
@@ -1,12 +1,16 @@
 import { Client } from "@stomp/stompjs";
 import websocket from "websocket";
+import Observable from './observable';
 
 Object.assign(global, { WebSocket: websocket.w3cwebsocket });
 
 var client;
 var role;
 var sessionId;
 
+// Create an observable instance
+const messageObservable = new Observable();
+
 export function connectWebsocket(userRole, sessionID) {
   role = userRole;
   sessionId = sessionID;
@@ -15,8 +19,8 @@ export function connectWebsocket(userRole, sessionID) {
     brokerURL: "ws://localhost:8080/callhub",
     onConnect: () => {
       client.subscribe(`/topic/message-${role}/${sessionId}`, (message) => {
-        // TODO: handle received message
-        console.log(`Received: ${message.body}`);
+        // Notify observers when a new message arrives
+        messageObservable.notifyObservers(message.body);
       });
 
       client.onWebSocketError = (error) => {
@@ -35,8 +39,11 @@ export function connectWebsocket(userRole, sessionID) {
 }
 
 export function disconnectWebsocket() {
-  client.deactivate();
-  console.log("websocket disconnected");
+  // Check if the client is defined before calling deactivate
+  if (client) {
+    client.deactivate();
+    console.log("websocket disconnected");
+  }
 }
 
 export function sendMessageWebsocket(message) {
@@ -45,3 +52,13 @@ export function sendMessageWebsocket(message) {
     body: message,
   });
 }
+
+// Function to subscribe to WebSocket messages in the Chat component
+export function subscribeToMessages(callback) {
+  messageObservable.addObserver(callback);
+}
+
+// Function to unsubscribe from WebSocket messages in the Chat component
+export function unsubscribeFromMessages(callback) {
+  messageObservable.removeObserver(callback);
+}