Save 37% off PRO during our Black Friday Sale! »

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

7a33106dde82ecc65a220eaf9d131222?s=47 Patrick Jahr
November 18, 2020
330

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

7a33106dde82ecc65a220eaf9d131222?s=128

Patrick Jahr

November 18, 2020
Tweet

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/Resources 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