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 (this._onOpen) this.ws.onopen = this._onOpen;
-    if (onReceive) this.ws.onmessage = onReceive;
+    if (this._onReceive) this.ws.onmessage = this._onReceive;
-    if (onClose) this.ws.onclose = onClose;
+    if (this._onClose) this.ws.onclose = this._onClose;
-    if (onError) this.ws.onerror = onError;
+    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

@@ -31,10 +31,12 @@ public class WsController : ControllerBase
     }
 
     private async Task Echo(WebSocket webSocket)
+    {
+
+        try
         {
             var buffer = new byte[1024 * 4];
             WebSocketReceiveResult? result;
-
             do
             {
                 result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
@@ -58,4 +60,9 @@ public class WsController : ControllerBase
                 CancellationToken.None);
             _logger.Log(LogLevel.Information, "WebSocket connection closed from {}", HttpContext.Connection.Id);
         }
+        catch (WebSocketException e)
+        {
+            _logger.Log(LogLevel.Error, "{}", e.Message);
+        }
+    }
 }