C#使用SignalR实现进度条

1. 需求背景  产品觉得在后台处理数据时给前端加个进度条 
2. 项目框架 .ENT framework4.5 MVC 5.0
3. Nuget引入 Microsoft.Owin 系列 2.0.2 
4. Nuget引入 Microsoft.AspNet.SignalR 系列 2.0.3
5. 服务器代码 选择已安装 > Visual C# > Web > SignalR ，然后选择SignalR Hub 类 (v2)

   1. using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using XXX.WMS.Core.Log;
      using Microsoft.AspNet.SignalR;
      
      namespace XXX.WebUI
      {
          public class SaleBackHub : Hub
          {
              private void Send(string connectionId, string percent)
              {
                  // Call the addNewMessageToPage method to update clients.
                  try
                  {
                      Clients.Client(connectionId).updateProgressbar(percent);
                  }
                  catch (Exception ex)
                  {
                      LoggerManager.GetInstance().Fatal(ex);
                  }
              }
      
              public string GetConnectionId()
              {
                  return this.Context.ConnectionId;
              }
          }
      }

       

   2. 服务端调用前端action更新进度条

       1 //使用外部方式调用Hub类方法
       2 var saleBackHub = Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext();
       3 var percent = 0;
       4 if (!string.IsNullOrWhiteSpace(requestDto.ProgressbarKey))
       5 {
       6 　　percent = (int)((decimal)++progressCount / (decimal)saleBackModelListCount * 100);
       7 try
       8 {
       9    //调用前端action 更新进度条
      10    saleBackHub.Clients.Client(requestDto.ProgressbarKey).updateProgressbar(percent.ToString());
      11 }
      12 catch (Exception ex)
      13 {
      14     throw;
      15 }
      16 }

       

6. 服务添加Starup.cs
   1. 　　

      using System;
      using System.Threading.Tasks;
      using Microsoft.Owin;
      using Owin;
      
      [assembly: OwinStartup(typeof(Frxs.WMS.Management.WebUI.Startup))]
      
      namespace xxx.WMS.Management.WebUI
      {
          public class Startup
          {
              public void Configuration(IAppBuilder app)
              {
                  // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
                  app.MapSignalR();
              }
          }
      }

       

7. 　前端代码

   1. 对应页面引入signalR.js

      <script src="@Url.Content("~/Scripts/signalR/jquery.signalR-2.0.3.min.js“)" type="text/javascript">script>
      <script src="~/signalr/hubs">script>

   2. 初始化signalR 连接 定义后端推送action  渲染进度条  本次用的是jeasyui 进度条弹窗

      var chat;
      var chatConnectionId;
      function initchatHub() {
          // Reference the auto-generated proxy for the hub.
          chat = $.connection.saleBackHub;
          $.connection.hub.logging = true;
          // Get the user name and store it to prepend to messages.
          // Set initial focus to message input box.
          // Start the connection.
          $.connection.hub.start().done(function () {
              chat.server.getConnectionId().done(function (connectionId) {
                  chatConnectionId = connectionId;
              });
          });
      
          // Create a function that the hub can call back to display messages.
          chat.client.updateProgressbar = function (percent) {
              // Add the message to the page.
              if (parseInt(percent) <= 100) {
                  $.messager.progress('bar').progressbar('setValue', percent);
              }
              //var value = $.messager.progress('bar').progressbar('getValue');
          };
      }
      
      function showProgressbar() {
          $.messager.progress({
              title: '测试进度条',
              interval: 0 //每次进度更新之间以毫秒为单位的时间长度。默认值是 300。 
          });
      }

8. 　　实际效果图

   1. 

9. 　　参考地址 https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/