C#使用SignalR實作進度條-有解無憂

需求背景產品覺得在后臺處理資料時給前端加個進度條
專案框架 .ENT framework4.5 MVC 5.0
Nuget引入 Microsoft.Owin 系列 2.0.2
Nuget引入 Microsoft.AspNet.SignalR 系列 2.0.3

服務器代碼選擇已安裝 > Visual C# > Web > SignalR ，然后選擇SignalR Hub 類 (v2)

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;
        }
    }
}

服務端呼叫前端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 }

服務添加Starup.cs

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();
        }
    }
}

　前端代碼

對應頁面引入signalR.js

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

初始化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 = https://www.cnblogs.com/-bobi/p/$.messager.progress('bar').progressbar('getValue');
    };
}

function showProgressbar() {
    $.messager.progress({
        title: '測驗進度條',
        interval: 0 //每次進度更新之間以毫秒為單位的時間長度，默認值是 300， 
    });
}

　　實際效果圖
　　參考地址 https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/122535.html

標籤：C#

上一篇：VS中常用C#代碼段快速輸入總結

下一篇：C# 網路連接中例外斷線的處理:ReceiveTimeout, SendTimeout 及 KeepAliveValues(設定心跳)