SignalR not always ready after start().done()?

Question

I have got a small project working with SignalR, however i am getting some very inconsistent behavior.

<script type="text/javascript">
    $(function () {
        var chat = $.connection.brewBattleHub;
        $.connection.hub.start().done(function () {
            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.server.roll($("#username").val(), $("#drinkname").val());
            });
            chat.server.sendMessage("SignalR loaded...");
        });
    });
</script>

When i load the page, sometimes i am seeing the message "SignalR loaded", other times i am not.

There's is some other functionality on the page also, and sometimes this does not work either. If i click buttons and make things happen enough it will eventually all come through in one go... from this point it is all golden and works perfectly.

does start().done()? not ensure it is all ready?

=== addendum, i am not referencing jquery mobile (google mentioned there is a bug when doing so)

Answer 1

I had a similar issue this week except that the code in .done() never ran. I enabled logging and nothing was ever logged. Checking the browser's console there were no errors. Looking in the browser's dev tools I could see that there was no network activity when I called start(). I confirmed that the proxy returned by $.connection.myhubclass had all my methods on it so I knew it could talk to the server and that the server side code was set up right.

After reviewing the code and documentation over and over again I was convinced that I wasn't doing anything wrong. SignalR is so simple it's pretty tough to do it wrong if you follow the examples. I beat my head on the desk for quite a long time trying to figure this out.

Then I noticed that if I ran SignalR's start method from the console it would work. That led me to believe that it was trying to start the connection too early. I solved my problems by changing the initialization code from this:

$.connection.hub.start().done(function () {
  //Do interesting stuff
});

To this:

setTimeout(function () {
    $.connection.hub.start().done(function () {
      //Do interesting stuff
    });
}, 5000);

I'm sure I can reduce that delay from 5 seconds to something shorter but the extra time appeared to be what was needed to let the browser get itself ready to create the connection. Once that delay was in there the logging started working, the connection came up, the server side OnConnected() ran and done() was run on the client.

After figuring this out I double checked the order of my javascript loading, thinking maybe I was loading something out of order but the order is right according to the SignalR samples. I load jQuery, SignalR, /signalr/hubs, then my script file that initializes everything.

I am open to suggestions as to why that delay was needed. I don't see it in any of the docs so I know it could be something I did. Fortunately for this page a minor delay before starting up SignalR is not a problem.