[C#|Visual Studio] ASP .NET SignalR: JavaScript Hubs Client API

Najczęściej komunikować z hubami będziemy się chcieli z poziomu kodu wykonywanego w środowisku przeglądarki. Klient oparty na bibliotece jQuery nie jest jednak jedynym dostępnym klientem signalR. Do dyspozycji mamy także klienta .NET oraz między innymi WP8, WinRT czy C++. Konsumentami mogą być także inne huby.

Klient JS może komunikować się z serwerem w dwóch trybach:

• bazującym na późnym wiązaniu i opartym na wołaniu metod i zdarzeń poprzez podawanie ich nazw jako stringów
• bardziej zaawansowanym, opartym na dynamicznie wygenerowanych proxy 

Kluczem do dynamicznego proxy jest endpoint /signalr/hubs/, który generuje kod kliencki na podstawie kodu w .NET. Kod taki można także wygenerować statycznie za pomocą narzędzie signalr.exe (NuGet Microsoft.AspNet.SignalR.Utils).

Przykładowe wywołania klienckie w oparciu o dynamic proxy.

<script>
    $(function () {
        var hub = $.connection.modernChat;

        hub.client.newMessage = function(msg){
         console.log(msg);
        }

        $.connection.hub
            .start()
            .done(function () {
          hub.server.sendMessage('Hello');    
            });
    });
</script>

Huby stają się propercjami na $.connection. Wszystkie metody pogrupowane są w hub.server.* (metody zdefiniowane po stronie serwera) oraz hub.client.* (metody klienckie wołane przez serwer). Wywołanie metody start rozpoczyna asynchroniczne negocjowanie protokołu i zwraca obiekt promise. Jako parametr można przekazać obiekt, w którym wybierzemy, z jakich sposobów transportu chcemy korzystać (SignalR wybierze ten najlepszy).

var started = hub.start({
    transport: [
        'webSockets',
        'longPolling',
        'serverSentEvents',
        'foreverFrame'
    ]
});

started.done(function () {
    console.log('connected, transport: ' +
       hub.transport.name);
});

Do celów diagnostycznych warto uruchomić po stronie klienckiej tryb konsolowego logowania za pomocą poniższego polecenia.

$.connection.hub.logging = true;

Przy użyciu late binding możemy uzyskać identyczny jak powyżej efekt w poniższy sposób.

var connection = $.hubConnection();
var proxy = connection.createHubProxy('modernChat');
proxy.on('newMessage', function(msg){
 console.log(msg);
});
connection.start();
proxy.invoke('sendMessage', 'Hello');