制作可实时显示C#程序按键数据的简易ASP网页

因为你不想用MVC框架，还要用最少文件实现需求，.NET最小API + SignalR是最适配的方案——无需复杂结构，几个文件就能完成无刷新的实时数据同步。

步骤1：创建基础项目 #

打开命令提示符，执行以下命令创建一个轻量Web项目：

dotnet new web -n KeyBoardMonitor
cd KeyBoardMonitor

步骤2：添加SignalR依赖 #

执行命令引入SignalR实时通信包：

dotnet add package Microsoft.AspNetCore.SignalR

步骤3：处理SDK DLL #

把WootingAnalogSDKNET.dll复制到项目根目录，确保编译后该文件会被复制到输出目录（如果用Visual Studio，右键文件设置「复制到输出目录」为「如果较新则复制」；命令行环境直接手动复制到bin/Debug/net6.0或对应版本目录）。

步骤4：修改Program.cs #

替换项目中Program.cs的全部内容，整合你的键盘读取逻辑和SignalR通信：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
using WootingAnalogSDKNET;
using System.Threading;
using System.Linq;

var builder = WebApplication.CreateBuilder(args);

// 注册SignalR服务
builder.Services.AddSignalR();

var app = builder.Build();

// 启用静态文件访问（用于加载HTML页面）
app.UseStaticFiles();

// 定义SignalR集线器，负责和客户端通信
public class KeyHub : Hub
{
}

// 映射SignalR路由
app.MapHub<KeyHub>("/keyHub");

// 后台启动键盘读取任务，避免阻塞Web主线程
Task.Run(async () =>
{
    Console.WriteLine("Hello Analog SDK!");

    var (noDevices, error) = WootingAnalogSDK.Initialise();
    if (noDevices >= 0)
    {
        Console.WriteLine($"Analog SDK Successfully initialised with {noDevices} devices!");
    }
    else
    {
        Console.WriteLine($"Analog SDK failed to initialise: {error}");
        return;
    }

    // 获取SignalR上下文，用于向所有客户端推送数据
    var hubContext = app.Services.GetRequiredService<IHubContext<KeyHub>>();

    while (true)
    {
        var (keys, readErr) = WootingAnalogSDK.ReadFullBuffer(20);
        if (readErr == WootingAnalogResult.Ok && keys.Count > 0)
        {
            // 格式化按键数据为字符串
            var keyData = string.Join(" ", keys.Select(k => $"({k.Item1},{k.Item2})"));
            // 推送数据给所有连接的客户端
            await hubContext.Clients.All.SendAsync("ReceiveKeyData", keyData);
        }
        else if (readErr != WootingAnalogResult.Ok)
        {
            Console.WriteLine($"Read failed with {readErr}");
            Thread.Sleep(1000);
        }
        Thread.Sleep(100);
    }
});

app.Run();

步骤5：创建HTML页面 #

在项目根目录新建wwwroot文件夹（如果不存在），然后在其中创建index.html：

<!DOCTYPE html>
<html>
<head>
    <title>实时键盘数据</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.10/signalr.min.js"></script>
</head>
<body>
    <h1>实时键盘数据</h1>
    <div id="keyDataDisplay" style="font-size:18px; margin-top:20px;"></div>

    <script>
        // 建立SignalR连接
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/keyHub")
            .build();

        // 接收服务器推送的键盘数据，更新页面内容
        connection.on("ReceiveKeyData", function (data) {
            document.getElementById("keyDataDisplay").textContent = data;
        });

        // 启动连接，处理异常
        connection.start().catch(function (err) {
            return console.error(err.toString());
        });
    </script>
</body>
</html>

步骤6：运行项目 #

在命令提示符执行：

dotnet run

打开浏览器访问控制台输出的地址（通常是http://localhost:5000或https://localhost:5001），就能看到键盘数据实时更新，无需刷新页面。

内容的提问来源于stack exchange，提问作者DJx