Problem with SignalR Progress Bar

Question

User129493560 posted

Hi all

I have problem with signalr progressbar, update progress bar with id connection, but all progress bar updateted

Pls help me fixer problem, thanks all!

HUB

public class ChartHubs : Hub
    {
        public static string ConnectionId { get; set; }
        public override Task OnConnected()
        {
            ConnectionId = Context.ConnectionId;
            return base.OnConnected();
        }
    }

Function update progress bar

public static void SendProgress(string progressMessage, int progressCount, int totalItems)
        {
            IHubContext progressbar = Startup.ConnectionManager.GetHubContext<ChartHubs>();
            var percentage = (progressCount * 100) / totalItems;
            progressbar.Clients.Client(ChartHubs.ConnectionId).AddProgress(progressMessage, percentage);
        }

js update progress bar

$(function () {
                var progressbar = $.connection.chartHubs;
                progressbar.client.addProgress = function (mgs, percent) {
                    $('.progress-bar').attr('aria-valuetransitiongoal', percent).progressbar({ display_text: 'fill' });
                };
                $.connection.hub.start().done(function () {
                    var connectionId = $.connection.hub.id;
                });
            });

Controller update progress bar

Functions.SendProgress("processing", i + 1, listRid.Count);

Brgs!

Answer 1

User129493560 posted
Hi all!
Pls help me!
Thanks all

Answer 2

User1168443798 posted

Hi hoctro,

Could you share us a simple project which could reproduce your issue?

What do you mean by “Controller update progress bar” and how did you implement AddProgress for Client?

In my option, there is no extension method for Client. What I could use is InvokeAsync.

I made a test with ChatSample by adding below code to Chat.

        public async Task SendProgress(string progressMessage, double percentage)
        {           
            await Clients.Client(Context.ConnectionId).InvokeAsync("AddProgress", Context.User.Identity.Name, progressMessage, percentage);      
        }

When calling SendProgress from client, it will only update this specific client.

    connection.on('AddProgress', (userName, progressMessage, percentage) => {
    var nameElement = document.createElement('b');
    nameElement.innerText = userName + ':';

    var msgElement = document.createElement('span');
    msgElement.innerText = ' ' + progressMessage+ ' '+ percentage;

    var child = document.createElement('li');
    child.appendChild(nameElement);
    child.appendChild(msgElement);
    document.getElementById('messages').appendChild(child);
});

Best Regards,

Edward

Answer 3

User129493560 posted

Hi Edward!

My code refer https://www.codeproject.com/Articles/1124691/SignalR-Progress-Bar-Simple-Example-Sending-Live-D

"Controller update progress bar" is the code that I want to show the progress of the job, ex:

for(int i = 0; listdo.Count; i++)
{
   ...

   Functions.SendProgress("processing", i + 1, listdo.Count);
}

Brgs,

Answer 4

User2093589951 posted

All you need to modify Existing Code:

View:

<div class="jumbotron" style="background-color:white;">
    <h1>ASP.NET</h1>

    <input id="hdId" type="hidden" />
    <input id="hdUserName" type="hidden" />

    <div id="divLogin" class="login">
        <div>
            Your Name:<br />
            <input id="txtNickName" type="text" class="textBox" />
        </div>
        <div id="divButton">
            <input id="btnLogin" type="button" class="submitButton" value="Login" />
        </div>
    </div>
    <div class="title">
        Welcome [<span id='spanUser'></span>]
    </div>
    <p class="lead">SignalR ProcessBar Simple Example</p>
    <button onclick="StartProcess()" type="button" class="btn btn-primary btn-success">Start the process</button>
</div>

Script:

<script type="text/javascript">
    var progress = null;

    $(function () {
        // Reference the auto-generated proxy for the hub.
        progress = $.connection.progressHub;

        // Create a function that the hub can call back to display messages.
        progress.client.AddProgress = function (message, percentage) {
            ProgressBarModal("show", message + " " + percentage);
            $('#ProgressMessage').width(percentage);
            if (percentage == "100%") {
                ProgressBarModal();
            }
        };

        registerClientMethods(progress);
        $.connection.hub.start().done(function () {
            registerEvents(progress);
        });

    });

    function registerEvents(progress) {

        $("#divLogin").show();
        $("#btnLogin").click(function () {
            debugger
            var name = $("#txtNickName").val();
            if (name.length > 0) {
                progress.server.createUser(name);
            }
            else {
                alert("Please enter name");
            }
        });
    }

    function registerClientMethods(progress) {

        // Calls when user successfully logged in
        progress.client.onConnected = function (id, userName, allUsers) {
            $("#divLogin").hide();
            $('#hdId').val(id);
            $('#hdUserName').val(userName);
            $('#spanUser').html(userName);
        }
    }

    function StartProcess() {
        var userId = $('#hdId').val();
        progress.server.longRunningProcess(userId);
    }

</script>

Hub:

public class ProgressHub : Hub
{
    static List<UserDetail> ConnectedUsers = new List<UserDetail>();

    public void CreateUser(string userName)
    {
        var id = Context.ConnectionId;


        if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
        {
            ConnectedUsers.Add(new UserDetail
            {
                ConnectionId = id,
                UserName = userName
            });

            // send to caller
            Clients.Caller.onConnected(id, userName, ConnectedUsers);
        }
    }

    public void LongRunningProcess(string toUserId)
    {
        //THIS COULD BE SOME LIST OF DATA
        int itemsCount = 100;

        for (int i = 0; i <= itemsCount; i++)
        {
            //SIMULATING SOME TASK
            Thread.Sleep(500);

            //CALLING A FUNCTION THAT CALCULATES PERCENTAGE AND SENDS THE DATA TO THE CLIENT
            SendProgress(toUserId, "Process in progress...", i, itemsCount);
        }
    }

    public void SendProgress(string toUserId, string progressMessage, int progressCount, int totalItems)
    {
        var toUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == toUserId);

        //CALCULATING PERCENTAGE BASED ON THE PARAMETERS SENT
        var percentage = (progressCount * 100) / totalItems;

        if (toUser != null)
        {
            // send to 
            Clients.Client(toUserId).AddProgress(progressMessage, percentage + "%");
        }
    }
}

Remove LongRunningProcess method from HomeControll, copy paste the code snippet or get full modified source 

from the link : https://1drv.ms/u/s!Ar208t5KKqOOiBEyu1DVNWHx_Vom

Thanks :)(