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))); } };