ASP.NET Core Razor Pages与SignalR+TypeScript整合问题咨询

一、Razor Pages与SignalR双向调用及哈希JS文件引用 #

1.1 双向调用实现 #

1.1.1 Razor页面前端调用SignalR Hub

先通过npm安装SignalR的TypeScript依赖，然后编写TS代码创建连接、调用Hub方法并接收推送：

// src/accountDetailsSignalR.ts
import * as signalR from "@microsoft/signalr";

// 初始化SignalR连接
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/accountHub") // 对应后端Hub的路由
    .build();

// 封装调用Hub方法的函数
async function sendMessageToHub(userId: string, message: string) {
    try {
        await connection.invoke("SendMessageToUser", userId, message);
    } catch (err) {
        console.error(err);
    }
}

// 监听Hub推送的消息，更新页面DOM
connection.on("ReceiveMessage", (message) => {
    const container = document.getElementById("messageContainer");
    if (container) container.textContent = message;
});

// 启动连接+重连逻辑
(async () => {
    try {
        await connection.start();
        console.log("SignalR连接已启动");
    } catch (err) {
        console.error(err);
        setTimeout(() => connection.start(), 5000);
    }
})();

// 暴露方法到全局，供Razor内联脚本调用
(window as any).AccountDetailsSignalR = {
    sendMessageToHub
};

1.1.2 Hub推送消息到指定用户/页面

结合你已实现的IHubContext，补充Hub端的用户关联逻辑：

// AccountHub.cs
public class AccountHub : Hub
{
    // 供前端调用的Hub方法
    public async Task SendMessageToUser(string userId, string message)
    {
        await Clients.User(userId).SendAsync("ReceiveMessage", message);
    }

    // 用户连接时自动加入对应账号分组（可选，方便批量推送）
    public override async Task OnConnectedAsync()
    {
        var userId = Context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
        if (!string.IsNullOrEmpty(userId))
        {
            await Groups.AddToGroupAsync(Context.ConnectionId, $"Account_{userId}");
        }
        await base.OnConnectedAsync();
    }
}

1.2 引用带哈希后缀的TS编译文件 #

如果用Webpack/Vite等工具生成带哈希的JS（如accountDetailsSignalR.abc123.js），可通过manifest.json动态匹配：

1. 构建工具配置生成manifest（以Webpack为例）：

// webpack.config.js
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    // 其他编译配置
    plugins: [
        new ManifestPlugin({
            fileName: 'manifest.json',
            publicPath: '/dist/'
        })
    ]
};

2. Razor页面中读取manifest并引用：

// Pages/Account/Details.cshtml
@{
    var manifestPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "dist", "manifest.json");
    var manifestJson = System.IO.File.ReadAllText(manifestPath);
    var manifest = JsonSerializer.Deserialize<Dictionary<string, string>>(manifestJson);
}

<script src="~/dist/@manifest["src/accountDetailsSignalR.ts"]"></script>

二、TypeScript使用问题解决方案 #

2.1 基础配置优化 #

确保tsconfig.json适配ASP.NET Core环境：

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "moduleResolution": "Node",
        "outDir": "./wwwroot/dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "resolveJsonModule": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

2.2 类型提示与错误排查 #

• 安装SignalR官方类型包：npm install @microsoft/signalr --save，确保TS能识别SignalR的API类型
• 开启VS Code的TS类型检查，实时捕获语法、类型错误

2.3 模块与全局代码交互 #

如果需要在Razor内联脚本调用TS方法，必须将方法挂载到window全局对象（如1.1.1示例），避免模块隔离导致无法调用。

2.4 自动化编译 #

在package.json中添加脚本，实现开发时自动编译TS：

{
    "scripts": {
        "build": "webpack --mode production",
        "watch": "webpack --mode development --watch"
    }
}

开发时运行npm run watch，修改TS文件会自动编译到指定目录。

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