ASP.NET: SignalR i Hub API

W poprzednim poście przedstawiłem framework SignalR oraz niskopoziomową klasę PersistentConnection. Zwykle jest ona trudna w użyciu i dlatego w praktyce dużo częściej korzysta się z Hub API.  Jak sama nazwa wskazuje, stanowi on koncentrator czyli miejsce gdzie składujemy metody zarówno wykonywane po stronie serwera jak i klienta. Dzięki niemu możemy wywołać metodę C# (serwer) jak i JavaScript (klient). Umożliwia on zatem komunikacje obustronną.

Spróbujmy zatem przerobić przykład z poprzedniego postu, aby używał Hub zamiast PersistentConnection. Najpierw oczywiście usuwamy MyFirstConnection i zastępujemy ją hub’em:

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

Nasz hub ma jedną metodę teraz – Send Message. Proszę zauważyć, że All jest typu dynamic i dlatego możemy jakąkolwiek metodę wykonać. Metody są definiowane w JavaScript dlatego naturalne jest, że taka metoda nie zostanie automatycznie wykryta przez VS.

Powyższy kod jest implementacją serwerowej metody  SendMessage.  Po odebraniu wiadomości jest ona wysyła do wszystkich klientów (broadcast). newMessage musi zatem zostać zdefiniowana w JavaScript po stronie klienta:

<script type="text/javascript">
    $(function () {

        var myFirstHub = $.connection.myFirstHub;
        myFirstHub.client.newMessage = function (message) {
            $('#messages').append('<li>' + message + '</li>');
        };

        $.connection.hub.start();
        
        $("#broadcast").click(function () {
            myFirstHub.server.sendMessage($('#msg').val());
        });

    });
    </script>

<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />

<ul id="messages"></ul>

Najpierw tworzymy hub’a a potem za pomocą obiektu server możemy wysyłać wiadomości do serwera. Analogicznie, istnieje możliwość definiowania metod po stronie klienta, które mogą być wykonywane przez serwer.

Należy koniecznie dodać referencje do automatycznie wygenerowanych hubów w JS:

<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.1.0.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>    

Na zakończenie wystarczy tylko zmapować hub’a do URL:

[assembly: OwinStartupAttribute(typeof(WebApplication9.Startup))]
namespace WebApplication9
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);
            app.MapSignalR();
        }
    }
}

W kolejnej części zajmiemy się bardziej szczegółowo wywoływaniem metod w SignalR.

Leave a Reply

Your email address will not be published.