Exception handling in backend when disconnecting. open() method for websocket in client

pac-man-board-game/ClientApp/src/classes/WebSocketService.ts

@@ -9,48 +9,59 @@ interface IWebSocket {
 }
 
 export default class WebSocketService {
-  private ws: WebSocket;
+  private ws?: WebSocket;
   private _onOpen?: VoidFunction;
   private _onReceive?: MessageEventFunction;
   private _onClose?: VoidFunction;
   private _onError?: VoidFunction;
 
   constructor({onOpen, onReceive, onClose, onError}: IWebSocket) {
+    this._onOpen = onOpen;
+    this._onReceive = onReceive;
+    this._onClose = onClose;
+    this._onError = onError;
+  }
+
+  public open(): void {
     this.ws = new WebSocket("wss://localhost:3000/api/ws");
-    if (onOpen) this.ws.onopen = onOpen;
-    if (onReceive) this.ws.onmessage = onReceive;
-    if (onClose) this.ws.onclose = onClose;
-    if (onError) this.ws.onerror = onError;
+    if (this._onOpen) this.ws.onopen = this._onOpen;
+    if (this._onReceive) this.ws.onmessage = this._onReceive;
+    if (this._onClose) this.ws.onclose = this._onClose;
+    if (this._onError) this.ws.onerror = this._onError;
   }
 
   public send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
-    this.ws.send(data);
+    this.ws?.send(data);
   }
 
   public close() {
-    this.ws.close();
+    this.ws?.close();
   }
 
   public isOpen() {
-    return this.ws.readyState === WebSocket.OPEN;
+    return this.ws?.readyState === WebSocket.OPEN;
   }
 
   set onOpen(onOpen: VoidFunction) {
+    if (!this.ws) return;
     this.ws.onopen = onOpen;
     this._onOpen = onOpen;
   }
 
   set onReceive(onReceive: MessageEventFunction) {
+    if (!this.ws) return;
     this.ws.onmessage = onReceive;
     this._onReceive = onReceive;
   }
 
   set onClose(onClose: VoidFunction) {
+    if (!this.ws) return;
     this.ws.onclose = onClose;
     this._onClose = onClose;
   }
 
   set onError(onError: VoidFunction) {
+    if (!this.ws) return;
     this.ws.onerror = onError;
     this._onError = onError;
   }

pac-man-board-game/ClientApp/src/pages/Counter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import WebSocketService from "../hooks/useWebSocket";
+import WebSocketService from "../classes/WebSocketService";
 
 const ws = new WebSocketService({});
 
@@ -19,6 +19,13 @@ export const Counter: Component = () => { // TODO update values from different c
     setCurrentCount(currentCount + 1);
   }
 
+  React.useEffect(() => {
+    ws.open();
+    return () => {
+      ws.close();
+    };
+  }, []);
+
   return (
     <div>
       <h1>Counter</h1>

pac-man-board-game/Controllers/WsController.cs

@@ -32,30 +32,37 @@ public class WsController : ControllerBase
 
     private async Task Echo(WebSocket webSocket)
     {
-        var buffer = new byte[1024 * 4];
-        WebSocketReceiveResult? result;
 
-        do
+        try
         {
-            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
-            _logger.Log(LogLevel.Information, "Message received from Client");
+            var buffer = new byte[1024 * 4];
+            WebSocketReceiveResult? result;
+            do
+            {
+                result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
+                _logger.Log(LogLevel.Information, "Message received from Client");
 
-            if (result.CloseStatus.HasValue) break;
+                if (result.CloseStatus.HasValue) break;
 
-            var serverMsg = Encoding.UTF8.GetBytes(Encoding.UTF8.GetString(buffer));
+                var serverMsg = Encoding.UTF8.GetBytes(Encoding.UTF8.GetString(buffer));
 
-            await webSocket.SendAsync(
-                new ArraySegment<byte>(serverMsg, 0, result.Count),
-                result.MessageType,
-                result.EndOfMessage, CancellationToken.None);
+                await webSocket.SendAsync(
+                    new ArraySegment<byte>(serverMsg, 0, result.Count),
+                    result.MessageType,
+                    result.EndOfMessage, CancellationToken.None);
 
-            _logger.Log(LogLevel.Information, "Message sent to Client");
-        } while (true);
+                _logger.Log(LogLevel.Information, "Message sent to Client");
+            } while (true);
 
-        await webSocket.CloseAsync(
-            result.CloseStatus.Value,
-            result.CloseStatusDescription,
-            CancellationToken.None);
-        _logger.Log(LogLevel.Information, "WebSocket connection closed from {}", HttpContext.Connection.Id);
+            await webSocket.CloseAsync(
+                result.CloseStatus.Value,
+                result.CloseStatusDescription,
+                CancellationToken.None);
+            _logger.Log(LogLevel.Information, "WebSocket connection closed from {}", HttpContext.Connection.Id);
+        }
+        catch (WebSocketException e)
+        {
+            _logger.Log(LogLevel.Error, "{}", e.Message);
+        }
     }
 }