Close connection when message too big, add clientside check

kova98 · Oct 20, 2023 · fd33d6c · fd33d6c
1 parent 42eb8af
commit fd33d6c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/Chat.Api/WebSocketService.cs b/Chat.Api/WebSocketService.cs
@@ -83,12 +83,19 @@ private async Task RemoveUser(string name)
         await BroadcastMessage(msg);
     }
 
-    private static async Task Receive(WebSocket socket, Action<WebSocketReceiveResult, ArraySegment<byte>> handleMessage)
+    private async Task Receive(WebSocket socket, Action<WebSocketReceiveResult, ArraySegment<byte>> handleMessage)
     {
-        var buffer = new byte[1024 * 4];
+        var buffer = new byte[1024 * 2];
         while (socket.State == WebSocketState.Open)
         {
             var result = await socket.ReceiveAsync(new ArraySegment<byte>(buffer), default);
+            if (result.EndOfMessage == false)
+            {
+                var name = Connections.FirstOrDefault(x => x.Value == socket).Key;
+                await RemoveUser(name);
+                await socket.CloseAsync(WebSocketCloseStatus.MessageTooBig, "Max message size is 2KiB.", default);
+                return;
+            }
             handleMessage(result, new ArraySegment<byte>(buffer, 0, result.Count));
         }
     }

diff --git a/web-client/app.js b/web-client/app.js
@@ -10,7 +10,30 @@ enableEnterToSubmit(nameInput, connect);
 nameInput.focus();
 
 const messageInput = document.getElementById('messageInput');
-enableEnterToSubmit(messageInput, sendMessage);
+messageInput.addEventListener('keypress', function (event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+        if (messageText.length > 256){
+            return;
+        }
+
+        event.preventDefault();
+        sendMessage();
+    }
+});
+
+messageInput.addEventListener("input", function(event) {
+    const error = document.getElementById('error-message');
+    error.hidden = true;
+    sendButton.disabled = false;
+    const messageText = messageInput.value.trim();
+    if (messageText.length > 256){
+        error.innerText = 'Message is too long';
+        error.hidden = false;
+        const sendButton = document.getElementById('sendButton');
+        sendButton.disabled = true;
+        return;
+    }
+});
 
 function enableEnterToSubmit(input, action) {
     input.addEventListener('keypress', function (event) {

diff --git a/web-client/index.html b/web-client/index.html
@@ -23,8 +23,9 @@ <h1>Chat</h1>
             <div class="chat">
                 <div id="messages"></div>
                 <div class="input-section">
+                    <div id="error-message" hidden></div>
                     <input class="input" type="text" id="messageInput" placeholder="Type a message">
-                    <button class="button" onclick="sendMessage()">Send</button>
+                    <button id="sendButton" class="button" onclick="sendMessage()">Send</button>
                 </div>
             </div>
             <div class="users-list" id="users">

diff --git a/web-client/styles.css b/web-client/styles.css
@@ -59,6 +59,15 @@ h1 {
     max-height: 40px; 
 }
 
+.button:disabled {
+    background-color: grey;
+    cursor: not-allowed;
+}
+
+.button:disabled:hover {
+    background-color: grey;
+}
+
 .button:hover {
     background-color: #E05A00;
 }
@@ -149,3 +158,6 @@ h1 {
     width: 12px; 
 }
 
+#error-message {
+    color: red;
+}