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

Quest for Serverless Websockets - .NET Amsterdam

Quest for Serverless Websockets - .NET Amsterdam

Marc Duiker

April 13, 2023
Tweet

More Decks by Marc Duiker

Other Decks in Technology

Transcript

  1. @MarcDuiker 2
    Marc Duiker
    Sr Developer Advocate

    View full-size slide

  2. @MarcDuiker 3
    Marc Duiker
    Sr Developer Advocate

    View full-size slide

  3. @MarcDuiker
    https://quest.ably.dev/

    View full-size slide

  4. @MarcDuiker 5
    Durable Functions
    Learnings & Alternatives
    Entity Functions
    Synchronizing State
    Code Tour
    WebSockets
    Solution

    View full-size slide

  5. @MarcDuiker 7
    Client 1
    Client 2
    Client 3

    View full-size slide

  6. @MarcDuiker 8
    Client 1
    Client 2
    Client 3
    Server

    View full-size slide

  7. @MarcDuiker 9
    Client 1
    Client 2
    Client 3
    Serverless
    HTTP
    HTTP
    HTTP
    WS WS
    WS

    View full-size slide

  8. @MarcDuiker 10
    Client 1
    Client 2
    Client 3
    HTTP
    HTTP
    HTTP
    WS WS
    WS
    HTTP
    Ably

    View full-size slide

  9. @MarcDuiker 12

    View full-size slide

  10. @MarcDuiker 13

    View full-size slide

  11. @MarcDuiker 14

    View full-size slide

  12. @MarcDuiker 15

    View full-size slide

  13. @MarcDuiker 16
    https://github.com/marcduiker/durable-functions-use-cases

    View full-size slide

  14. @MarcDuiker 18

    View full-size slide

  15. @MarcDuiker 19
    public class Counter : ICounter
    {
    [JsonProperty("value")]
    public int CurrentValue { get; set; }
    public void Add(int amount) => this.CurrentValue += amount;
    public void Reset() => this.CurrentValue = 0;
    [FunctionName(nameof(Counter))]
    public static Task Run([EntityTrigger] IDurableEntityContext ctx)
    => ctx.DispatchAsync();
    }

    View full-size slide

  16. @MarcDuiker 20
    await _durableClient.SignalEntityAsync(
    counterEntityId,
    proxy => proxy.Add(1));
    var counter = await _durableClient.ReadEntityStateAsync(
    counterEntityId);
    var current = counter.EntityState.CurrentValue;
    var counterEntityId = new EntityId(nameof(Counter), counterId);
    https://learn.microsoft.com/en-us/azure/azure-functions/durable/durable-functions-dotnet-entities

    View full-size slide

  17. @MarcDuiker 22
    Request
    Response
    Connection is terminated

    View full-size slide

  18. @MarcDuiker 23
    Handshake Request
    Handshake Response
    Bi-directional
    Connection remains open until
    client or server terminates

    View full-size slide

  19. @MarcDuiker 24
    let webSocket = new WebSocket(”ws://...”);
    webSocket.onopen = () => {
    ...
    };
    webSocket.onmessage = (event) => {
    ...
    };
    webSocket.send(...);

    View full-size slide

  20. @MarcDuiker 25
    var ablyClient = new AblyRealtime(ABLY_API_KEY);
    var channel = ablyClient.Channels.Get(CHANNEL_NAME);
    channel.Subscribe(“chat-message”, message =>
    {
    ...
    });
    await channel.PublishAsync(
    “chat-message",
    new { user = "Marc“, message = "Hi there!"
    });
    ablyClient.Connection.On(ConnectionEvent.Connected,
    args => {
    ...
    });

    View full-size slide

  21. 26
    @MarcDuiker

    View full-size slide

  22. @MarcDuiker 29
    Client
    Function
    App
    Monster
    (Player Entity)
    GameState
    (Entity)
    GameEngine Ably
    Signal InitGameState
    Signal AddPlayerName
    Publish
    UpdatePhase
    Publish
    AddPlayer
    CreateQuest
    Signal InitPlayer
    CreateQuest

    View full-size slide

  23. @MarcDuiker
    https://github.com/ably-labs/serverless-websockets-quest/

    View full-size slide

  24. @MarcDuiker 33

    View full-size slide

  25. @MarcDuiker 34

    View full-size slide

  26. @MarcDuiker 35

    View full-size slide

  27. @MarcDuiker 37

    View full-size slide

  28. @MarcDuiker 41
    Connection Request
    Connection Response
    Event
    Connection closed
    Event
    Event

    View full-size slide

  29. @MarcDuiker https://github.com/ably-labs/sse-dotnet

    View full-size slide

  30. @MarcDuiker
    https://pixel-paint.ably.dev/

    View full-size slide

  31. @MarcDuiker
    Twitter:
    @marcduiker
    Mastodon:
    mstdn.social/@marcduiker
    GitHub:
    https://github.com/ably-labs/serverless-websockets-quest/
    https://github.com/ably-labs/sse-dotnet
    https://github.com/ably-labs/collaborative-pixel-drawing

    View full-size slide