Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ASP.NET Core SignalR - Cross-Plattform Realtime...

Patrick Jahr
November 18, 2020
420

ASP.NET Core SignalR - Cross-Plattform Realtime Push - 2

Patrick Jahr

November 18, 2020
Tweet

More Decks by Patrick Jahr

Transcript

  1. 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
  2. - 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?
  3. - 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
  4. ASP.NET Core SignalR Cross-Plattform Realtime Push DEMO Identity Server Web

    API/Resources Benutzerauthentifizierung / Berechtigung der Resources prüfen SignalR Persistente Verbindung SignalR Negotiate SignalR Persistente Verbindung SignalR Negotiate 1 2 3
  5. 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"); }); }
  6. - 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); }
  7. 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
  8. 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
  9. 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"] }] }
  10. - 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); }
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. - .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
  18. 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
  19. - 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
  20. 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
  21. 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
  22. 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
  23. - 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….
  24. ASP.NET Core SignalR Cross-Plattform Realtime Push WebSockets HTTP „upgrade“ Request

    Client Server Response Handshake WebSocket Connection Close Connection
  25. ASP.NET Core SignalR Cross-Plattform Realtime Push Server Sent Events EventSource

    Message Message Client Server Events Message Client
  26. 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
  27. 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(…)