Die Bibliothek SignalR ermöglicht Echtzeitanwendungen im Web und darüber hinaus. In diesem Artikel wird vorgestellt, wie die Vorabversion von SignalR für ASP.NET Core auf dem Server und einem einfachen JavaScript Client verwendet werden kann.

Als Beispiel dient uns hierbei der Klassiker: Wir werden einen einfachen Chat entwickeln, der SignalR einsetzt.

Aktuell ist ASP.NET Core SignalR in der Version 1.0.0-alpha1-final verfügbar. Bis zur finalen Version können sich somit noch einige Dinge ändern. Dieser Artikel spiegelt den aktuellen Stand zum Dezember 2017 wider. Die offizielle Ankündigung von Microsoft mit mehr Informationen ist hier auf MSDN zu finden.

Vorbedingungen

Folgendes muss vorab installiert sein:

ASP.NET Core Projekt erzeugen

Zunächst erzeugen wir ein neues ASP.NET Core Web-Projekt. Hierzu erstellen wir einen neuen Ordner und führen dort folgenden Befehl in einer Konsole aus:

> dotnet new web

NuGet Paket installieren

Jetzt können wir das SignalR Paket installieren. Dieses ist über NuGet verfügbar. Hierzu wird im Projektverzeichnis folgender Befehl in einer Konsole ausgeführt:

> dotnet add package Microsoft.AspNetCore.SignalR --version 1.0.0-alpha2-final

Hub erstellen

Im nächsten Schritt implementieren wir einen Hub für unseren Chat. Der Hub ist der zentrale Punkt für die Kommunikation über SignalR. In unserem Fall enthält der Hub nur eine Methode Send, die Nachrichten zu allen verbundenen Clients sendet.

1
2
3
4
5
6
7
8
9
10
11
12
13

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace ChatDemo
{
    public class ChatHub : Hub
    {
       public Task Send(string message)
        {
            return Clients.All.InvokeAsync("broadcast", message);
        }
    }
}

Über Clients.All.InvokeAsync wird ein Ereignis (hier broadcast) auf allen verbundenen Clients ausgelöst und der Parameter message übergeben.

Middleware konfigurieren

Als nächstes aktivieren wir SignalR in unserem ASP.NET Backend und konfigurieren eine Route für den ChatHub.

In der Startup.cs:

1
2
3
4

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

Hierdurch wird SignalR als Dienst registriert. Nachfolgend muss noch die Middleware in der Methode Configure aktiviert und konfiguriert werden:

1
2
3
4
5
6
7
8
9

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseFileServer();

    app.UseSignalR(routes =>
    {
        routes.MapHub<ChatHub>("chat");
    });
}

Innerhalb von UseSignalR können beliebige Routen für einzelne Hubs registriert werden. Hier erzeugen wir eine Route /chat für unseren ChatHub.

Durch die Methode UseFileServer wird zudem die Auslieferung von statischen Dateien aus dem wwwroot Ordner aktiviert. Dies benötigen wir in den nachfolgenden Schritten, bei denen wir einen einfachen Chat-Client mit HTML und JavaScript implementieren werden.

Server starten

Die Logik im Backend ist nun bereits vollständig implementiert. Damit wir nun mit dem Client fortfahren und einen Testlauf starten können, wird der Server gestartet. Hierzu wird wieder eine Konsole im Projektverzeichnis geöffnet und folgender Befehl ausgeführt:

> dotnet run

Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

SignalR Clientbibliothek installieren

Jetzt installieren wir den SignalR-Client über den Node Paketmanager. Hierzu wird folgender Befehl im Projektverzeichnis in einer Konsole ausgeführt:

> npm install @aspnet/signalr-client

Wenn das Paket installiert ist, kopieren wir die Datei signalr-client-1.0.0-alpha2-final.min.js aus dem Ordner “node_modules\@aspnet\signalr-client\dist\browser” in den Ordner “wwwroot”.

Hinweis für ältere Browser und IE11: Der SignalR-Client basiert auf ECMAScript 6. Sollen auch ältere Browser und der IE11 unterstützt werden, so kann alternativ die Datei “signalr-clientES5-1.0.0-alpha2-final.min.js” verwendet werden. Der später gezeigte JavaScript Code ist in ES5 implementiert, um möglichst viele Browser zu unterstützen.

Chat Client implementieren

Nun folgt die Implementierung des Chat Clients. Wir erzeugen zunächst im wwwroot Ordner eine Datei index.html, in der wir den gerade kopierten SignalR-JavaScrip-Client einbinden und eine einfache HTML-Oberfläche hinzufügen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Chat</title>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <input type="text" id="message" />
        <input type="button" id="send" value="Senden" />
        <ul id="messages"></ul>
    </div>
    <script src="signalr-client-1.0.0-alpha2-final.min.js"></script>
</body>
</html>

Im Client soll nun folgendes passieren:

  • Trägt ein Benutzer eine Nachricht in das Textfeld ein und drückt auf Senden, soll die Nachricht an alle Benutzer gesendet werden
  • Erhält der Client eine Nachricht, so soll sie der Nachrichtenliste hinzugefügt werden

Hierzu fügen wir den folgenden Code hinzu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
    var connection = new signalR.HubConnection('/chat');
    connection.start();

    connection.on('broadcast', function (message) {
        var li = document.createElement('li');
        li.innerHTML = message;
        document.getElementById('messages').appendChild(li);
    });

    document.getElementById('send').addEventListener('click', function (event) {
        var input = document.getElementById('message');

        // Call the Send method on the hub.
        connection.invoke('send', input.value);

        input.value = '';
    });
</script>

In den ersten Zeilen erzeugen wir eine HubConnection, die sich auf unseren zuvor definierten Endpunkt /chat verbindet.

Auf der HubConnection können nun alle Ereignisse abgefangen werden, die vom ChatHub geworfen werden. Hier im Beispiel die Methode broadcast, die wir zuvor im Hub festgelegt haben. Tritt das Ereignis ein, so wird der Übergabeparameter message als neuer Listeneintrag hinzugefügt.

Für das Senden von Nachrichten wird beim click-Ereignis der Schaltfläche die Methode Send auf dem Hub aufgerufen und die Nachricht aus dem Textfeld übergeben. Der Name der Methode ist hierbei case-insensitive.

Demo

Demo des Chats Demo des Chats

Beispielprojekt

Das Beispielprojekt ist hier auf GitHub zu finden.

Zusammenfassung und Ausblick

In diesem Artikel wurde ein einfacher Chat mithilfe des neuen SignalR für ASP.NET Core umgesetzt. Auf der Clientseite wurde der SignalR-Client für JavaScript verwendet.

Die finale Version von SignalR für ASP.NET Core soll laut der offiziellen Roadmap mit ASP.NET Core 2.1 veröffentlicht werden, was für Q1-Q2 2018 geplant ist. Bis dahin werden sich sicherlich noch ein paar Dinge in der Implementierung ändern.

Weiterführende Links