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

True North WebSocket talk

Chris Boden
November 02, 2012

True North WebSocket talk

Chris Boden

November 02, 2012
Tweet

Other Decks in Programming

Transcript

  1. WebSockets
    Bring your site to life using
    joind.in/7407

    View Slide

  2. @boden_c
    •Ratchet
    •React
    Chris

    View Slide

  3. What Are
    WebSockets
    ?
    Push
    Real-time
    Bi-directional
    Live

    View Slide

  4. Use cases
    • Notifications
    • Chat/Communication
    • Statistics
    • Games
    • Anything/Everything

    View Slide

  5. But...Can’t we do that today?
    Comet

    View Slide

  6. How Comet over
    HTTP works

    View Slide

  7. it’s slow
    it’s hard to develop
    it wastes bandwidth
    ...and what’s wrong with that
    it’s a square peg for a round hole

    View Slide

  8. That’s a lot of requests!
    (sorry for throwing you under the bus Travis. I still <3 you!)

    View Slide

  9. How Sockets Work
    • Client connects to server
    • Server accepts connection
    • An open connection is established/maintained
    • Client/Server sends message to each other

    View Slide

  10. View Slide

  11. Network Topology

    View Slide

  12. Synchronous Stack
    Your Traditional Server Processes
    nginx:80
    php-fpm php-fpm php-fpm php-fpm
    Your app’s source code
    Storage

    View Slide

  13. The Event Loop

    View Slide

  14. DEMO TIME!!!
    Open your terminals and...
    $ telnet demo.socketo.me 8080

    View Slide

  15. WebSocket Recipe
    +
    RFC6455
    WebSocket Protocol
    (PHP)
    HTML5
    WebSocket API
    (JavaScript)
    = goodness

    View Slide

  16. Development
    Server AND Client
    share 4 simple events

    View Slide

  17. (speaker note: duck)

    View Slide

  18. It doesn’t!
    ...much...
    It’s getting better!

    View Slide

  19. A Shameless Plug
    Introducing: Ratchet

    View Slide

  20. Ratchet is
    A pure PHP library to serve WebSockets; it is:
    • RFC6455 compliant
    • asynchronous
    • unit tested (hi Mr. Grumpy)
    • loosely coupled
    • ready to lose limbs

    View Slide

  21. Fun with Numbers
    Remember how PHP “sucked”?

    View Slide

  22. The anatomy of a Ratchet application:
    Look familiar?

    View Slide

  23. the actual logic
    execute the server
    Full Chat: under 50 loc!

    View Slide

  24. Ratchet Architecture
    The Decorator design pattern

    View Slide

  25. Components

    View Slide

  26. The Client (JavaScript)

    View Slide

  27. DEMO TIME!!!
    Open Chrome or Firefox
    and open your debug console

    View Slide

  28. 4.0+
    (2009)
    6.0+
    (2011)
    10.70+
    (2012)
    5.0+
    (2010)
    10+
    (2012)

    View Slide

  29. Supporting the
    unsupported Browsers
    • IE7
    • IE8
    • IE9

    View Slide

  30. ...I saw this the other day...
    seems legit?

    View Slide

  31. 2 Options
    SockJS Flash

    View Slide

  32. Flash
    • Very easy to implement
    • True pollyfill
    • They’re IE users anyway
    • It’s Flash...
    • Up to 3 second connect
    • Port blocked by proxies
    Pros Cons

    View Slide

  33. SockJS
    • Future proof
    • Uses native fallbacks
    • Community support
    • No PHP implementation
    • No sub-protocol support
    Pros Cons

    View Slide

  34. Going Polyglot

    View Slide

  35. How do we communicate?
    It’s all about sockets

    View Slide

  36. PHP/Python/Java/Node/Ruby
    socket or MQ
    (sync)
    (async)

    View Slide

  37. DNode
    ZeroMQ

    View Slide

  38. Practical Development

    View Slide

  39. Today’s Issues
    • Proxies
    • Scaling
    • Use SSL
    • ???
    Problem Solution
    (time solves all problems)

    View Slide

  40. Questions?
    • @boden_c
    • socketo.me
    • github.com/cboden/Ratchet
    • github.com/reactphp
    • joind.in/7407

    View Slide