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
   

   View Slide

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
   

   View Slide

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

   View Slide

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?
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

13. 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"]
    }]
    }
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Vielen Dank
    für Ihre Aufmerksamkeit!
    Patrick Jahr
    @jahr_patrick
    patrick.jahr@thinktecture.com
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide