Render chat messages that come over the socket

core/chat/server.go

@@ -183,7 +183,12 @@ func (s *Server) HandleClientConnection(w http.ResponseWriter, r *http.Request)
 		_, _ = w.Write([]byte(events.ErrorMaxConnectionsExceeded))
 		return
 	}
-	upgrader.CheckOrigin = func(r *http.Request) bool { return true }
+
+	// To allow dev web environments to connect.
+	upgrader.CheckOrigin = func(r *http.Request) bool {
+		return true
+	}
+
 	conn, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
 		log.Debugln(err)

web/components/stores/ClientConfigStore.tsx

@@ -63,7 +63,7 @@ export function ClientConfigStore() {
   const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
   const setChatVisibility = useSetRecoilState<ChatVisibilityState>(chatVisibilityAtom);
   const setChatState = useSetRecoilState<ChatState>(chatStateAtom);
-  const setChatMessages = useSetRecoilState<ChatMessage[]>(chatMessagesAtom);
+  const [chatMessages, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessagesAtom);
   const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
   const [appState, setAppState] = useRecoilState<AppState>(appStateAtom);
   const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
@@ -106,7 +106,7 @@ export function ClientConfigStore() {
         handleConnectedClientInfoMessage(message as ConnectedClientInfoEvent);
         break;
       case SocketMessageType.CHAT:
-        handleChatMessage(message as ChatEvent);
+        handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);
         break;
       default:
         console.error('Unknown socket message type: ', message.type);
@@ -116,8 +116,8 @@ export function ClientConfigStore() {
   const getChatHistory = async () => {
     try {
       const messages = await ChatService.getChatHistory(accessToken);
-      // console.log(`ChatService -> getChatHistory() messages: \n${JSON.stringify(messages)}`);
-      setChatMessages(messages);
+      const updatedChatMessages = [...messages, ...chatMessages];
+      setChatMessages(updatedChatMessages);
     } catch (error) {
       console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
     }

web/components/stores/eventhandlers/handleChatMessage.ts

@@ -1,8 +1,11 @@
-import {
-  ChatEvent,
-  SocketEvent,
-} from '../../../interfaces/socket-events';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import { ChatEvent } from '../../../interfaces/socket-events';
 
-export default function handleChatMessage(message: ChatEvent) {
-  console.log('chat message', message);
+export default function handleChatMessage(
+  message: ChatEvent,
+  messages: ChatMessage[],
+  setChatMessages,
+) {
+  const updatedMessages = [...messages, message];
+  setChatMessages(updatedMessages);
 }

web/interfaces/socket-events.ts

@@ -30,4 +30,4 @@ export interface ConnectedClientInfoEvent extends SocketEvent {
 export interface ChatEvent extends SocketEvent {
   user: User;
   body: string;
-}
+}

web/services/websocket-service.ts

@@ -1,8 +1,6 @@
 import { message } from 'antd';
 import { SocketMessageType } from '../interfaces/socket-events';
 
-
-
 interface SocketMessage {
   type: SocketMessageType;
   data: any;
@@ -61,7 +59,7 @@ export default class WebsocketService {
 
   // On ws error just close the socket and let it re-connect again for now.
   onError(e) {
-    console.error(e)
+    console.error(e);
     handleNetworkingError(`Socket error: ${e}`);
     this.websocket.close();
     // if (!this.isShutdown) {