SignalR – pierwsze kroki

Zanim przejdę do tytułowej biblioteki chciałbym, aby czytelnik odpowiedział na następujące pytanie. Dlaczego tworzenie stron internetowych jest trudne?
Jakieś pomysły? Moim, zdaniem największą trudnością jest wspieranie wielu różnych przeglądarek, które z kolei w zależności od wersji wpierają lub nie pewne standardy. Króluje tutaj oczywiście IE, w którym wszystko musi być inaczej, na szczęście powoli to się zmienia. Z powyższym problemem dobrze radzi sobie jQuery, która zdejmuje z barków programisty część odpowiedzialności za obsługę wielu przeglądarek. Innymi słowy, to co napiszemy w jQuery zadziała niezależnie od przeglądarki. Jednak jQuery nie jest odpowiedzią na wszystkie problemy.

Większość komunikacji, między stroną www(klientem) a serwerem opiera się o request – response, czyli klient wysyła żądanie na serwer (synchronicznie lub asynchronicznie) – natomiast serwer odpowiada zwracając rezultat np. autoryzując użytkownika. W takiej komunikacji to zawsze klient inicjuje komunikację. Co jednak, gdybyśmy chcieli odwrócić komunikację? Chcielibyśmy wysłać do wszystkich klientów wiadomość, że zaszła jakaś zmiana na serwerze o której powinni wszyscy wiedzieć np. zalogował się nowy użytkownik do chatu lub pojawiła się nowa promocja w sklepie internetowym.
Komunikacja taka nosi nazwę push lub broadcast.

Jak zrealizować taką komunikację? W Wcf można zastosować duplex a jak to zrobić na stronie www. Jednym z takich mechanizmów jest longpolling – mechanizm ten symuluje komunikacje w stylu duplex w następujący sposób. Z klienta www wysyłamy żądnie asynchroniczne (ajax) na serwer, jednak serwer nie odpowiada od razu. Serwer odpowie wtedy, gdy pojawi się taka potrzeba. W ten sposób można stworzyć komunikacją, która udaje push. Co jednak, gdy klient zamknie przeglądarkę co się stanie z żądaniem na serwerze? Jak, dać serwerowi znać, że klient jest obecny i jest gotowy, aby odbierać wiadomości? Jak zapisać takie, żądanie po stronie serwera? Czy są lepsze mechanizmy, które nie wymagają ciągłego wysyłania żądań? Które przeglądarki wspierają takie mechanizmy? Jak widać pytań jest dużo, dlaczego to wszystkie pisze. Chciałbym, aby czytelnik uświadomił sobie jaką świetną biblioteką jest SignalR. Dlaczego jest taka świetna? Ponieważ odpowiada na powyższe pytania za nas;) Czas na jakiś przykład.

W przykładzie, wykorzystamy VS2012 projekt typu Asp.Net MVC 4 Web Application. Po utworzeniu takiego projektu, załóżmy że chcemy zrealizować następujący scenariusz: chcemy, aby pewien użytkownik np. admin był wstanie wysłać wiadomość do wszystkich obecnych na stronie. Nie będę tutaj wprowadzał żadnego mechanizmu autoryzacji po prostu dodamy akcję Admin, w kontrolerze Home, która wygeneruje formularz, z którego wyślemy wiadomość do wszystkich.

Kod metody obsługującą akcję, Admin sprowadza się więc tylko do zwrócenia widoku.

public ActionResult Admin()
{
   return View();
}

public ActionResult Admin()

{

return View();

}

Kod widoku dla, tej akcji zawiera na razie tylko pole do wpisania wiadomości i przycisk.
Poniżej kod widoku z pliku Admin.cshtml

@{
    ViewBag.Title = "Admin";
}

<h2>Admin</h2>
<div class="msg-container">
    <input type="text" id="message"/>
    <input type="button" id="send" value="Wyślij"/>
</div>

ViewBag.Title = "Admin";

}

<h2>Admin</h2>

</div>

Dodajmy teraz referencje do SignalR w naszym projekcie, w tym celu należy wpisać install-package Microsoft.AspNet.SignalR do Package Manage Console. Po zainstalowaniu SignalR utwórzmy katalog Hubs w naszym projekcie a w nim klasę o nazwie AdminHub. Kod klasy poniżej.

using Microsoft.AspNet.SignalR;

namespace SignalRFirstStep.Hubs
{
    public class AdminHub : Hub
    {
        public void Send(string message)
        {
            Clients.Others.showMessage(message);
        }
    }
}

using Microsoft.AspNet.SignalR;

namespace SignalRFirstStep.Hubs

