Erste Schritte mit SignalR

SignalR ist eine von Microsoft entwickelte Client- und Server-Bibliothek. Besser beschreibt das Dino Esposito:

“SignalR ist eine integrierte Client- und Server-Bibliothek, die browserbasierten Clients und ASP.NET-basierten Serverkomponenten die bidirektionale und mehrstufige Kommunikation ermöglicht.

Anders ausgedrückt ist die Kommunikation nicht auf einen einzelnen, statusfreien Datenaustausch des Typs Anforderung/Antwort beschränkt, sondern sie dauert an, bis sie ausdrücklich beendet wird. Die Kommunikation findet über eine dauerhafte Verbindung statt, wobei der Client mehrere Nachrichten an den Server senden kann, auf die der Server antwortet. Und vor allem kann der Server asynchrone Nachrichten an den Client senden.”

Ein einfacher Chat

Im folgenden, zeige ich wie immer kurz und knackig, ein absolut einfaches Beispiel für die Verwendung bzw. den Einsatz von SignalR.

1.) Mittels NuGet installieren wir SignalR:

Install-Package SignalR

Folgende Komponenten werden dabei installiert und referenziert:

• Newtonsoft.Json 4.5.7.
• SignalR.Server 0.5.2.
• SignalR.Hosting.Common 0.5.2.
• SignalR.Hosting.AspNet 0.5.2.
• jQuery 1.6.4.
• SignalR.Js 0.5.2.
• SignalR 0.5.2.

2.) Anschließend schreiben wir eine Klasse, die von der Klasse SignalR.Hubs.Hub ableitet:

public class SimpleChatHub : Hub
{
    public void Send(string nickname,string message)
    {
        Clients.HandleMessage(string.Format("{0} wrotes on {2}: {1}", nickname, message, DateTime.Now.ToShortTimeString()));
    }
}

3.) Für das Anzeigen von Informationen referenzieren die notwendigen Scripte und erstellen uns ein paar Felder

(Hinweis: Um die Nachricht mittels Entertaste zu senden, verwende ich zur Hilfe das Plugin JQByte OnEnter.)

<script type="text/javascript" src='@Url.Content("~/Scripts/jquery.signalR-0.5.2.js")'></script>
<script type="text/javascript" src='@Url.Content("~/Scripts/jquery.OnEnter.js")'></script>
<script type="text/javascript" src="@Url.Content("/signalr/hubs")"></script>

<h3>Simple SignalR Chat:</h3>
<input type="text" id="nickname" />
<input type="text" id="msg" onenter="SendMessage();" />
<button id="sendBtn">Send</button>
<ul id='messages'></ul>

4.) In einem Script dann, starten wir unseren SimpleChatHub und handlen das Versenden der Nachrichten.

<script type="text/javascript">

    var hub;
    $(document).ready(function () {
        $('#nickname').val('').focus();

        ConnectingChatHub();
        hub.HandleMessage = function (message) {
            $('<li>').text(message).prependTo('#messages');
        };

        $('#sendBtn').click(function (){ SendMessage()});
    });


    function ConnectingChatHub() {
        hub = $.connection.simpleChatHub;
        $.connection.hub.start()
        .done(function () { })
        .fail(function () { alert("Could not Connect!") });
    }

    function SendMessage() {
        var nickname = $('#nickname').val();
        var msg = $('#msg').val();
        if (msg != '') {
            hub.send(nickname, msg);
            $('#msg').val('').focus();
        }
    }


</script>

Das war’s auch schon, viel Spaß beim entwickeln : )

Achja, am 03.09.2012 gibt es einen .NET Online User Group Termin zum Thema SignalR mit Christian Weyer.