ASP.NET SignalR Core - Cross-Platform Realtime Push

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-Platform 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-Platform Realtime Push Patrick Jahr
3. Motivation Realtime Connection Security Senden und Empfangen Reconnect Resumé ASP.NET Core SignalR Cross-Platform Realtime Push
4. - Hinweis: Echtzeit ist nicht gleich Echtzeit - Unmittelbarer Austausch von Informationen - z.B. Messaging via Slack / 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-Platform Realtime Push Warum Echtzeitkommunikation?
5. - Bi-direktionale Echtzeitverbindung zwischen Client und Server - Bietet Echtzeit-Messaging und Server-Push-Funktionalität - Unterschiedliche Protokolle für die Transportprotokolle 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-Platform Realtime Push Warum ASP.NET Core SignalR
6. DEMO ASP.NET Core SignalR Cross-Platform Realtime Push
7. ASP.NET Core SignalR Cross-Platform Realtime Push Architektur Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Persistente Verbindung SignalR Negotiate
8. ASP.NET Core SignalR Cross-Platform Realtime Push Motivation Realtime Connection Security Senden und Empfangen Reconnect Resumé
9. Server Integration - Nuget Package “Microsoft.AspNetCore.SignalR“ (standardmäßig hinzugefügt) ASP.NET Core SignalR Cross-Platform 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 definieren sie Methoden, 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-Platform Realtime Push Hub
11. ASP.NET Core SignalR Cross-Platform 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-Platform 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-Platform 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. ASP.NET Core SignalR Cross-Platform Realtime Push DEMO Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Negotiate
15. ASP.NET Core SignalR Cross-Platform Realtime Push Motivation Realtime Connection Security Senden und Empfangen Reconnect Resumé
16. - 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 ASP.NET Core SignalR Cross-Platform Realtime Push Autorisierung
17. ASP.NET Core SignalR Cross-Platform 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
18. ASP.NET Core SignalR Cross-Platform 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
19. ASP.NET Core SignalR Cross-Platform Realtime Push DEMO Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Negotiate
20. ASP.NET Core SignalR Cross-Platform Realtime Push Motivation Realtime Connection Security Senden und Empfangen Reconnect Resumé
21. - public Methode eines Hubs kann von Clients aufgerufen werden - Methodennamen sind Case Sensitive - Stark typisierte Parameter, Modelbindung ASP.NET Core SignalR Cross-Platform Realtime Push Senden von Nachrichten Server public async Task MethodeDieVomClientAufgerufenWird(string message) { await Clients.Others.SendAsync(“MethodeDieDerClientAbonniert",message); }
22. Server ASP.NET Core SignalR Cross-Platform Realtime Push Senden von Nachrichten Methode Bedeutung All Sendet an alle verbundenen Clients Others Sendet an alle anderen Clients, 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
23. Server ASP.NET Core SignalR Cross-Platform 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
24. ASP.NET Core SignalR Cross-Platform 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
25. ASP.NET Core SignalR Cross-Platform 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
26. ASP.NET Core SignalR Cross-Platform 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
27. ASP.NET Core SignalR Cross-Platform Realtime Push DEMO Identity Server API/Resources Benutzerauthentifizierung Berechtigung der Resources prüfen Benutzer Clients SignalR Persistente Verbindung SignalR Negotiate
28. ASP.NET Core SignalR Cross-Platform Realtime Push Motivation Realtime Connection Security Reconnect Resumé
29. - .NET Client .WithAutomaticReconnect(new[] { TimeSpan.Zero, TimeSpan.FromSeconds(5), TimeSpan.FromSeconds(10) }) - JavaScript Client .withAutomaticReconnect([0, 5000, 10000]) ASP.NET Core SignalR Cross-Platform Realtime Push Reconnect
30. ASP.NET Core SignalR Cross-Platform Realtime Push Motivation Realtime Connection Reconnect Security Resumé
31. - 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 - Weit verbreitete Clientunterstützung - Identifizierung der Kommunikation - In Produktion sollte das WSS (WebSockets Secure)Protokoll genutzt werden ASP.NET Core SignalR Cross-Platform Realtime Push Resumé
32. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com
33. ASP.NET Core SignalR Cross-Platform Realtime Push WebSockets HTTP „upgrade“ Request Client Server Response Handshake WebSocket Connection Close Connection
34. ASP.NET Core SignalR Cross-Platform Realtime Push Server Sent Events EventSource Message Message Client Server Events Message Client
35. ASP.NET Core SignalR Cross-Platform 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-Platform 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-Platform 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-Platform Realtime Push Resources