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

Building a Realtime WebSocket API with Phoenix

Building a Realtime WebSocket API with Phoenix

Sometimes consumers of your APIs require near-realtime communication because regular RESTful HTTP apis can be a few milliseconds too slow. These performant and scalable APIs can be made over websocket TCP connections where events are pushed from client and server in near-realtime fashion.

This talk is a story of how I built such an API. We'll look at why this decision to create a websocket API was made and we will take a look at the data that supported this decision. We will take a deep dive into Phoenix websockets, channels, and transports to expose the underlying architecture. Finally, we look at how we tested the API, how we authenticated users over the channels, and how Phoenix helped this all happen with relative ease.

Jamie Wright
PRO

March 21, 2019
Tweet

More Decks by Jamie Wright

Other Decks in Programming

Transcript

  1. Websocket
    API
    Beer City Code
    2019
    Building
    a real time
    ⋆ ⋆
    in Phoenix

    View Slide

  2. @jwright

    View Slide

  3. jamie
    @brilliantfantastic.com

    View Slide

  4. @jwright
    http://speakerdeck.com/jwright

    View Slide

  5. Background
    Some

    View Slide

  6. Background
    Some

    View Slide

  7. Background
    Some
    http://chronic.io

    View Slide

  8. Background
    Some

    View Slide

  9. Background
    Some

    View Slide

  10. Background
    Some
    Server is gold copy
    Server pushes events to
    clients
    Clients displays event

    View Slide

  11. Background
    Some
    Server triggers
    push smart
    notifications

    View Slide

  12. Background
    Some
    Events at any
    second

    View Slide

  13. Background
    Some
    Demo

    View Slide

  14. View Slide

  15. Websockets

    View Slide

  16. Websocket
    What’s a

    View Slide

  17. Websocket
    What’s a
    Protocol

    View Slide

  18. Websocket
    Full-duplex
    connection
    Both sides can
    chat at same
    time

    View Slide

  19. Http
    Simplex
    connection
    One side can
    chat at a time

    View Slide

  20. Websocket
    What’s a
    https://tools.ietf.org/html/rfc6455
    RFC

    View Slide

  21. Websocket
    What’s a
    https://www.w3.org/TR/websockets/
    W3C Spec

    View Slide

  22. Websocket
    What’s a

    View Slide

  23. Websocket
    What’s a
    Starts with
    a
    Handshakes
    via HTTP

    View Slide

  24. View Slide

  25. View Slide

  26. TCP (C’est une pipe)
    HTTP
    W
    ebSocket

    View Slide

  27. Websockets
    Why we chose

    View Slide

  28. Realtime
    Websockets
    Why we
    chose

    View Slide

  29. Websockets
    Why we
    chose
    Eventful

    View Slide

  30. Phoenix
    Why

    View Slide

  31. Phoenix
    Why
    WebSockets

    View Slide

  32. Phoenix
    Why
    Elixir

    View Slide

  33. Phoenix
    Why
    Stateful

    View Slide

  34. Fast
    Phoenix
    Why

    View Slide

  35. Example APIs

    View Slide

  36. Example APIs
    https://api.slack.com/rtm
    Send messages in channel
    Receive team events
    Receive user presence

    View Slide

  37. Example APIs
    https://pusher.com/docs/pusher_protocol
    Receive system events
    Receive user presence
    Trigger client events

    View Slide

  38. Example APIs
    https://getstream.io/docs/#realtime
    Receive feed changes

    View Slide

  39. Works
    How it

    View Slide

  40. Connecting

    View Slide

  41. Connecting

    View Slide

  42. Connecting

    View Slide

  43. Connecting
    Give clients a starting point
    Identify events from a
    single endpoint (client)
    Opportunity to
    authenticate

    View Slide

  44. View Slide

  45. Connecting

    View Slide

  46. Connecting

    View Slide

  47. Connecting

    View Slide

  48. Channels
    Joining

    View Slide

  49. Channels
    Joining
    Custom
    Protocol

    View Slide

  50. Channels
    Joining
    Multiplexed

    View Slide

  51. Channels
    Joining
    PubSub

    View Slide

  52. Channels
    Joining
    Built In

    View Slide

  53. Channels
    Joining

    View Slide

  54. Channels
    Joining

    View Slide

  55. Channels
    Joining

    View Slide

  56. Channels
    The Problem with

    View Slide

  57. Problems
    { topic: “events:1234”, event: “phx_join” }
    { topic: “events:1234”, event: “phx_reply”,
    payload: { ok: true, token: “1234” }}}
    WS
    WS
    WS
    WS
    Joining Channels

    View Slide

  58. Problems
    Joining Channels
    Remove complicated
    setup from clients
    Build reconnection/
    heartbeat logic
    https://bit.ly/2WjtKxZ

    View Slide

  59. Messages

    View Slide

  60. Messages
    Meat

    View Slide

  61. Messages
    Event name
    Event data

    View Slide

  62. Messages
    Incoming

    View Slide

  63. Messages
    Incoming

    View Slide

  64. Messages
    Incoming

    View Slide

  65. Messages
    Incoming

    View Slide

  66. Messages
    Incoming

    View Slide

  67. Messages
    Outgoing

    View Slide

  68. Messages
    Outgoing

    View Slide

  69. Messages
    Outgoing

    View Slide

  70. Outgoing

    View Slide

  71. View Slide

  72. Review

    View Slide

  73. Review
    POST /graphql
    { url: “ws://…”, token: “1234” }
    HTTP
    HTTP
    HTTP
    HTTP
    Connecting
    { mutation: { connect: { … } }

    View Slide

  74. Review
    [“timers:start”, { duration: 1500,
    timestamp: 1273485 } ]
    [“timers:started”, { id: 1234, duration: 1500,
    remaining_time: 1500, status: “running” } ]
    WS
    WS
    WS
    WS
    Sending Messages

    View Slide

  75. Thank You!

    View Slide

  76. Questions?

    View Slide

  77. @jwright

    View Slide