Measure and display input latency

Controller.cs

@@ -8,6 +8,8 @@
 
 internal sealed class Controller : IDisposable
 {
+    private static ReadOnlySpan<byte> PING => "ping"u8;
+    private static readonly ArraySegment<byte> PONG = "pong"u8.ToArray();
     public Controller()
     {
         client = new();
@@ -40,17 +42,24 @@ internal async Task Connect(WebSocket webSocket, ILogger<Controller> logger, Can
         while (!ct.IsCancellationRequested && webSocket.State is WebSocketState.Open)
         {
             result = await webSocket.ReceiveAsync(mem, ct);
-            if (result.MessageType == WebSocketMessageType.Close)
+            switch (result.MessageType)
             {
-                logger.LogInformation("Client disconnected");
-                await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Bye!", ct);
-                return;
+                case WebSocketMessageType.Close:
+                    logger.LogInformation("Client disconnected");
+                    await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Bye!", ct);
+                    return;
+                case WebSocketMessageType.Binary:
+                    CheckResult(result);
+                    short axis = cast(mslice);
+                    logger.LogInformation($"Axis value: {axis}");
+                    // TODO: use channels
+                    controller.SetAxisValue(Xbox360Axis.LeftThumbX, axis);
+                    break;
+                case WebSocketMessageType.Text:
+                    if (mem[..result.Count].Span.SequenceEqual(PING))
+                        await webSocket.SendAsync(PONG, WebSocketMessageType.Text, true, ct);
+                    break;
             }
-            CheckResult(result);
-            short axis = cast(mslice);
-            logger.LogInformation($"Axis value: {axis}");
-            // TODO: use channels
-            controller.SetAxisValue(Xbox360Axis.LeftThumbX, axis);
         }
     }
 

Readme.md

@@ -8,7 +8,7 @@ This app uses [ViGEm](https://docs.nefarius.at/projects/ViGEm/) to create a virt
 
 The only controls (for now) are left and right, which moves the virtual gamepad's left stick.
 
-Status: Prototype v1, very bare bones proof of concept. Windows only, requires .Net 8 Runtime to run. Input delay is about 40-80 ms for my setup, but this should be possible to improve.
+Status: Prototype v1, very bare bones proof of concept. Windows only, requires .Net 8 Runtime to run. Input delay is shown in the bottom right corner, and is about 40-80ms peak for my setup, but this should be possible to improve.
 
 ## Usage
 

wwwroot/controller.js

@@ -8,11 +8,11 @@ const isLittleEndian = (() => {
 
 
 function start() {
-
     const svg = document.getElementById("main");
     document.getElementById("fullscreen").addEventListener("click", () => svg.requestFullscreen({ navigationUI: "hide" }));
     const filler = svg.getElementById("filler");
     const text = svg.getElementById("text");
+    const latency = svg.getElementById("latency");
 
     const url = new URL(location.href)
     url.protocol = "ws"
@@ -61,6 +61,18 @@ function start() {
         text.textContent = "0.00"
     }
 
+    var pingMark
+    function ping() {
+        socket.send("ping");
+        pingMark = performance.now();
+    }
+    function pong(ev) {
+        if(ev.data === "pong") {
+            // Calculate input latency as half round trip time of ping
+            latency.textContent = ((performance.now() - pingMark) / 2).toFixed(2);
+        }
+    }
+
     // Connection opened
     socket.addEventListener("open", (opened) => {
         // Initializer to agree on byte order
@@ -76,10 +88,8 @@ function start() {
         svg.addEventListener("pointerup", up, eventOpts);
         svg.addEventListener("pointercancel", up, eventOpts);
 
-        svg.addEventListener("pointerdown", down);
-        svg.addEventListener("pointermove", down);
-        svg.addEventListener("pointerup", up);
-        svg.addEventListener("pointercancel", up);
+        socket.addEventListener("message", pong, { abort, passive: true });
+        setInterval(ping, 1000, eventOpts);
     });
 }
 

wwwroot/index.html

@@ -10,7 +10,7 @@
 </head>
 
 <body>
-    <svg id="main" width=100dvw height=100dvh stroke-width=1em stroke-linejoin=round>
+    <svg id="main" width=100% height=100% stroke-width=1em stroke-linejoin=round>
 
       <rect x=0 y=0 width=100% height=100% fill=black stroke=lightblue stroke-width=10% />
       <svg viewBox="-100 -100 200 200" x=5% y=5% width=90% height=90% preserveAspectRatio="none" overflow="visible">
@@ -23,7 +23,8 @@
           points="0,-100 75,-5 100,-5 100,5 75,5 0,100 -75,5 -100,5 -100,-5 -75,-5" />
         <rect id="filler" fill="darkgreen" clip-path="url(#clip)" x=0 y=-100 width=0 height=200 />
       </svg>
-      <text id="text" x=1% y=99%>0.00</text>
+      <text x=1% y=99%>Axis value: <tspan id="text">0.00</tspan>%</text>
+      <text x=99% y=99% text-anchor="end">Latency: <tspan id="latency">0.00</tspan>ms</text>
     </svg>
     <button id="fullscreen">Fullscreen</button>
 </body>

wwwroot/style.css

@@ -18,6 +18,10 @@ body { margin: 0; padding: 0; }
   }
 }
 
+svg {
+  width: 100dvw;
+  height: 100dvh;
+}
 svg, svg * {
   touch-action: none;
 }