SignalR: wywoływanie metod

Dzisiaj trochę więcej szczegółów na temat, jak można wywoływać metody w Hub API. W ostatnim wpisie, zaimplementowaliśmy klasę, która wykonuje metodę po wszystkich klientach (broadcast). SignalR ma ogromne możliwości i istnieje wiele innych wzorców.

Dla przypomnienia broadcast wygląda następująco:

public void SendMessage(string message)
{
  Clients.All.newMessage(string.Format("{0}: {1}",DateTime.Now,message));
}

Clients posiada kilka metod, służących do wysyłania wiadomości w różnych sposób. Na przykład, aby wykonać metodę wyłącznie po stronie klienta, który wysłał zapytanie do serwera można:

public void SendMessage(string message)
{
  Clients.Caller.newMessage(string.Format("{0}: {1}",DateTime.Now,message));
}

Innymi słowy, gdy przeglądarka wywołuje SendMessage, newMessage zostanie wykonane wyłącznie w tej przeglądarce (a nie jak wcześniej we wszystkich podłączonych klientach).

Inną ciekawą konstrukcją jest wywołanie metody we wszystkich klientach, oprócz tego który zainicjował połączenie (wywołał metodę serwerową):

public void SendMessage(string message)
{
  Clients.Others.newMessage(string.Format("{0}: {1}",DateTime.Now,message));
}

Istnieje opcja wywołania metody dla określonego nazwą (string) połączenia:

Clients.Client("connectionID").newMessage(string.Format("{0}: {1}",DateTime.Now,message));

Analogicznie, wszystkie połączenia oprócz tych przekazanych jako parametr:

public void SendMessage(string message)
{
  Clients.AllExcept("connectionID1","connectionId2").newMessage(string.Format("{0}: {1}",DateTime.Now,message));
}

Jeśli znamy nazwę użytkownika (IUserIdProvider), możemy wywołać metodę po stronie klienta, który używa określonego loginu:

public void SendMessage(string message)
{
  Clients.User("user1").newMessage(string.Format("{0}: {1}",DateTime.Now,message));
}

Bardzo ciekawym rozwiązaniem są grupy. Umożliwiają one implementacje wzorca polegającym na publish\subscribe. Dzięki grupom, można wywoływać metody, wyłącznie w tych klientach, które nalezą do konkretnej grupy.

public void SendMessage(string message)
{
  Clients.Group("group_name").newMessage(string.Format("{0}: {1}",DateTime.Now,message));
}

Powyższy kod wywoła newMessage w klientach należących do group_name. Pozostaje pytanie, jak dodać użytkownika (połączenie) do grupy? Wystarczy:

public class MyFirstHub : Hub
{
   public void AddToGroup(string groupName)
   {
       Groups.Add(Context.ConnectionId, groupName);
   }
   public void RemoveFromGroup(string groupName)
   {
       Groups.Remove(Context.ConnectionId, groupName);
   }
}

Add automatycznie stworzy grupę jeśli takowa nie istnieje. Kod dodaje połączenie skojarzone z klientem, który wywołuje właśnie serwerową metodę.

Powyższy kod jest jednak nie do końca poprawny. Zaglądając do dokumentacji, zobaczymy:

 Task Add(string connectionId, string groupName);

Oznacza to, że jest to metoda asynchroniczna. W praktyce, wywołanie powyższego kodu, zwróci rezultat natychmiast, mimo, że nie ma pewności, że połączenie zostało dodane do konkretnej grupy.

Z tego względu dużo lepiej jest:

public class MyFirstHub : Hub
{
   public async void AddToGroup(string groupName)
   {
       await Groups.Add(Context.ConnectionId, groupName);
   }
   public async void RemoveFromGroup(string groupName)
   {
       await Groups.Remove(Context.ConnectionId, groupName);
   }
}

W ostatnim poście również wspomniałem, że należy dodać następującą referencję:

<script src="~/signalr/hubs"></script>    

Tak naprawdę, jest to referencja do automatycznie wygenerowanego kodu JavaScript. Sprawdźmy, co dokładnie jest wygenerowane:

/*!
 * ASP.NET SignalR JavaScript Library v2.1.0
 * http://signalr.net/
 *
 * Copyright Microsoft Open Technologies, Inc. All rights reserved.
 * Licensed under the Apache 2.0
 * https://github.com/SignalR/SignalR/blob/master/LICENSE.md
 *
 */

/// <reference path="..\..\SignalR.Client.JS\Scripts\jquery-1.6.4.js" />
/// <reference path="jquery.signalR.js" />
(function ($, window, undefined) {
    /// <param name="$" type="jQuery" />
    "use strict";

    if (typeof ($.signalR) !== "function") {
        throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
    }

    var signalR = $.signalR;

    function makeProxyCallback(hub, callback) {
        return function () {
            // Call the client hub method
            callback.apply(hub, $.makeArray(arguments));
        };
    }

    function registerHubProxies(instance, shouldSubscribe) {
        var key, hub, memberKey, memberValue, subscriptionMethod;

        for (key in instance) {
            if (instance.hasOwnProperty(key)) {
                hub = instance[key];

                if (!(hub.hubName)) {
                    // Not a client hub
                    continue;
                }

                if (shouldSubscribe) {
                    // We want to subscribe to the hub events
                    subscriptionMethod = hub.on;
                } else {
                    // We want to unsubscribe from the hub events
                    subscriptionMethod = hub.off;
                }

                // Loop through all members on the hub and find client hub functions to subscribe/unsubscribe
                for (memberKey in hub.client) {
                    if (hub.client.hasOwnProperty(memberKey)) {
                        memberValue = hub.client[memberKey];

                        if (!$.isFunction(memberValue)) {
                            // Not a client hub function
                            continue;
                        }

                        subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue));
                    }
                }
            }
        }
    }

    $.hubConnection.prototype.createHubProxies = function () {
        var proxies = {};
        this.starting(function () {
            // Register the hub proxies as subscribed
            // (instance, shouldSubscribe)
            registerHubProxies(proxies, true);

            this._registerSubscribedHubs();
        }).disconnected(function () {
            // Unsubscribe all hub proxies when we "disconnect".  This is to ensure that we do not re-add functional call backs.
            // (instance, shouldSubscribe)
            registerHubProxies(proxies, false);
        });

        proxies['myFirstHub'] = this.createHubProxy('myFirstHub'); 
        proxies['myFirstHub'].client = { };
        proxies['myFirstHub'].server = {
            addToGroup: function (groupName) {
                return proxies['myFirstHub'].invoke.apply(proxies['myFirstHub'], $.merge(["AddToGroup"], $.makeArray(arguments)));
             },

            removeFromGroup: function (groupName) {
                return proxies['myFirstHub'].invoke.apply(proxies['myFirstHub'], $.merge(["RemoveFromGroup"], $.makeArray(arguments)));
             }
        };

        return proxies;
    };

    signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
    $.extend(signalR, signalR.hub.createHubProxies());

}(window.jQuery, window));

Jak widać, plik zawiera głównie proxy. Dzięki niemu, możemy w łatwy sposób w JavaScript wywołać kod C# znajdujący się na serwerze:

 proxies['myFirstHub'].server = {
            addToGroup: function (groupName) {
                return proxies['myFirstHub'].invoke.apply(proxies['myFirstHub'], $.merge(["AddToGroup"], $.makeArray(arguments)));
             },

            removeFromGroup: function (groupName) {
                return proxies['myFirstHub'].invoke.apply(proxies['myFirstHub'], $.merge(["RemoveFromGroup"], $.makeArray(arguments)));
             }
        };

Leave a Reply

Your email address will not be published.