{

public class AdminHub : Hub

{

public void Send(string message)

{

Clients.Others.showMessage(message);

}

Jak widać AdminHub dziedziczy po klasie Hub, która jest zdefiniowana w przestrzeni nazw Microsoft.AspNet.SignalR. Klasa hub zapewnia komunikację pomiędzy klientami a serwerem. Metoda Send zostanie wywołana w odpowiedzi na wciśniecie przycisku Wyślij, w tej metodzie korzystamy z właściwości Clients dzięki, której możemy wywołać metodę showMessage, po stronie klient, którą wkrótce zdefiniujemy. Właściwość Others jest typu dynamic dlatego nie uzyskamy tutaj żadnego Intellisense, a sprawdzenie czy metoda istnieje odbędzie się w momencie próby wywołania jej.
Pora teraz zmodyfikować plik Admin.cshtml, tak aby korzystał z SignalR.

<h2>Admin</h2>

<div class="msg-container">
    <input type="text" id="message"/>
    <input type="button" id="send" value="Wyślij"/>
</div>

<div id="messageSent" title="Okno">Wiadomość wysłana</div>

@section scripts
{
    <script src="~/Scripts/jquery.signalR-1.1.3.min.js"></script>
     <script src="~/signalr/hubs"></script>

    <script>
        $(function () {
            $("#messageSent").dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 500
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });
            var adminHub = $.connection.adminHub;
            
            $.connection.hub.start().done(function () {
                $('#send').click(function () {
                    adminHub.server.send($('#message').val());
                    $('#messageSent').dialog("open");
                });
            });
        });
    </script>
}

<h2>Admin</h2>

</div>

@section scripts

