ASP.NET Core非Blazor环境下C#调用Javascript无响应问题求助

IJSRuntime是Blazor框架专属的API，仅能在Blazor的WebAssembly或Server模式下使用，用来在Blazor的C#代码和浏览器JS上下文之间建立通信。在普通ASP.NET（MVC/Razor Pages）或React这类非Blazor项目中，后端C#代码根本无法直接访问浏览器的JS运行环境，所以调用_jsRuntime.InvokeVoidAsync完全无效。

方案一：前端直接建立SignalR连接处理消息（推荐，符合SignalR设计逻辑） #

不管是ASP.NET Razor页面还是React项目，直接在前端JS中创建SignalR连接，接收Hub广播的消息后直接调用updateUI，这是SignalR的常规用法，也避免了后端跨环境调用JS的问题。

示例前端JS代码：

// 初始化SignalR连接
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/yourHubPath") // 替换为你的Hub路由
    .build();

// 监听Hub的广播消息
connection.on("ReceiveMessage", (user, message) => {
    // 直接调用前端的updateUI函数
    updateUI(`${user}: ${message}`);
});

// 启动连接
async function startConnection() {
    try {
        await connection.start();
        console.log("SignalR连接成功");
    } catch (err) {
        console.error("连接失败，重试中...", err);
        setTimeout(startConnection, 5000);
    }
}
startConnection();

// 你的UI更新函数
function updateUI(content) {
    console.log("收到消息：", content);
    // 这里写具体的UI更新逻辑，比如插入DOM或更新React状态
}

方案二：后端中转消息，前端主动拉取（适合必须用C#客户端接收消息的场景） #

如果业务上必须用C#客户端接收Hub消息，再传递到前端，可以通过中间存储+前端轮询的方式实现：

1. 后端C#客户端收到SignalR消息后，将消息存入内存缓存或消息队列
2. 前端通过定时AJAX请求或Server-Sent Events（SSE）从后端接口获取最新消息，再调用updateUI

后端示例代码（ASP.NET Core Controller）： #

[ApiController]
[Route("api/signalr-messages")]
public class SignalRMessageController : ControllerBase
{
    private readonly IMemoryCache _cache;
    private const string LatestMessageKey = "LatestSignalRMessage";

    public SignalRMessageController(IMemoryCache cache)
    {
        _cache = cache;
    }

    // C# SignalR客户端收到消息时调用此方法存缓存
    public void SaveMessage(string messageContent)
    {
        _cache.Set(LatestMessageKey, messageContent, TimeSpan.FromMinutes(5));
    }

    // 前端拉取最新消息的接口
    [HttpGet]
    public IActionResult GetLatestMessage()
    {
        if (_cache.TryGetValue(LatestMessageKey, out string message))
        {
            _cache.Remove(LatestMessageKey); // 避免重复拉取
            return Ok(message);
        }
        return NoContent();
    }
}

前端轮询示例代码： #

async function pollMessages() {
    try {
        const response = await fetch("/api/signalr-messages");
        if (response.ok) {
            const message = await response.text();
            if (message) {
                updateUI(message);
            }
        }
    } catch (err) {
        console.error("拉取消息失败：", err);
    } finally {
        setTimeout(pollMessages, 1000); // 每秒轮询一次
    }
}

pollMessages();

function updateUI(content) {
    console.log("收到中转消息：", content);
    // UI更新逻辑
}

方案三：通过SignalR Hub转发消息 #

让C#客户端收到消息后，再调用Hub的方法将消息广播给所有前端客户端，前端直接接收Hub的广播即可：

C#客户端代码： #

// 连接到Hub后，监听消息并转发
connection.On<string, string>("ReceiveMessage", async (user, message) =>
{
    // 调用Hub的广播方法
    await connection.InvokeAsync("BroadcastToAll", user, message);
});

Hub代码： #

public class YourHub : Hub
{
    public async Task BroadcastToAll(string user, string message)
    {
        // 广播给所有前端客户端
        await Clients.All.SendAsync("ReceiveBroadcast", user, message);
    }
}

前端JS代码： #

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/yourHubPath")
    .build();

// 监听转发后的广播消息
connection.on("ReceiveBroadcast", (user, message) => {
    updateUI(`${user}: ${message}`);
});

// 启动连接逻辑同上

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