$30 off During Our Annual Pro Sale. View Details »

ASP.NET Core SignalR - Cross-Platform Realtime Push - 3

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.

Patrick Jahr

March 25, 2021
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

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: [email protected]
    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
    [email protected]

    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