Add WebSocket stat count

Updates *maybe* a bit too often? Resolves #3
Simyon264 · Apr 10, 2024 · 8410d4d · 8410d4d
1 parent 0ea7f92
commit 8410d4d
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 3 deletions.
diff --git a/Client/Components/App.razor b/Client/Components/App.razor
@@ -1,4 +1,7 @@
-<!DOCTYPE html>
+@using Microsoft.Extensions.Configuration
+@inject IConfiguration Configuration
+
+<!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
 
 <head>
@@ -19,6 +22,44 @@
 <body>
 <Routes/>
 <script src="_framework/blazor.web.js"></script>
+<script>
+    // This script handles the web socket connection to the server.
+    const websocketUrl = "@Configuration["WebSocketUrl"]";
+    const ws = new WebSocket(websocketUrl);
+    ws.onopen = () => {
+        console.log("WebSocket connection established.");
+    };
+    ws.onclose = () => {
+        console.log("WebSocket connection closed.");
+    };
+    ws.onerror = (error) => {
+        console.error("WebSocket error: ", error);
+    };
+    ws.onmessage = (message) => {
+        //console.log("WebSocket message: ", message.data);
+        // The only message i can currently recieve are the amount of users online. TODO: JSON messages
+        if (message == "1") {
+            $("#activeUsers").html("There is currently <em>one user</em> here.");
+        } else {
+            $("#activeUsers").html("There are currently <em>" + message.data + " users</em> here.");
+        }
+    };
+    window.ws = ws;
+    
+    // Every 5 seconds, send a "ping" message to the server.
+    setInterval(() => {
+        if (ws.readyState !== WebSocket.OPEN) {
+            console.error("WebSocket connection is not open.");
+            return;
+        }
+        ws.send("count");
+    }, 1500);
+    
+    // When the user navigates to a new page, close the web socket connection.
+    window.addEventListener("beforeunload", () => {
+        ws.close();
+    });
+</script>
 </body>
 
 </html>
diff --git a/Client/Components/Pages/Home.razor b/Client/Components/Pages/Home.razor
@@ -7,6 +7,7 @@
 
 <PageTitle>Replay viewer</PageTitle>
 <h1>Replay browser for Space Station 14</h1>
+<p id="activeUsers">There is currently <em>1 user</em> here.</p>
 <hr/>
 <SearchBar></SearchBar>
 <hr/>

diff --git a/Client/Components/Pages/Search.razor b/Client/Components/Pages/Search.razor
@@ -8,6 +8,7 @@
 
 <PageTitle>Replay viewer</PageTitle>
 <h1>Replay browser for Space Station 14</h1>
+<p id="activeUsers">There is currently <em>1 user</em> here.</p>
 <p>Search for replays by using the search bar below</p>
 <a href="/" class="btn btn-primary">Back to main page</a>
 <hr/>

diff --git a/Server/Api/DataController.cs b/Server/Api/DataController.cs
@@ -1,6 +1,11 @@
-using Microsoft.AspNetCore.Cors;
+using System.Collections.Concurrent;
+using System.Net.WebSockets;
+using System.Text;
+using Microsoft.AspNetCore.Cors;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
+using Serilog;
+using Shared;
 
 namespace Server.Api;
 
@@ -13,10 +18,13 @@ namespace Server.Api;
 public class DataController : ControllerBase
 {
     private readonly ReplayDbContext _context;
-
+    public static readonly Dictionary<Guid, WebSocket> ConnectedUsers = new();
+    private Timer _timer;
+
     public DataController(ReplayDbContext context)
     {
         _context = context;
+        _timer = new Timer(CheckInactiveConnections, null, TimeSpan.Zero, TimeSpan.FromSeconds(5));
     }
 
     /// <summary>
@@ -39,4 +47,55 @@ [FromQuery] string username
 
         return Ok(completions);
     }
+
+    [Route("/ws")]
+    public async Task Connect()
+    {
+        if (HttpContext.WebSockets.IsWebSocketRequest)
+        {
+            var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
+            var userId = Guid.NewGuid();
+            ConnectedUsers.Add(userId, webSocket);
+            Log.Information("User connected with ID {UserId}", userId);
+            await Echo(webSocket, userId);
+        }
+        else
+        {
+            HttpContext.Response.StatusCode = 400;
+        }
+    }
+
+    private async Task Echo(WebSocket webSocket, Guid userId)
+    {
+        var buffer = new byte[1024 * 4];
+        var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
+
+        while (!result.CloseStatus.HasValue)
+        {
+            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
+
+            if (Encoding.UTF8.GetString(buffer).Contains("count"))
+            {
+                var count = ConnectedUsers.Count;
+                var countBytes = Encoding.UTF8.GetBytes(count.ToString());
+                await webSocket.SendAsync(new ArraySegment<byte>(countBytes), WebSocketMessageType.Text, true, CancellationToken.None);
+            }
+
+            buffer = new byte[1024 * 4];
+        }
+
+        ConnectedUsers.Remove(userId, out _);
+        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
+    }
+
+    private void CheckInactiveConnections(object state)
+    {
+        foreach (var user in ConnectedUsers)
+        {
+            if (user.Value.State == WebSocketState.Open) continue;
+
+            ConnectedUsers.Remove(user.Key, out _);
+            Log.Information("User disconnected with ID {UserId}", user.Key);
+        }
+    }
 }
diff --git a/Server/Program.cs b/Server/Program.cs
@@ -66,6 +66,13 @@
 
     builder.Services.AddMvc();
     var app = builder.Build();
+
+    var webSocketOptions = new WebSocketOptions()
+    {
+        KeepAliveInterval = TimeSpan.FromSeconds(10),
+    };
+
+    app.UseWebSockets(webSocketOptions);
 
     // Configure the HTTP request pipeline.
     if (app.Environment.IsDevelopment())