data-binding - 从中心外部在 Blazor SignalR 聊天中插入消息

Question

我有一个标准的 Blazor SignalR 聊天。主要聊天工作在派生自 Microsoft.AspNetCore.SignalR.Hub 的 hub.class 中。这工作得很好。

现在我想插入来自中心外部的消息。例如，来自聊天机器人的答案以及文本中的链接。当用户单击本文中的链接之一时，应将一条预定义消息发送到聊天室。

我首先尝试使用 JS 更新聊天中的 messageInput-text-field。这不起作用，因为静态 JS 函数无法使用双向绑定(bind)。

通过 C# 使用 Blazor 更新文本字段值或直接从聊天机器人向聊天发送自动答案就可以了。

不幸的是我无法让这个工作。

有人有一个通过 JS 或 C# 从外部集线器静态方法更新 Blazor SignalR 的简洁示例吗？

提前非常感谢您。

丹尼尔

Answer 1

您需要注入(inject)IHubContext<>从外部访问集线器。

此示例展示了如何将上下文注入(inject)另一个服务。

public class SomeService : ISomeService
{
    private readonly IHubContext<ChatHub> chatHubContext;
    private readonly System.Timers.Timer timer;
    private int count;

    public SomeService(IHubContext<ChatHub> chatHubContext)
    {
        this.chatHubContext = chatHubContext;
        this.timer = new System.Timers.Timer(2000);
        this.timer.Elapsed += Timer_Elapsed;
        this.count = 0;
        this.timer.Start();
    }

    private void Timer_Elapsed(object? sender, System.Timers.ElapsedEventArgs e)
    {
        this.count++;

        Task.Run(() => this.chatHubContext.Clients.All.SendAsync(
            "ReceiveMessage", 
            "SomeService", 
            $"Count: {this.count}"));
    }
}

这来自 repo that I created 。它只有 3 次提交

1. 初始项目模板
2. Signalr Added as per tutorial
3. Changes for this question .

注意:虽然该服务是单例，但在导航到 FetchData 页面之前不会实例化。如果您导航到 FetchData 页面，然后返回主页，将会看到从服务器对 Signalr 的调用。

这是一个粗略的例子，我通常不会在这样的服务中放置计时器。