Add status messages

Added Connected and Disconnected messages. Changed history to support different message types. Added JSON annotations to base record to allow polymorphic serialization.
kova98 · Oct 20, 2023 · f1a37a4 · f1a37a4
1 parent 6fe229e
commit f1a37a4
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 25 deletions.
diff --git a/Chat.Api/Messages.cs b/Chat.Api/Messages.cs
@@ -1,9 +1,21 @@
-namespace Chat.Api;
+using System.Text.Json.Serialization;
 
+namespace Chat.Api;
+
+// Required for polymorphic deserialization
+[JsonDerivedType(typeof(ChatMessage))]
+[JsonDerivedType(typeof(UserList))]
+[JsonDerivedType(typeof(UserConnected))]
+[JsonDerivedType(typeof(UserDisconnected))]
+[JsonDerivedType(typeof(History))]
 record Message(string Type);
 
-record ChatMessage(string Name, string Content) : Message("ChatMessage");
+record ChatMessage(string Name, string Content) : Message(nameof(ChatMessage));
+
+record UserList(string[] Users) : Message(nameof(UserList));
+
+record UserConnected(string Name) : Message(nameof(UserConnected));
 
-record UserList(string[] Users) : Message("UserList");
+record UserDisconnected(string Name) : Message(nameof(UserDisconnected));
 
-record History(ChatMessage[] Messages) : Message("History");
+record History(Message[] Messages) : Message(nameof(History));
diff --git a/Chat.Api/WebSocketService.cs b/Chat.Api/WebSocketService.cs
@@ -7,7 +7,7 @@ namespace Chat.Api;
 
 public class WebSocketService(ILogger<WebSocketService> logger)
 {
-    private static readonly ConcurrentQueue<ChatMessage> History = new();
+    private static readonly ConcurrentQueue<Message> History = new();
     private static readonly ConcurrentDictionary<string, WebSocket> Connections = new();
 
     public async Task HandleWebSocket(HttpContext context, string name)
@@ -21,10 +21,14 @@ public async Task HandleWebSocket(HttpContext context, string name)
         }
 
         Connections.TryAdd(name, socket);
-
+
+        var everyoneElse = Connections.Where(x => x.Key != name).Select(x => x.Value).ToArray();
+        var userConnected = new UserConnected(name);
+        await BroadcastMessage(userConnected, everyoneElse);
+        History.Enqueue(userConnected);
 
         await SendMessage(socket, new History(History.ToArray()));
-        await BroadcastMessage(new UserList(Connections.Keys.ToArray()));
+        await SendMessage(socket, new UserList(Connections.Keys.ToArray()));
 
         try
         {
@@ -73,9 +77,10 @@ await Receive(socket, async (result, buffer) =>
 
     private async Task RemoveUser(string name)
     {
-        logger.LogInformation("User '{name}' disconnected.", name);
         Connections.TryRemove(name, out _);
-        await BroadcastMessage(new UserList(Connections.Keys.ToArray()));
+        var msg = new UserDisconnected(name);
+        History.Enqueue(msg);
+        await BroadcastMessage(msg);
     }
 
     private static async Task Receive(WebSocket socket, Action<WebSocketReceiveResult, ArraySegment<byte>> handleMessage)
@@ -88,7 +93,7 @@ private static async Task Receive(WebSocket socket, Action<WebSocketReceiveResul
         }
     }
 
-    private async Task SendMessage(WebSocket socket, object message)
+    private async Task SendMessage(WebSocket socket, Message message)
     {
         logger.LogInformation("Sending message: {message}", message);
 
@@ -97,19 +102,20 @@ private async Task SendMessage(WebSocket socket, object message)
         await socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
     }
 
-    private async Task BroadcastMessage(object message)
+    private async Task BroadcastMessage(Message message, IEnumerable<WebSocket>? receivers = null)
     {
         logger.LogInformation("Broadcasting message: {message}", message);
 
-        foreach (var (key, socket) in Connections)
+        var messageString = JsonSerializer.Serialize(message);
+        var buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(messageString));
+
+        foreach (var socket in receivers ?? Connections.Values)
         {
             if (socket.State != WebSocketState.Open)
             {
                 continue;
             }
 
-            var messageString = JsonSerializer.Serialize(message);
-            var buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(messageString));
             await socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
         }
     }

