SignalR mit ASP.NET Core und Angular - von 0 auf 100

Echtzeit-Webanwendungen steigern die Benutzererfahrung deutlich, denn dargestellte Informationen können jederzeit und ohne Zutun des Benutzers aktualisiert werden. Im Microsoft-Umfeld bietet die Bibliothek SignalR für dieses Szenario eine sehr einfache und elegante Lösung an, die dank ASP.NET Core nun auch plattformunabhängig eingesetzt werden kann. Auch im Frontend kann SignalR unkompliziert in JavaScript-Anwendungen integriert werden.

Diese Session gibt einen umfangreichen Einblick in SignalR für ASP.NET Core. Es wird anhand verschiedener Beispiele gezeigt, wie die Bibliothek auf dem Server und Client verwendet werden kann. Um die Session abzurunden, wird außerdem über ein praktisches Anwendungsbeispiel vorgestellt, wie SignalR im Zusammenspiel mit Angular eingesetzt werden kann und wie der Azure SignalR Service verwendet werden kann.

Transcript

1. Von 0 auf 100 SIGNALR MIT ASP.NET CORE UND ANGULAR
2. DANIEL BECKMANN Senior Consultant Fokus Web, Mobile, Cross-Platform Cloud Kontakt Mail: daniel.beckmann@acando.de Blog: https://modernpioneer.de Twitter: @dabeckmann Folie 2
3. MOTIVATION
4. Dashboards Unternehmenskennzahlen, Aktienticker, Flugticker Zusammenarbeit Whiteboards, Meeting Software, Office Kommunikation Chat, E-Mail, Kalender, Benachrichtigungen Soziale Netzwerke Newsfeed mit Live-Updates, Benachrichtigungen Echtzeitszenarien gibt es praktisch überall Spiele Multiplayer Online-Games Folie 4
5. SIGNALR • Bibliothek für ASP.NET Core • Echtzeitfunktionen für Web (und Apps) • Bidirektionale Kommunikation zwischen Client (z.B. Browser) und Server • RPC Programmiermodell • Unterstützt verschiedene Technologien (Websockets, ServerSentEvents, Long Polling) • TypeScript/JavaScript und .NET Clients Folie 5
6. VERGLEICH ZUM KLASSISCHEN SIGNALR • Komplette Neuentwicklung • Keine jQuery Abhängigkeiten mehr • Kein automatisches Wiederverbinden (bereits auf der Roadmap) • MessagePack als binäres Format • Streaming • Einzelne Hub Endpunkte statt ein Multi-Hub-Endpunkt Folie 6
7. FUNKTIONSWEISE Folie 7 Server App (ASP.NET) Client App (HTML/JavaScript) Server App (ASP.NET) Client App (HTML/JavaScript) connection.on('myClientFunc', function (param) { … }); connection.invoke('myServerFunc', param); public Task MyServerFunc(string param) { … } Clients.All.SendAsync("myClientFunc", param);
8. LIVE DEMOS
9. AZURE SIGNALR SERVICE • Einfache Skalierung • Hochverfügbarkeit • Performance • Ermöglicht Serverless Szenarien • Integration mit anderen Azure Services Folie 9
10. AZURE SIGNALR SERVICE Folie 10 ASP.NET Core App Angular App VoteHub Server Endpunkt Client Endpunkt Azure SignalR Service Client (Browser) Web Traffic SignalR Traffic
11. FALLSTRICKE • Angular Entwicklungsserver • Proxy oder CORS • Für Web Apps in Azure • SSL aktivieren • Websockets aktivieren • ARR Affinity aktivieren • Kontingente beachten: • Free: 5 • Shared: 35 • Basic: 350 • Standard: Unbegrenzt • Premium: Unbegrenzt https://docs.microsoft.com/de-de/azure/azure- subscription-service-limits Folie 11
12. AUSBLICK • Automatisches Wiederverbinden des Clients • Verbindungsstabilität • Clientseitige typisierte Hubs • Weitere Clientbibliotheken: Java, C++, iOS • TCP/IP und weitere Transportmöglichkeiten Folie 12
13. RESSOURCEN https://docs.microsoft.com/de-de/aspnet/core/signalr/introduction?view=aspnetcore-2.1 https://docs.microsoft.com/de-de/azure/azure-signalr/signalr-overview https://github.com/aspnet/SignalR https://github.com/aspnet/AzureSignalR-samples https://modernpioneer.de/2017/12/15/erste-schritte-mit-signalr-core.html https://modernpioneer.de/2018/01/07/signalr-core-mit-angular.html https://modernpioneer.de/2018/01/13/signalr-core-in-azure-betreiben.html https://github.com/danielbeckmann/signalr-samples Folie 13
14. Q&A Folie 14 Vielen Dank Daniel Beckmann @dabeckmann daniel.beckmann@acando.de http://blog.modernpioneer.de