{

$(function () {

$("#messageSent").dialog({

autoOpen: false,

show: {

effect: "blind",

duration: 500

hide: {

effect: "explode",

duration: 1000

}

});

var adminHub = $.connection.adminHub;

$.connection.hub.start().done(function () {

$('#send').click(function () {

adminHub.server.send($('#message').val());

$('#messageSent').dialog("open");

});

</script>

}

Dodałem tutaj referencje do plików jquery.signalR-1.1.3.min.js oraz do pliku, który jest generowany przez SignalR ~/signalr/hubs, referencja do jQuery oraz jQurery-ui dodana jest w pliku _Layout.cshtml przez mechanizm bundle. Tworzymy tutaj również okno dialogowe, które wyświetlimy po wysłaniu wiadomości. Żeby wysłać wiadomość musimy pobrać obiekt huba, w naszym przypadku jest właściwość adminHub obiektu connection. Nazwa właściwości jest tutaj nieprzypadkowa jest to nazwa klasy AdminHub zapisana w notacji CamelCase. Połączenie z serwerem nawiązujemy poprzez wywołanie metody $.connection.hub.start(). Metoda ta jest asynchroniczna i gdy zostania ona zakończona, czyli połączenie zostanie nawiązane, dodajemy obsługę do zdarzenia click przycisku Wyślij. Następnie wywołujemy metodę send (metoda jest zdefiniowana w klasie AdminHub i zapisana w konwencji CamelCase), do której przekazujemy wiadomość.
Po wysłaniu wiadomości pokazujemy komunikat wiadomość wysłana.

Aby można było nawiązać komunikację za pomocą SignalR należy zrobić jeszcze jedną rzecz mianowicie zmodyfikować odpowiednio tablice tras w następujący sposób.

public class MvcApplication : System.Web.HttpApplication
{
        protected void Application_Start()
        {
            RouteTable.Routes.MapHubs();
            .....
        }
}

public class MvcApplication : System.Web.HttpApplication

{

protected void Application_Start()

{

RouteTable.Routes.MapHubs();

.....

}

SignalR do komunikacji używa adresu /signalr metoda RouteTable.Routes.MapHubs() modyfikuje odpowiednio tabele tras, aby ten adres obsługiwany był przez SignalR. W tej chwili mam już mechanizm odpowiedzialny za wysyłanie wiadomości, żaden klient jednak na nie nie czeka. Dodajmy, więc kod klienta. Klient będzie, znajdował się pod adresem /Home/Client. Poniżej kod akcji oraz widoku Client.cshtml

@section scripts
{
    <script src="~/Scripts/jquery.signalR-1.1.3.min.js"></script>
    <script src="~/signalr/hubs"></script>        
    <script>
        $(function() {
            $("#announcement").dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration:500
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });

            $.connection.hub.start();
            var adminHub = $.connection.adminHub;
            
            adminHub.client.showMessage = function (message) {
                var $announcement = $('#announcement');
                $announcement.html($('<div />').text(message).html());
                $announcement.dialog("open");

            };

        });

    </script>
}
<h2>Klient</h2>

<div id="announcement" title="Ogłoszenie"></div>

@section scripts

{

$(function() {

$("#announcement").dialog({

autoOpen: false,

show: {

effect: "blind",

duration:500

hide: {

effect: "explode",

duration: 1000

}

});

$.connection.hub.start();

var adminHub = $.connection.adminHub;

adminHub.client.showMessage = function (message) {

var $announcement = $('#announcement');

$announcement.html($('<div />').text(message).html());

$announcement.dialog("open");

};

});

</script>

}

<h2>Klient</h2>

Podobnie jak w przypadku admina, dodajemy referencje do plików jquery.signalR-1.1.3.min.js i signalr/hubs i tworzymy okno dialogowe, w którym znajdzie się otrzymana wiadomość. Żeby otrzymywać wiadomości musimy nawiązać połączenie z serwerem robimy to wywołując funkcje $.connection.hub.start();. Następnie definiujemy funkcje showMessage, która zostanie wywołana przez serwer w klasie AdminHub.

Ok teraz test.

Wszystko działa i w kilka chwil napisaliśmy komunikacją push. SignalR jest rewelacyjną biblioteką, ponieważ sama zajmuje się wybraniem odpowiedniego sposobu komunikacji w zależności jakiej przeglądarki używa klient. Poniżej lista używanych technologii transportu w zależności od przeglądarki.

Umiemy wysyłać wiadomości z serwera do klientów, ale nie wiemy ilu klientów dostało wiadomość i czy w ogóle ta wiadomość do kogoś doszła. SignalR nie udostępnia powiadomienia o tym czy wiadomość została dostarczona. Można jednak taką rzecz zrobić samemu dodając wywołanie metody serwera po otrzymaniu wiadomości w kliencie. Polecam spróbować samemu wykonać takie ćwiczenie: aby po wysłaniu wiadomości w panelu administratora pojawiała się liczba klientów, do których wiadomość została dostarczona.

Link do źródeł projektu

Podobne posty

Mity o sieci

7 Komentarzy

Skip to comment form ↓

Piotr Ptak

24 września 2013 na 19:30 (UTC 2) Link do tego komentarza

Odpowiedz

Bardzo fajne i przyjemne wprowadzenie do SignalR z fajnym przykładem – w końcu w sieci jakiś inny przykład niż czat z wykorzystaniem SignalR :-). Mam nadzieję, że wrzucisz jeszcze jakieś posty z opisem SignalR.
Mateusz

26 września 2013 na 09:28 (UTC 2) Link do tego komentarza

Odpowiedz

Dzięki Rafał. Fajnie, że ktoś na blogach zahacza o tematy ważne dla Juniorów. Mam prośbę czy mógłbyś kiedyś jeden wpis poświęcić podzieleniu plików w projekcie? Chodzi mi o to żebyś pokazał jak dobrze rozplanować projekt i gdzie umieścić poszczególne pliki (czyli obrazki w images..itp)
1. graf
  
  26 września 2013 na 11:07 (UTC 2) Link do tego komentarza
  
  Odpowiedz
  
  Ok, będę miał to na uwadze. Niestety rzadko zdarza się tworzyć coś od początku i strukturę projektu dostaje się w spadku. Struktura projektów zależy od wzorców projektowych i architektury użytej w projekcie. Jednym wpisem się tego nie omówi, ale postaram coś ciekawego na ten temat napisać.
Adrian

26 września 2013 na 20:15 (UTC 2) Link do tego komentarza

Odpowiedz

Send jest czasownikiem nieregularnym, a jego przeszła forma brzmi sent.

Swoją drogą świetny artykuł. Bardzo przystępny wstęp do tej genialnej biblioteki.
1. graf
  
  26 września 2013 na 23:01 (UTC 2) Link do tego komentarza
  
  Odpowiedz
  
  No tak, analfabetyzm tutaj propaguje. Dzięki za zwrócenie uwagi.
Mateusz

26 października 2013 na 14:13 (UTC 2) Link do tego komentarza

Odpowiedz

Czesc,

moglbys opisac co nieco o metodzie OnRecconected?
1. graf
  
  29 października 2013 na 08:11 (UTC 2) Link do tego komentarza
  
  Odpowiedz
  
  Niestety nowe obowiązki nie pozwalają mi na prowadzenie bloga, ale mam zamiar do tego powrócić. Póki co jednak proponuje Ci przeczytać artykuł http://www.asp.net/signalr/overview/signalr-1x/hubs-api/handling-connection-lifetime-events

Rafał Hały

Not only .Net

SignalR – pierwsze kroki

7 Komentarzy

Piotr Ptak

Mateusz

graf

Adrian

graf

Mateusz

graf

Odpowiedz na „Mateusz” Anuluj pisanie odpowiedzi

Najnowsze wpisy

Archiwa

Użytkownicy na stronie

Najnowsze komentarze

Copyright

Rafał Hały

Not only .Net

SignalR – pierwsze kroki

7 Komentarzy

Piotr Ptak

Mateusz

graf

Adrian

graf

Mateusz

graf

Odpowiedz na „Mateusz” Anuluj pisanie odpowiedzi

Tagi

Najnowsze wpisy

Archiwa

Użytkownicy na stronie

Najnowsze komentarze

Copyright