diff --git a/web-client/app.js b/web-client/app.js
@@ -21,12 +21,12 @@ function enableEnterToSubmit(input, action) {
     });
 }
 
-function connect () {
+function connect() {
     name = nameInput.value.trim();
     const nameParam = encodeURIComponent(name);
     socket = new WebSocket(serverAddress + '/ws?name=' + nameParam);
     setStatus('Connecting...');
-    
+
     socket.onopen = function (event) {
         goToChat();
         messageInput.focus();
@@ -35,7 +35,7 @@ function connect () {
     socket.onerror = function (event) {
         setStatus('Could not reach server.');
     }
- 
+
     socket.onmessage = function (event) {
         const message = JSON.parse(event.data);
         switch (message.Type) {
@@ -48,7 +48,13 @@ function connect () {
             case 'History':
                 handleHistory(message);
                 break;
-            default: 
+            case 'UserConnected':
+                handleUserConnected(message);
+                break;
+            case 'UserDisconnected':
+                handleUserDisconnected(message);
+                break;
+            default:
                 console.log('Unknown message type: ' + message.Type);
         }
     };
@@ -63,11 +69,38 @@ function connect () {
 
 function handleHistory(message) {
     for (let i = 0; i < message.Messages.length; i++) {
-        handleChatMessage(message.Messages[i]);
+        switch (message.Messages[i].Type) {
+            case 'ChatMessage':
+                handleChatMessage(message.Messages[i]);
+                break;
+            case 'UserConnected':
+                handleUserConnected(message.Messages[i]);
+                break;
+            case 'UserDisconnected':
+                handleUserDisconnected(message.Messages[i]);
+                break;
+            default:
+                console.log('Unknown message type: ' + message.Messages[i].Type);
+        }
     }
 }
 
-function handleUserList(message){
+function handleUserConnected(message) {
+    users.push(message.Name);
+    updateUsersDisplay();
+    addMessage('* ' + message.Name + ' connected.', 'status-message');
+}
+
+function handleUserDisconnected(message) {
+    const index = users.indexOf(message.Name);
+    if (index > -1) {
+        users.splice(index, 1);
+    }
+    updateUsersDisplay();
+    addMessage('* ' + message.Name + ' disconnected.', 'status-message');
+}
+
+function handleUserList(message) {
     users = message.Users;
     updateUsersDisplay();
 }
@@ -87,10 +120,14 @@ function updateUsersDisplay() {
 }
 
 function handleChatMessage(messageObject) {
+    const text = messageObject.Name + ': ' + messageObject.Content;
+    addMessage(text);
+}
+function addMessage(text, type) {
     const message = document.createElement('div');
-    message.innerText = messageObject.Name + ': ' + messageObject.Content;
-    message.className = 'message';
-
+    message.innerText = text;
+    message.className = type || 'message';
+    
     const messages = document.getElementById('messages');
     messages.appendChild(message);
     messages.scrollTop = messages.scrollHeight
@@ -100,7 +137,7 @@ function sendMessage() {
     const messageInput = document.getElementById('messageInput');
     const messageText = messageInput.value.trim();
     if (name && messageText) {
-        const messageObj = { Type: 'ChatMessage', Name: name, Content: messageText}
+        const messageObj = {Type: 'ChatMessage', Name: name, Content: messageText}
         socket.send(JSON.stringify(messageObj));
         messageInput.value = '';
         messageInput.focus();

diff --git a/web-client/styles.css b/web-client/styles.css
@@ -31,7 +31,6 @@ body {
     max-width: 300px;
 }
 
-
 .status {
     margin-bottom: 12px;
     color: var(--font-color);
@@ -125,6 +124,10 @@ h1 {
     overflow-wrap: break-word;
 }
 
+.status-message {
+    color: grey;
+}
+
 .input-section {
     margin-top: 16px;
 }