由于signalr作为一个单独的推送系统，跟业务系统是分离开的，所以此处模拟一个业务系统，新建一个.net core app项目

模拟实现一个登录功能

我们的登录很简单，当进入系统，如果检测到用户未登录则跳转到登录页面，用户只需要输入用户名点击登录即算登录成功

• 配置ConfigServices方法 查看代码

  services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
  .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, cookieOption =>
  {
      cookieOption.LoginPath = "/Account/Login";
      cookieOption.AccessDeniedPath = "/Account/Login";
  });

• 配置Config方法，配置认证、授权的请求管道 查看代码

  app.UseRouting();
  app.UseAuthentication();
  app.UseAuthorization();

• 接收登录的post请求，写cookie，跳转 查看代码

前端页面实现

首先在Layout页面引入需要的js文件(vue、signalr、msgpack5、signalr-protocol-msgpack) 查看代码

封装signalr连接相关js

signalr客户端js的操作就是，创建连接、监听推送,封装后端js如下 查看代码

/**
 * 初始化连接
 * @param {object} option 参数
 * @param {string} option.url 连接的url地址
 * @param {string} option.loggingLevel 日志级别,默认为 Error
 * @param {number} option.delay 延迟连接 默认为3000毫秒
 * @param {function} option.onStarted 启动时触发
 * @param {function} option.onLine 启动时触发
 * @param {function} option.offLine 启动时触发
 * @returns {object} 连接的实例
 */
function initSignalr(option) {
    var config = Object.assign(true, {
        loggingLevel: signalR.LogLevel.Error,
        delay: 3000,
        url: ''
    }, option);

    var connection = new signalR.HubConnectionBuilder()
        .configureLogging(config.loggingLevel)
        .withUrl(config.url, {
            accessTokenFactory: option.accessTokenFactory
        })
        .withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol())
        .withAutomaticReconnect([0, 2000, 5000, 10000, 20000])
        .build();

    connection.onreconnecting(function (info) {
        console.info('----------------------------------signalr-- onreconnecting', info);
    });

    connection.onclose(function (err) {
        console.info('--------------------------------signalr-- onclose', err);
    });

    connection.on('OnNotify', config.onNotify);

    connection.on('OnLine', config.onLine);

    connection.on('OffLine', config.offLine);

    setTimeout(function () {
        connection.start().then(function (data) {
            option.onStarted && option.onStarted(data);
        }).catch(function (error) {
            console.error(error.toString());
        });
    }, option.delay);

    return connection;
}

调用封装的js初始化连接 查看代码

• 然后在Home/Index.cshtml中引入上面的js
  

• 在页面加载完后，调用初始化(案例中使用了vue)
  在进入页面后会弹窗让用户输入加入的组，可以不输入也可以多个

  function initConnect() {
    $("#collectionUserInfo").modal({
        keyboard: false,
        show: true,
        backdrop: 'static'
    })
  
    $('#collectionUserInfo').on('hidden.bs.modal', function () {
        var groups = $("#groups").val()||'';
        connect=initSignalr({
            delay: 0,
            url:`${notifyUrl}notify-hub?userId=${vm.userInfo.userName}&group=${groups}`,
            loggingLevel: signalR.LogLevel.Error,
            onNotify: dealNotify,
            onLine: function (data) {
                if (data.IsFirst) {
                    getOnlineUsers();
                }
                getOnlineGroups();
                vm.logs.push(`新连接上线：${JSON.stringify(data)}`);
            },
            offLine: function (data) {
                if (data.IsLast) {
                    getOnlineUsers();
                }
                getOnlineGroups();
                vm.logs.push(`连接下线：${JSON.stringify(data)}`);
            },
            onStarted: function () {
                getOnlineUsers();
                getOnlineGroups();
                vm.$set(vm.userInfo, 'connectionId', connect.connectionId);
                vm.$set(vm.userInfo, 'groups', groups);
                vm.logs.push('连接成功');
            }
        });
    })
    }

  onNotify方法，如果仔细的话会看到里面的onNotify方法，所有的推送最终都会调用到该方法来进行分发。查看代码
  offLine，当有客户端下线的时候会触发，data里面包含有用户I