ASP.NET Core SignalR - Cross-Platform Realtime Push - 3

Echtzeitkommunikation zwischen zwei Welten – dem Client und dem Server. In Anwendungen wie zum Beispiel Dashboards, Messaging Apps, oder Spielen ist die Echtzeitkommunikation kaum noch weg zu denken. Mit SignalR ist eine Lösung geschaffen mit der das Hinzufügen und das Aufbauen einer Echtzeitkommunikation zwischen Clients und Server sehr einfach gestaltet ist.

Transcript

1. ASP.NET Core SignalR Cross-Plattform Realtime Push Patrick Jahr @jahr_patrick Consultant
2. Hello, it’s me. Patrick Jahr Consultant @ Thinktecture AG E-Mail: patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr ASP.NET Core SignalR Cross-Plattform Realtime Push Patrick Jahr
3. Motivation Realtime Connection Reconnect Security Resumé ASP.NET Core SignalR Cross-Plattform Realtime Push
4. - Kein F5 mehr drücken, Daten werden LIVE aktualisiert - Tagesschau – Neue Nachrichten, eBay – Neues Gebot, Platzwahl bei Konzerten - Unmittelbarer Austausch von Informationen - z.B. Messaging via Slack oder WhatsApp oder Updates von einem Bearbeitungsstand in einem Prozess - In vielen Applikationen mittlerweile im Einsatz - z.B. kollaborative Apps, Statistiken und Dashboards, Messaging Apps, Spiele und dergleichen ASP.NET Core SignalR Cross-Plattform Realtime Push Warum Echtzeitkommunikation?
5. ASP.NET Core SignalR Cross-Plattform Realtime Push Echtzeit ist nicht gleich Echtzeit
6. - Open Source Bibliothek von Microsoft - Bi-direktionale Echtzeitverbindung zwischen Client und Server - Bietet Echtzeit-Messaging und Server-Push-Funktionalität - Unterschiedliche Protokolle für den Transport von Nachrichten - WebSockets, Server Sent Events, Long Polling - Konzepte für Clients und Groups - Breite Verfügbarkeit von Client-APIs (z.B. JavaScript, .NET, Java oder Swift) - Hinweis: ASP.NET Core SignalR ist nicht kompatibel zu klassischem ASP.NET SignalR ASP.NET Core SignalR Cross-Plattform Realtime Push Was ist ASP.NET Core SignalR
7. ASP.NET Core SignalR Cross-Plattform Realtime Push DEMO Identity Server Web API/Hub Benutzerauthentifizierung / Berechtigung der Resources prüfen SignalR Persistente Verbindung SignalR Negotiate SignalR Persistente Verbindung SignalR Negotiate 1 2 3
8. ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé
9. Server Integration - Nuget Package “Microsoft.AspNetCore.SignalR“ (standardmäßig hinzugefügt) ASP.NET Core SignalR Cross-Plattform Realtime Push ASP.NET Core SignalR public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); } public void Configure(IApplicationBuilder app) { app.UseEndpoints(endpoints => { endpoints.MapHub<GamesHub>("/tictactoe"); }); }
10. - Mit Hubs können Methoden auf verbundenen Clients vom Server aus aufgerufen werden - Der Hub definiert Methoden, die vom Client aufgerufen werden - Im Client werden Methoden definiert, die vom Server aufgerufen werden - SignalR kümmert sich um alles hinter den Kulissen, was eine Echtzeit-Client-zu- Server- und Server-zu-Client-Kommunikation ermöglicht ASP.NET Core SignalR Cross-Plattform Realtime Push Hub public async Task MethodeDieVomClientAufgerufenWird(string message) { await Clients.Others.SendAsync("MethodeDieDerClientImplementiert",message); }
11. ASP.NET Core SignalR Cross-Plattform Realtime Push Aufbau einer Verbindung zwischen Client und Server export class SignalRService { private hubConnection: signalR.HubConnection; public startConnection = () => { this.hubConnection = new signalR.HubConnectionBuilder() .withUrl('http://localhost:5000/tictactoe') .build(); this.hubConnection .start() .then(() => console.log('Erfolgreich am Hub angemeldet!')) .catch(err => console.log(`Fehler beim Aufbau einer Verbindung: ${err}`)); }; } Client - JavaScript
12. ASP.NET Core SignalR Cross-Plattform Realtime Push Aufbau einer Verbindung zwischen Client und Server public class SignalRService { private static HubConnection _hubConnection; public async Task InitConnectionAsync() { _hubConnection = new HubConnectionBuilder() .WithUrl($"http://localhost:5002/tictactoe", options => { options.AccessTokenProvider = () => Task.FromResult(accessToken); }) .Build(); await _hubConnection.StartAsync(); } } Client - .NET
13. Negotiate Request ASP.NET Core SignalR Cross-Plattform Realtime Push Verbindungsaufbau HTTP-POST Request: <endpoint>/negotiate[?negotiateVersion] { "negotiateVersion": 1, "connectionId": "cr4R1wUFNJfmBrdTLClkWg", "connectionToken": "iMJyvXW0MS8I1HD2hzsGqA", "availableTransports": [{ "transport": "WebSockets", "transferFormats": ["Text", "Binary"] }, { "transport": "ServerSentEvents", "transferFormats": ["Text"] }, { "transport": "LongPolling", "transferFormats": ["Text", "Binary"] }] }
14. - public Methode eines Hubs kann von Clients aufgerufen werden - Methodennamen sind Case Sensitive - Modelbinding möglich ASP.NET Core SignalR Cross-Plattform Realtime Push Senden von Nachrichten Server public async Task MethodeDieVomClientAufgerufenWird(string message) { await Clients.Others.SendAsync(“MethodeDieDerClientAbonniert",message); }
15. Server ASP.NET Core SignalR Cross-Plattform Realtime Push Senden von Nachrichten Methode Bedeutung All Sendet an alle verbundenen Clients Others Sendet an alle anderen Clients, und nicht an sich selbst User(clientConnectionId) Sendet an einen Client anhand der ClientConnectionId Users(ConnectionIds) Sendet an alle angegebenen Clients, welche in der Liste der ConnectionIds vorhanden sind
16. Server ASP.NET Core SignalR Cross-Plattform Realtime Push Senden von Nachrichten Methode Bedeutung Groups(names) Sendet an alle Clients, die in einer der angegebenen Gruppen existieren Group(groupName) Sendet an alle Clients in einer bestimmten Gruppe OthersInGroup(groupName) Sendet an alle Clients, die in einer der angegebenen Gruppen existieren, ausgeschlossen sich selbst GroupsExpect(groupName, connectionIds) Sendet an alle Clients in der angegebenen Gruppe und die nicht in den angegebenen ConnectionIds enthalten sind
17. ASP.NET Core SignalR Cross-Plattform Realtime Push DEMO Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Persistente Verbindung SignalR Negotiate
18. ASP.NET Core SignalR Cross-Plattform Realtime Push WebSockets Messaging message message message message message message message message message message JSON ping { “type“: 6 } JSON non-blocking invocation { “type“: 1, “target“: “Send“, “arguments“: [42, “Test Message“] } WebSocket transfort frame header | payload
19. ASP.NET Core SignalR Cross-Plattform Realtime Push Senden und Empfangen von Nachrichten Empfangen von Nachrichten: this.hubConnection.on('Messages', (data) => { // Do your Stuff... }); Senden von Nachrichten: await this.hubConnection.invoke('SendMessage', 'Test Message'); Client - JavaScript
20. ASP.NET Core SignalR Cross-Plattform Realtime Push Senden und Empfangen von Nachrichten Empfangen von Nachrichten: _hubConnection.On<User>("Messages", (data) => { //...Do your Stuff }); Senden von Nachrichten: await _hubConnection.SendAsync("SendMessage", $"{value}"); Client - .NET
21. ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé
22. - .NET Client .WithAutomaticReconnect(new[] { TimeSpan.Zero, TimeSpan.FromSeconds(5), TimeSpan.FromSeconds(10) }) - JavaScript Client .withAutomaticReconnect([0, 5000, 10000]) ASP.NET Core SignalR Cross-Plattform Realtime Push Reconnect
23. ASP.NET Core SignalR Cross-Plattform Realtime Push DEMO Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Persistente Verbindung SignalR Negotiate
24. ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé
25. - Autorisierung ermöglicht dem Hub das Abrufen von Methoden für alle Verbindungen, die einem Benutzer zugeordnet sind - Client stellt ein Token bereit, welches vom Server geprüft wird (Bearertokenauthentifizierung) - Da WebSockets keine Header zulassen, muss das Token über einen Query Parameter an den Server gesendet werden - Hinweis: Das Token wird nur beim initialen Aufbau der Verbindung überprüft und gilt dann für die gesamte Lebenszeit der Verbindung. ASP.NET Core SignalR Cross-Plattform Realtime Push Autorisierung
26. ASP.NET Core SignalR Cross-Plattform Realtime Push Senden des Authentifizierungstoken export class SignalRService { private hubConnection: signalR.HubConnection; public startConnection = () => { this.hubConnection = new signalR.HubConnectionBuilder() .withUrl('http://localhost:5000/tictactoe' , { accessTokenFactory: () => authenticationToken })) .withAutomaticReconnect([0, 5000, 10000]) .build(); //... }; } Client - JavaScript
27. ASP.NET Core SignalR Cross-Plattform Realtime Push Senden des Authentifizierungstoken public class SignalRService { private static HubConnection _hubConnection; public async Task InitConnectionAsync() { _hubConnection = new HubConnectionBuilder() .WithUrl($"http://localhost:5002/tictactoe?accessToken={authenticationToken}", options => { options.AccessTokenProvider = () => Task.FromResult(accessToken); }) .Build(); await _hubConnection.StartAsync(); } } Client - .NET
28. ASP.NET Core SignalR Cross-Plattform Realtime Push DEMO Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Persistente Verbindung SignalR Negotiate
29. ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé
30. - Einfache Implementierung von Echtzeitkommunikation zwischen Server und Client - Fallback für Transport von Nachrichten, falls WebSockets nicht zur Verfügung steht - Automatischer Reconnect in den Clients möglich - Senden und Empfangen von Nachrichten über den Hub - Absicherung der Kommunikation - Weit verbreitete Clientunterstützung ASP.NET Core SignalR Cross-Plattform Realtime Push Resumé ASP.NET Core SignalR steht für….
31. ASP.NET Core SignalR Cross-Plattform Realtime Push
32. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com
33. ASP.NET Core SignalR Cross-Plattform Realtime Push WebSockets HTTP „upgrade“ Request Client Server Response Handshake WebSocket Connection Close Connection
34. ASP.NET Core SignalR Cross-Plattform Realtime Push Server Sent Events EventSource Message Message Client Server Events Message Client
35. ASP.NET Core SignalR Cross-Plattform Realtime Push Long Polling Offener Request solange bis eine Antwort vom Server gesendet wird Response Request Client Server Events Nach erhalt einer Response startet der Client direkt den nächsten Request
36. ASP.NET Core SignalR Cross-Plattform Realtime Push Scale-Out Redis-Backplane User: alice | Groups: A,B User: bob | Groups: B,C User: Jones | Groups: A,C User: Smith | Groups: B,D Server Clients Redis Say „Hello“ Say „Hello“ Say „Hello“ Say „Hello“ „Hello“ Send.All(…) „Hello“ Send.All(…) „Hello“ Send.All(…) „Hello“ Send.All(…)
37. ASP.NET Core SignalR Cross-Plattform Realtime Push Scale-Out Azure SignalR Service Clients Server Azure SignalR Service
38. - https://docs.microsoft.com/de- de/aspnet/core/signalr/introduction?view=aspnetcore-3.1 - https://github.com/dotnet/aspnetcore/blob/master/src/SignalR/docs/specs/Transp ortProtocols.md - https://github.com/aspnet/SignalR/blob/master/specs/HubProtocol.md - https://docs.microsoft.com/de-de/aspnet/core/signalr/authn-and- authz?view=aspnetcore-3.1 - https://docs.microsoft.com/de-de/aspnet/core/signalr/scale?view=aspnetcore-3.1 ASP.NET Core SignalR Cross-Plattform Realtime Push Resources