SignalR realtime notification not persisting on the client

Question

I am trying to implement a feature where user uploads a file, server processes the file and and displays realtime notification to the client about the status of processing e.g. validated, imported etc. There are examples where the client sends data from textboxes to the javascript proxy.

 $("#btnTest").click(function () {
                myHub.testMethodOnHub($("#txtEmail").val());
            });

I need to send binary data to the server via signalR so that server can process that data and notify client using SignalR.

EDIT :- I was able to call a JS method from aspx.cs to set the status client side - realtime. However, the message disappears after page finishes loading.

What I have tried :-

ASPX :-

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="MultipleStepsUsingSignalR._Default" %>

<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-0.5.2.js" type="text/javascript"></script>
<script src="signalr/hubs" type="text/javascript"></script>
<body>

    <form id="Form1" runat="server">
    <p>
        <asp:FileUpload ID="fileUpload" runat="server" />
        <asp:Button ID="btnProcessFile" runat="server" Text="Process File" 
            onclick="btnProcessFile_Click" />
        <asp:HiddenField ID="hdnConnectionId" runat="server"/>
        <%--<asp:Label Text="" ID="lblStatus" runat="server" />--%>
        <span id="lblStatus"></span>
    </p>

  </form>
    <script type="text/javascript">
        $(document).ready(function () {
            var multipleStepsHub = $.connection.multipleStepsHub;

            multipleStepsHub.MethodInJavascript = function (status) {
                $('#lblStatus').append(status);
            };

            $.connection.hub.start().done(function () {
                $('#<%= hdnConnectionId.ClientID %>').val($.connection.hub.id);
                alert($('#lblStatus').text());
            });
        });
    </script>
  </body>

Hub

[HubName("multipleStepsHub")]
    public class MultipleStepsHub : Hub
    {
        public void ExecuteMultipleSteps(string status)
        { 

        }
    }

Code-behind for aspx

   protected void btnProcessFile_Click(object sender, EventArgs e)
        {
            string connectionId = hdnConnectionId.Value;
            var context = GlobalHost.ConnectionManager.GetHubContext<MultipleStepsHub>();

            byte[] dataFromPostedFile = GetDataFromUploadedFile(fileUpload.PostedFile.InputStream);
            context.Clients[connectionId].MethodInJavascript("<br>File updloaded.");
            Thread.Sleep(5000);
            context.Clients[connectionId].MethodInJavascript("<br>Processing step1");
            Thread.Sleep(5000);
            context.Clients[connectionId].MethodInJavascript("<br>Processing step2");
            Thread.Sleep(5000);
            context.Clients[connectionId].MethodInJavascript("<br>Processing step3");

        }

What do I expect :- Status text changing to "Processing step1" then "Processing step2" and then "Processing step3"

What is the result :-

a) There is a change in the status periodically (after Thread.Sleep), however, when the page finishes, the status disappears. As you notice in the below, "Processing step1" and "Processing step2" do appear, but later disappear.

enter image description here

Well, there is a way to get access to the file contents at the client side ([see here](http://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers)) , but SignalR isn't meant to send file contents from client to the server. Maybe you should rethink your goal. What is the scenario exactly? — twoflower, Aug 05 '12 at 18:35
What issues exactly are you having with this code? Does your `MethodInJavascript` get called? — twoflower, Aug 05 '12 at 19:23
Two problems in your code: you are missing a "$" in front of ("#lblStatus") and the selector won't work because ASP.NET web forms generates a different id. — Alexander Köplinger, Aug 05 '12 at 20:45
I submit the following question: http://stackoverflow.com/questions/22993190/how-to-get-feedback-from-a-web-api-process-in-order-to-update-front-end/22993685?noredirect=1#22993685 — VAAA, Apr 10 '14 at 17:00

score 3 · Answer 1 · edited May 23 '17 at 12:01

3

You have a mistake in your JavaScript method:

multipleStepsHub.MethodInJavascript = function (status) {
            ("#lblStatus").val(status);
};

should be

multipleStepsHub.MethodInJavascript = function (status) {
            $('#<%= lblStatus.ClientID %>').text(status);
};

Note that ASP.NET auto-generates HTML element identifiers.

EDIT: If you don't want the page to reload after the upload finishes, well, you need to upload the files asynchronously. In HTML5, it's pretty easy to achieve. For another example of how to do it, see this question.

edited May 23 '17 at 12:01

Community

1
1

answered Aug 05 '12 at 19:50

twoflower

6,788
2
33
44

@user1422578 I expanded my answer. – twoflower Aug 06 '12 at 05:28
An alternative to asynchronous upload might be to start a separate processing thread in btnProcessFile_Click() where you do all the work. This way the page would reload immediately after the upload finishes and you should be able to see the status updates. – Alexander Köplinger Aug 06 '12 at 07:54
@akoeplinger I just realized that even If I don't do upload - the status still disappears. – user1422578 Aug 06 '12 at 18:44
Then something else is reloading the page I guess. As StackOverflow isn't well suited for such discussions, I'd suggest you ask in the SignalR room on JabbR: http://jabbr.net/#/rooms/signalr – Alexander Köplinger Aug 07 '12 at 10:32

score 1 · Answer 2 · answered Aug 05 '12 at 18:55

1

You can't send a regular file to a hub method. You can use a regular http handler or mvc or any other framework to post a file and use signalr to show updates.

answered Aug 05 '12 at 18:55

davidfowl

37,120
7
93
103

Thanks. Could you please check my updated question which has what I tried? It didn't work for me. :-( Definitely I am doing something horribly wrong . Could you please advice. – user1422578 Aug 05 '12 at 19:19
@ElliotWood I can not use that post as in that post, strings are being sent to the hub which notifies the client later. In my case, I need to upload the file in aspx.cs and then use signalR for real-time notification for processing. – user1422578 Aug 06 '12 at 03:57
You have to move this out of a postback button. what you are seeing it the javacript methods being called but then your page is posting back after 3 Thread.Sleep(5000);. So move your code to a http handler and you should be ok. – Elliot Wood Aug 09 '12 at 00:34

score 0 · Answer 3 · answered Nov 22 '13 at 09:48

0

protected void btnProcessFile_Click is a full postback to the server which means you are reloading the page and at this time SignalR is not yet (re)loaded. Try using Ajax requests after the page load has finished.

answered Nov 22 '13 at 09:48

VahidN

18,457
8
73
117

SignalR realtime notification not persisting on the client

3 Answers3