Signalr Javascript Client Proxy Multiple Events

Question

I checked signalr hubs api guide javascript client proxy documentation. I know how to append same client function without overriding the function. But when it comes to start function, I couldn't find anything about it. Just some javascript tricks. So I created a very simple example. Here what I do and what I want to do:

Here a very simple hub:

[HubName("exampleHub")]
public class ExampleHub : Hub
{
    public void ExampleMessage()
    {
        this.Clients.All.message("This message goes to two different client method!");
    }
}

And here is javascript file:

function ExampleViewModel(exampleHubProxy) {

    var self = this;

    self.init = function () {
        exampleHubProxy.invoke('exampleMessage');
    };
};

$(function () {
    var connection = $.hubConnection();
    var exampleHubProxy = connection.createHubProxy('exampleHub');
    var exampleViewModel = new ExampleViewModel(exampleHubProxy);

    exampleHubProxy.on('message', function (clientEvent1) {
        console.log(clientEvent1);
    });

    exampleHubProxy.on('message', function (clientEvent2) {
        console.log(clientEvent2);
    });

    $.connection.hub.start().done(exampleViewModel.init);
})

And output is two times 'This message goes to two different client method!' log. Everything as I expected. And also that's what I want in generated proxy like this:

$(function () {
    var exampleHubProxy = $.connection.exampleHub;
    var exampleViewModel = new ExampleViewModel(exampleHubProxy);
    var anotherViewModel = new AnotherViewModel(exampleHubProxy);


    //I know this is not valid. I am looking for something like this.
    exampleHubProxy.client.message += function (clientEvent1) {
        console.log(clientEvent1);
    };

    exampleHubProxy.client.message += function (clientEvent2) {
        console.log(clientEvent2);
    };

    //Real question starts here
    //This is what I can't do in without generated proxies!
    $.connection.hub.start+=exampleViewModel.init;
    $.connection.hub.start+=anotherViewModel.init;

    $.connection.hub.start();
})

So the question's root cause is that I have different ViewModel javascript files and I should start them in same one page. That means I have to carry the $.connection.hub.start() function to somewhere at bottom of the page. But those javascript files have no relation, so when one works, other may not. When one javascript file started the hub, other may want to modify the client object and start it again. So AFAIK this is not a good idea. I also checked this question but It didn't give me a nice solution.

Hallvar Helleseth Hallvar Helleseth · Accepted Answer · 2013-12-22T10:12:46

Use the fact that start() returns a promise and add multiple handlers to when it is fulfilled.

The promise is a jQuery Deferred object: http://api.jquery.com/category/deferred-object/

$(function () {
    var exampleHubProxy = $.connection.exampleHub;
    var exampleViewModel = new ExampleViewModel(exampleHubProxy);
    var anotherViewModel = new AnotherViewModel(exampleHubProxy);

    exampleHubProxy.on('message', function (clientEvent1) {
        console.log(clientEvent1);
    });

    exampleHubProxy.on('message', function (clientEvent2) {
        console.log(clientEvent2);
    });

    //Real question starts here
    var startPromise = $.connection.hub.start();
    // start() returns a promise
    startPromise.then(exampleViewModel.init);
    startPromise.then(anotherViewModel.init);

    $.connection.hub.start();
});

Signalr Javascript Client Proxy Multiple Events

1 Answers