使用SignalR在多个选项卡中的多个进程的进度更新消息

时间:2016-11-17 10:01:04

标签: jquery asp.net signalr

我有一个网络报废项目,从网站中提取内容可能需要一分钟以上(有时甚至更多)。所以我使用SignalR实现了一个进度更新模块,例如,“第1天的第14天|获取第23行,“因此用户知道该过程仍在进行中。

用户从目标国家/地区选择一个3个字母的代码,然后按EXTRACT按钮。单击EXTRACT按钮后,我的SignalR状态更新开始传输状态更新(参见屏幕截图1)。

截图 enter image description here

现在,用户可以选择打开新标签并处理其他作业。当我这样做时,选项卡1中的进程停止(即,状态更新变为静态,保持在“6IH |第5天的第7天|获取行项目147”)(参见选项卡1屏幕截图)并从选项卡1更新过程状态继续显示在选项卡2中以及选项卡2进程状态更新(实际上,这两个进程更新消息会另外出现)。不幸的是,我无法截取该情景的截图;但是,请参阅选项卡2屏幕截图,其中显示选项卡1处理完成消息,而选项卡2处理实际上正在进行中(如“正在处理”铬显示中所示)。

我的JavaScript就在这里。每次用户单击“EXTRACT”按钮(希望创建一个唯一的实例)时,我都会创建一个唯一的ID。我将唯一值传递给aspx页面并启动createJobID(jobIdVar)函数将作业ID添加到SignalR组Groups.Add(myConnectionId, jobID);

                <script type="text/javascript">
                (function () {
                    var jobIdVar = guid();
                    //$.connection.hub.logging = true;
                    var hubProxy = $.connection.myHub;
                    hubProxy.client.jobCompleted = function (message) {
                        $('#signalr_french_status').text(message.toString());
                        console.log(message);
                        $.connection.hub.stop();
                        jobIdVar = null;
                        console.log('SignalR connection closed!');
                        window.location.reload(true);
                        console.log('Page refreshed');
                    }
                    hubProxy.client.setStatus = function (message) {
                        $('#signalr_french_status').text(message.toString());
                        console.log(message);
                        console.log('Sent message! Job ID: ' + jobIdVar);
                    }
                    $.connection.hub.start()
                        .done(function () {
                            console.log('Connected to hub: ' + $.connection.hub.id);
                        })
                    $.connection.hub.disconnected(function () {
                        $.connection.hub.start();
                    })
                    $('#master_template_page_pandora_french_panel_extract_button').click(function () {
                        //alert('clicked');
                        var url = '/main/asdf.aspx';
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: { 'job_id': jobIdVar },
                            success: function (html) {
                                hubProxy.server.createJobID(jobIdVar);
                                console.log('CreateJobID done: Added to the group! Job ID: ' + jobIdVar);
                            },
                        });
                    })
                    function guid() {
                        function s4() {
                            return Math.floor((1 + Math.random()) * 0x10000)
                              .toString(16)
                              .substring(1);
                        }
                        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                          s4() + '-' + s4() + s4() + s4();
                    }
                })()
            </script>

我的中心方法在这里:

public string myStatus;
public static string myConnectionId;
public void SetCurrentStatus(string jobID)
{
    var context = GlobalHost.ConnectionManager.GetHubContext<PandoraStatus>();
    context.Clients.Group(jobID).setStatus(myStatus);
}
public void CreateJobID(string jobID)
{
    Groups.Add(myConnectionId, jobID);
}
public void JobCompleted(string jobID)
{
    var context = GlobalHost.ConnectionManager.GetHubContext<PandoraStatus>();
    context.Clients.Group(jobID).jobCompleted(myStatus);
}
public override System.Threading.Tasks.Task OnConnected()
{
    myConnectionId = Context.ConnectionId;
    return base.OnConnected();
}

我的进度更新实施就在这里。

    MyHub status = new MyHub();
    try
    {
        extractStatus = "AN2 | Day " + dayToBeExtracted + " of 14 | Getting line item " + lineItem;
        status.myStatus = extractStatus;
        status.SetCurrentStatus(jobIDForProcessing);
    }
    catch (Exception)
    {
        status.myStatus = "AN2 | Error! Check log!";
        status.JobCompleted(jobIDForProcessing);
    }
    finally
    {
        status.myStatus = "AN2 | Process complete!";
        status.JobCompleted(jobIDForProcessing);
    }

我需要知道如何在每个标签中显示唯一的消息。

0 个答案:

没有答案