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<salebackhub>();
       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. 　　参考地址