.net core 3.0 Signalr - 08 业务实现-客户端demo

因为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、msgpack五、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里面包含有用户Id、链接Id、是否该用户的最后一个链接,可根据须要使用查看代码
onLine,当用户链接的时候会触发，data里面包含有用户Id、链接Id、是否该用户的第一个链接(用于用户上线后的逻辑处理)，可根据须要使用 查看代码
onStarted，当成功链接后触发，可用于作一些链接后的业务逻辑处理，可根据须要使用 查看代码

获取当前用户信息、在线列表

在用户链接成功后，获取当前在线用户、用户组、当前用户信息,并设置到vue的data中 查看代码

模拟一个任务分配

在项目中心中，点击"模拟推送待办"按钮，将会向当前用户所在组中推送一条代码消息，能够登陆不一样帐号、开多个tab页体验
点击事件代码位置 查看代码

assignTaskToUser: function () {
    var that = this;
    $.ajax({
        type: 'POST',
        url: '/api/ServerProxy/AssignTaskToUser',
        data: {
            groups:that.userInfo.groups
        }
    })
},

对应的推送解析代码

首先当有推送过来的时候，会首先进到onNotify方法，而后根据不一样类型在分配到不一样的js方法中
查看代码
效果图

模拟发送消息

消息发送，能够选定组、人进行消息发送
发送端代码
解析端

登陆互斥

登陆互斥是指，当一个帐号在A电脑登陆，而后再在B电脑登陆，最后的登陆会排斥掉开始的登陆，即，将A上的挤下线
首先用谷歌浏览器登陆，输入用户名：xiexingen，而后链接
接着使用360急速浏览器登陆，输入用户名:xiexingen 这个时候会发现谷歌浏览器中的登陆已经退出，如图

必要条件: 不一样浏览器、同一用户,好比:同一个浏览器，不一样tab就不算(能共用cookie)

文件下载(指定链接推送)

文件下载的场景，用户在操做页面上选择了上千个文件，而后点击打包下载，这个时候可能须要好久时间才反应回来，那么这段时间若是让用户一直等待显然不妥，因此，当用户点击打包下载的时候，后端启用一个后台线程去打包、压缩，而后当即返回；用户能够继续操做，当服务器端打包好后推送给用户端，用户点击下载便可。
此处分两种状况

1. 单链接推送

用户开了多个tab页，在其中一个上下载文件，若是后端推送的时候，直接给该用户推，显然不妥；正确的作法一个是只给操做的那个tab页推，这就须要，调用服务器端业务api的时候，须要把当前tab页对应的链接id发送到服务器端，服务器端处理完业务后，调用推送服务器，告诉推送服务器只推我给你的这个链接的客户端，这样就能指定链接推送。

1. 单用户排除某个链接的其余链接推送

这种状况比较少见，告诉推送服务器，给这个用户，除了某个链接外的其余全部链接推送

模拟操做
点击第一个图中的"打包下载文件" 按钮，当前页面会受到文件下载的推送
在点击图二中的"推送当前用户其余页面更新操做"按钮，会发现出了当前tab页外，其余tab也都收到了推送消息，以下图

至此，signalr相关文章算是到此结束了，下一篇谈谈我的的一点心得以及里面存着的一些问题。

快速导航

标题	内容
索引	.net core 3.0 Signalr - 实现一个业务推送系统
上一篇	.net core 3.0 Signalr - 07 业务实现-服务端 自定义管理组、用户、链接
下一篇	.net core 3.0 Signalr - 09 待改进&交流
源码地址	源码
官方文档	官方文档