locked
SignalR Progress Bar RRS feed

  • Question

  • User812527939 posted

    I have been trying to work with SignalR so that I can get a live progress bar for large processing jobs. I have watched almost every tutorial that I could find and it seems so easy but when I apply it to my MVC application it doesn't do anything.

    Startup Class

    using System;
    using System.Threading.Tasks;
    using Microsoft.Owin;
    using Owin;
    
    [assembly: OwinStartup(typeof(Program.Startup))]
    
    namespace Program
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.MapSignalR();
            }
        }
    }
    

    Hub

    using Microsoft.AspNet.SignalR;
    using Microsoft.AspNet.SignalR.Hubs;
    using System;
    using System.Web.Configuration;
    using System.Xml;
    using System.Collections.Generic;
    using System.Linq;
    using System.IO;
    using System.Threading;
    
    namespace Program.Hubs
    {
        [HubName("DDProcess")]
        public class DDProcessHub : Hub
        {
            public string msg = "Initializing and Preparing...";
            public int count = 100;
    
            public void CallLongOperation()
            {
                for (int x = 0; x <= count; x++)
                {
    
                    // delay the process to see things clearly
                    Thread.Sleep(100);
    
                    if (x == 20)
                        msg = "Loading Application Settings...";
    
                    else if (x == 40)
                        msg = "Applying Application Settings...";
    
                    else if (x == 60)
                        msg = "Loading User Settings...";
    
                    else if (x == 80)
                        msg = "Applying User Settings...";
    
                    else if (x == 100)
                        msg = "Process Completed!...";
    
                    // call client-side SendMethod method
                    Clients.Caller.sendMessage(string.Format
                            (msg + " {0}% of {1}%", x, count));
                }
            }
        }
    }

    The above code, and below, is from a tutorial. I figured if I can get that working with my application and get a result then I can just tweak it a bit to update my progress bar.

    JS

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="~/signalr/hubs"></script>
    
    
    <script type="text/javascript" language="javascript">
    
            $(document).ready(function () {
    
                // initialize progress bar
                $("#progressbar").progressbar({ value: 0 });
    
                // initialize the connection to the server
                var progressNotifier = $.connection.DDProcess;
    
                // client-side sendMessage function that will be called from the server-side
                progressNotifier.client.sendMessage = function (message) {
                    // update progress
                    UpdateProgress(message);
                };
    
                // establish the connection to the server and start server-side operation
                $.connection.hub.start().done(function () {
                    // call the method CallLongOperation defined in the Hub
                    progressNotifier.server.callLongOperation();
                });
            });
    
            function UpdateProgress(message) {
                // get result div
                var result = $("#result");
                // set message
                result.html(message);
                // get progress bar
                var value = $("#progressbar").progressbar("option", "value");
                // update progress bar
                $("#progressbar").progressbar("value", value + 1);
    
            }
    
    </script>

    HTML

    <div style="width: 30%; margin: 0 auto;">
        <div id="result" style="font-family: Tahoma;
                font-size: 0.9em; color: darkgray; margin-top: 230px; padding-bottom: 5px">
            Initializing and Preparing...
        </div>
    
        <div id="progressbar" style="width: 300px; height: 15px"></div>
        <br />
    </div>

     

    I have had a look in chrome and it has told me that hubs could not be found if that helps at all.

    Any help is much appreciated.

    Cheers,

    John

    Wednesday, January 27, 2016 2:16 AM

Answers

  • User812527939 posted

    After a few hours of tinkering I found out my issue.

    Owin was not updating to the latest version so I had to uninstall it and then reinstall the NuGet Package. This still installed an older version for me but it then updated successfully. After the update, the startup class worked.

    As for my JS, I needed to put this in the '@section Scripts' in the HTML. As soon as I updated this my progress bar started working.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 27, 2016 6:04 AM