ASP.NET Core SignalR Cross-Plattform Realtime Push Patrick Jahr @jahr_patrick Consultant

Hello, it’s me. Patrick Jahr Consultant @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr ASP.NET Core SignalR Cross-Plattform Realtime Push Patrick Jahr

Motivation Realtime Connection Reconnect Security Resumé ASP.NET Core SignalR Cross-Plattform Realtime Push

- 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?

ASP.NET Core SignalR Cross-Plattform Realtime Push Echtzeit ist nicht gleich Echtzeit

- 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

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

ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé

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("/tictactoe"); }); }

- 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); }

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

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

Negotiate Request ASP.NET Core SignalR Cross-Plattform Realtime Push Verbindungsaufbau HTTP-POST Request: /negotiate[?negotiateVersion] { "negotiateVersion": 1, "connectionId": "cr4R1wUFNJfmBrdTLClkWg", "connectionToken": "iMJyvXW0MS8I1HD2hzsGqA", "availableTransports": [{ "transport": "WebSockets", "transferFormats": ["Text", "Binary"] }, { "transport": "ServerSentEvents", "transferFormats": ["Text"] }, { "transport": "LongPolling", "transferFormats": ["Text", "Binary"] }] }

- 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); }

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

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

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

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

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

ASP.NET Core SignalR Cross-Plattform Realtime Push Senden und Empfangen von Nachrichten Empfangen von Nachrichten: _hubConnection.On("Messages", (data) => { //...Do your Stuff }); Senden von Nachrichten: await _hubConnection.SendAsync("SendMessage", $"{value}"); Client - .NET

ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé

- .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

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

ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé

- 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

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

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

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

ASP.NET Core SignalR Cross-Plattform Realtime Push Motivation Realtime Connection Reconnect Security Resumé

- 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….

ASP.NET Core SignalR Cross-Plattform Realtime Push

Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick [email protected]

ASP.NET Core SignalR Cross-Plattform Realtime Push WebSockets HTTP „upgrade“ Request Client Server Response Handshake WebSocket Connection Close Connection

ASP.NET Core SignalR Cross-Plattform Realtime Push Server Sent Events EventSource Message Message Client Server Events Message Client

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

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(…)

ASP.NET Core SignalR Cross-Plattform Realtime Push Scale-Out Azure SignalR Service Clients Server Azure SignalR Service

- 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