设为首页 加入收藏

TOP

.net core 3.0 Signalr - 08 业务实现-客户端demo(一)
2019-10-09 19:59:16 】 浏览:105
Tags:.net core 3.0 Signalr 业务 实现 客户端 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、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

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇.net core 3.0 Signalr - 06 业务.. 下一篇向net core 3.0进击——Swagger的..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目