Fixed websockets

pac-man-board-game/ClientApp/src/hooks/useWebSocket.ts

@@ -0,0 +1,57 @@
+type VoidFunction = () => void;
+type MessageEventFunction = (data: MessageEvent<any>) => void;
+
+interface IWebSocket {
+  onOpen?: VoidFunction,
+  onReceive?: MessageEventFunction,
+  onClose?: VoidFunction,
+  onError?: VoidFunction
+}
+
+export default class WebSocketService {
+  private ws: WebSocket;
+  private _onOpen?: VoidFunction;
+  private _onReceive?: MessageEventFunction;
+  private _onClose?: VoidFunction;
+  private _onError?: VoidFunction;
+
+  constructor({onOpen, onReceive, onClose, onError}: IWebSocket) {
+    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;
+  }
+
+  public send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
+    this.ws.send(data);
+  }
+
+  public close() {
+    this.ws.close();
+  }
+
+  public isOpen() {
+    return this.ws.readyState === WebSocket.OPEN;
+  }
+
+  set onOpen(onOpen: VoidFunction) {
+    this.ws.onopen = onOpen;
+    this._onOpen = onOpen;
+  }
+
+  set onReceive(onReceive: MessageEventFunction) {
+    this.ws.onmessage = onReceive;
+    this._onReceive = onReceive;
+  }
+
+  set onClose(onClose: VoidFunction) {
+    this.ws.onclose = onClose;
+    this._onClose = onClose;
+  }
+
+  set onError(onError: VoidFunction) {
+    this.ws.onerror = onError;
+    this._onError = onError;
+  }
+}

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

@@ -1,40 +1,23 @@
 import React from "react";
+import WebSocketService from "../hooks/useWebSocket";
 
-const ws = new WebSocket("wss://localhost:3000/api/");
+const ws = new WebSocketService({});
 
-let isWsOpen = false;
-
-ws.onopen = () => {
-  isWsOpen = true;
-  console.log("WebSocket Client Connected");
-};
-
-ws.onmessage = (data) => {
-  console.log(`Received message: ${data}`);
-};
-
-ws.onerror = (err) => {
-  console.error(err);
-};
-
-ws.onclose = () => {
-  console.log("WebSocket Client Disconnected");
-};
-
-export const Counter: Component = () => {
+export const Counter: Component = () => { // TODO update values from different clients at the same time
 
+  ws.onReceive = receiveMessage;
   const [currentCount, setCurrentCount] = React.useState(0);
 
-  function incrementCounter() {
+  function incrementCounterAndSend() {
     setCurrentCount(currentCount + 1);
-  }
-
-  React.useEffect(() => {
-
-    if (isWsOpen) {
+    if (ws.isOpen()) {
       ws.send(`Current count: ${currentCount}`);
     }
-  }, [currentCount]);
+  }
+
+  function receiveMessage(data: MessageEvent<any>) {
+    setCurrentCount(currentCount + 1);
+  }
 
   return (
     <div>
@@ -44,7 +27,7 @@ export const Counter: Component = () => {
 
       <p aria-live="polite">Current count: <strong>{currentCount}</strong></p>
 
-      <button className="btn btn-primary" onClick={incrementCounter}>Increment</button>
+      <button className="btn btn-primary" onClick={incrementCounterAndSend}>Increment</button>
     </div>
   );
 };

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

@@ -16,14 +16,12 @@ public class WsController : ControllerBase
     }
 
     [HttpGet]
-    public async void TestWebSocket()
+    public async Task Get()
     {
-        // TODO test websocket https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-7.0
         if (HttpContext.WebSockets.IsWebSocketRequest)
         {
-            var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
-            _logger.Log(LogLevel.Information, "Accepted WebSocket connection from {ConnectionId}",
-                HttpContext.Connection.Id);
+            using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
+            _logger.Log(LogLevel.Information, "WebSocket connection established to {}", HttpContext.Connection.Id);
             await Echo(webSocket);
         }
         else
@@ -35,37 +33,29 @@ public class WsController : ControllerBase
     private async Task Echo(WebSocket webSocket)
     {
         var buffer = new byte[1024 * 4];
-        WebSocketReceiveResult? receiveResult;
+        WebSocketReceiveResult? result;
 
-        // While the WebSocket connection remains open run a simple loop that receives data and sends it back.
         do
         {
-            // Receive the request and store it in a buffer
-            receiveResult = await webSocket.ReceiveAsync(
-                new ArraySegment<byte>(buffer), CancellationToken.None);
+            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
+            _logger.Log(LogLevel.Information, "Message received from Client");
 
-            _logger.Log(LogLevel.Information, "Received {Count} bytes", receiveResult.Count);
+            if (result.CloseStatus.HasValue) break;
 
-            if (receiveResult.CloseStatus.HasValue) break;
-            var msg = Encoding.UTF8.GetString(buffer);
-            _logger.Log(LogLevel.Information, "Received {Message}", msg);
+            var serverMsg = Encoding.UTF8.GetBytes(Encoding.UTF8.GetString(buffer));
 
-            // Send the request back to the client
             await webSocket.SendAsync(
-                new ArraySegment<byte>(buffer, 0, receiveResult.Count),
-                receiveResult.MessageType,
-                receiveResult.EndOfMessage,
-                CancellationToken.None);
+                new ArraySegment<byte>(serverMsg, 0, result.Count),
+                result.MessageType,
+                result.EndOfMessage, CancellationToken.None);
 
-            _logger.Log(LogLevel.Information, "Sent {Count} bytes", receiveResult.Count);
+            _logger.Log(LogLevel.Information, "Message sent to Client");
         } while (true);
 
-        // Close the WebSocket connection
         await webSocket.CloseAsync(
-            receiveResult.CloseStatus.Value,
-            receiveResult.CloseStatusDescription,
+            result.CloseStatus.Value,
+            result.CloseStatusDescription,
             CancellationToken.None);
-        _logger.Log(LogLevel.Information, "Closed WebSocket connection {ConnectionId}",
-            HttpContext.Connection.Id);
+        _logger.Log(LogLevel.Information, "WebSocket connection closed from {}", HttpContext.Connection.Id);
     }
 }