Asp.Net MVC 中使用 SignalR

案例

安装

PM> Install-Package Microsoft.AspNet.SignalR -Version 2.4.3

新建集线器(Hub)的类

/// <summary>
/// 留言 Hub
/// </summary>
[HubName("leavingMessageHub")]
public class LeavingMessageHub : Hub
{

    public void PushCount()
    {
        int count = 12;
        Clients.All.pushCount(count);
    }
}

可以通过 HubName 特性标注外部访问的名称。

Startup 映射集线器

创建 Startup 类，将 SignalR 集线器映射到 app builder 管道中的“/signalr”，按照如下代码更新Startup类：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(DecGroup.Website.Startup))]
namespace DecGroup.Website
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();  // 默认映射到“/signalr”
            // app.MapSignalR("/signala", new HubConfiguration());  // 可以不映射到“/signalr”
        }
    }
}

JavaScript 代码

<script src="~/Statics/lib/signalr/jquery.signalR-2.4.3.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        initLeavingMessageHub();
    })

    function initLeavingMessageHub() {
        $.connection.hub.url = '/signalr';

        // 引用定义的集线器
        var hub = $.connection.leavingMessageHub;

        // 定义 client 端的javascript function，供 server 端 hub 通过 dynamic 的方式，调用所有 Clients 的 javascript function
        hub.client.getCount = function (count) {
            $("#right-number").text(count);  // 向页面添加消息
        };

        // 开始连接服务器
        $.connection.hub.start().done(function () {
            // 调用服务器端集线器的 pushCount 方法
            hub.server.pushCount();
            // 可以做一些其他的页面处理
        });
    }
</script>

消息推送

[HttpPost]
public async Task<JsonResult> Add()
{
    int count = 0;  // 获取数量
    var hub = GlobalHost.ConnectionManager.GetHubContext<LeavingMessageHub>();
    hub.Clients.All.getCount(count);  // 调用客户端方法，把 count 推送到客户端

    return Json(null);
}