True North WebSocket talk

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