Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SignalR updates not working correctly with Chrome

I have created an ASP MVC 4 application with SignalR notifications. I run it in Debug mode locally and also on a server through IIS publish. This works mostly (explained later) as expected when using Internet Explorer 11:

HTML1300: Navigation occurred.
File: AllChanges
SignalR: Window unloading, stopping the connection.
SignalR: Stopping connection.
SignalR: Stopping forever frame.
SignalR: Fired ajax abort async = false.
SignalR: Stopping the monitoring of the keep alive.
JQMIGRATE: Migrate is installed, version 3.0.0
SignalR: Client subscribed to hub 'prismhub'.
SignalR: Negotiating with '/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22prismhub%22%7D%5D'.
SignalR: serverSentEvents transport starting.
SignalR: This browser doesn't support SSE.
SignalR: serverSentEvents transport failed to connect. Attempting to fall back.
SignalR: foreverFrame transport starting.
SignalR: Binding to iframe's load event.
SignalR: Iframe transport started.
SignalR: foreverFrame transport connected. Initiating start request.
SignalR: The start request succeeded. Transitioning to the connected state.
SignalR: Now monitoring keep alive with a warning timeout of 13333.333333333332, keep alive timeout of 20000 and disconnecting timeout of 30000
Connected to signalR hub
SignalR: foreverFrame transport timed out when trying to connect.
**SignalR: Triggering client hub event 'sendUpdatedChange' on hub 'prismHub'.**

The notifications don't appear to be working in Chrome. In the log, I can see that SignalR is pushing out the notifications:

SignalR: Window unloading, stopping the connection.
SignalR: Stopping connection.
SignalR: EventSource calling close().
SignalR: Fired ajax abort async = false.
SignalR: Stopping the monitoring of the keep alive.
JQMIGRATE: Migrate is installed, version 3.0.0
SignalR: Client subscribed to hub 'prismhub'.
SignalR: Negotiating with '/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22prismhub%22%7D%5D'.
SignalR: serverSentEvents transport starting.
SignalR: Attempting to connect to SSE endpoint 'http://localhost:61159/signalr/connect?transport=serverSentEvents&clientPro…FNE6BKzqphux4&connectionData=%5B%7B%22name%22%3A%22prismhub%22%7D%5D&tid=9'.
SignalR: EventSource connected.
SignalR: serverSentEvents transport connected. Initiating start request.
SignalR: The start request succeeded. Transitioning to the connected state.
SignalR: Now monitoring keep alive with a warning timeout of 13333.333333333332, keep alive timeout of 20000 and disconnecting timeout of 30000
Connected to signalR hub
**SignalR: Triggering client hub event 'sendUpdatedChange' on hub 'prismHub'.
SignalR: Triggering client hub event 'sendUpdatedChange' on hub 'prismHub'.
SignalR: Triggering client hub event 'sendUpdatedChange' on hub 'prismHub'.**

But the data in my view is not changing (as it does in Internet Explorer). This problem occasionally occurs in IE. Also, refreshing a page appears to break the hub connection. From IE console:

HTML1300: Navigation occurred.
File: AllChanges
JQMIGRATE: Migrate is installed, version 3.0.0
SignalR: Client subscribed to hub 'prismhub'.
SignalR: Negotiating with '/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22prismhub%22%7D%5D'.
SignalR: serverSentEvents transport starting.
SignalR: This browser doesn't support SSE.
SignalR: serverSentEvents transport failed to connect. Attempting to fall back.
SignalR: foreverFrame transport starting.
SignalR: Binding to iframe's load event.
SignalR: Iframe transport started.
SignalR: foreverFrame transport connected. Initiating start request.
SignalR: The start request succeeded. Transitioning to the connected state.
SignalR: Now monitoring keep alive with a warning timeout of 13333.333333333332, keep alive timeout of 20000 and disconnecting timeout of 30000
Connected to signalR hub
SignalR: foreverFrame transport timed out when trying to connect.

It is worth noting that these requests make an ajax call to the controller that hits the database with a linq query, returning a list of data:

View JS

$(document).ready(function () {
    FetchChanges();
    notifications.client.sendUpdatedChange = function () { FetchChanges(); };
}

function FetchChanges() {
    var model = $('#divChanges');
    $.ajax({
        url: '/Changes/AllChangesItems',
        contentType: 'application/html ; charset:utf-8',
        type: 'GET',
        dataType: 'html',
    })
    .done(function (result) {
        model.empty().append(result);
    })
}

Controller Action

public ActionResult AllChangesItems()
{
    var username = CurrentUser().UserName;
    var changes = db.Changes;

    List<ChangeListingViewModel> vm = new List<ChangeListingViewModel>();
    foreach (var c in changes)
    {
        vm.Add(new ChangeListingViewModel(c));
    }

    return PartialView("_ActiveItems", vm.ToList());
}

where ChangeListingViewModel contains two linq queries fetching the child rows (can provide code if revelant):

However, a 'simpler' query seems to work fine in IE and Chrome, i.e. the push notifications trigger JS functions that update the view:

public void PinChange(int id)
{
    CurrentUserDetails().User.PinnedChanges.Add(db.Changes.Find(id));
    db.SaveChanges();
    PrismHub.NotifyPinnedChange();
}

My first thought is that some kind of timeout is occurring, but I'm not sure why that would differ between browsers. Any suggestions would be greatly appreciated.

EDIT: Updated with Hub info EDIT 2: Updated hub method to be consistent with other snippets.

Here is the snippet of my hub class:

Hub

[HubName("prismHub")]
public class PrismHub : Hub
{
    private static IHubContext context = GlobalHost.ConnectionManager.GetHubContext<PrismHub>();

    [HubMethodName("notifyUpdatedChange")]
    public static void NotifyUpdatedChange()
    {
        context.Clients.All.sendUpdatedChange();            
    }
}
like image 724
Rapscallion Avatar asked Sep 14 '17 14:09

Rapscallion


1 Answers

Accidentally stumbled upon the solution. After several weeks of searching I encountered this post: signalr client hub events not being triggered within a jquery .ready() method

This issue was solved by addressing this piece of JS in the view:

$(document).ready(function () {
    FetchChanges();
    notifications.client.sendUpdatedChange = function () { FetchChanges(); };
}

Moving the SignalR function mapping outside of the $(document).ready() resolved it:

$(document).ready(function () {
    FetchChanges();    
}
notifications.client.sendUpdatedChange = function () { FetchChanges(); };

I have yet to discover why this is a problem, but I'm happy to have found a solution.

like image 127
Rapscallion Avatar answered Oct 03 '22 20:10

Rapscallion