Getting started with ReactPHP – Pushing real-time data to the browser (IPC19)

Getting started with ReactPHP – Pushing real-time data to the browser (IPC19)

Think about PHP for a few seconds… What came to mind? It’s very likely you thought about your average product catalog, a blogging platform, or how the platform is inferior to things like Node.js. But wait, it’s 2019! What if I told you PHP’s huge ecosystem has way more to offer and PHP is not inferior at all to its evil cousin Node.js?

In this talk you will learn about the core concepts of async PHP and why you too should care about ReactPHP being a real thing. The talk has a strong focus on sparking the idea that PHP can be way faster and more versatile than you probably thought. Bring along an open mind, and through lots of interesting examples and live demos learn why what sounds crazy at first might soon be a valuable addition in your toolbox.

You’re already familiar with PHP and want to learn what ReactPHP is all about? Then this talk is for you! We will start from scratch and see what it takes to build an application that pushes data from your command line to your browser in real-time. You’re invited to join the interactive demos or lean back and learn more about why an event-driven approach might be the next big thing in making your application faster and more responsive.

---

These slides were used as part of a presentation at @phpconference. The full presentation took 45min with basic project setup, getting started with ReactPHP's core components and eventually implementing an HTTP server using Server-Sent Events (EventSource).

Resulting source code can be found here: https://gist.github.com/clue/c426bcee9c7767157085d6b881204998

D1b6700884ac0ae368918ad171bb6a75?s=128

Christian Lück

June 06, 2019
Tweet

Transcript

  1. 4.
  2. 5.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets 5
  3. 6.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises 6
  4. 7.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data 7
  5. 8.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP 8
  6. 9.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots 9
  7. 10.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools 10
  8. 11.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools - desktop GUI 11
  9. 12.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots - interactive CLI tools - desktop GUI - Conclusions 12
  10. 17.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - conclusions 17
  11. 18.

    Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - conclusions 18 examples and demo time!
  12. 19.
  13. 30.

    Who are you? 30 now that you know me… -

    PHP developers? - architecs / engineers?
  14. 31.

    Who are you? 31 now that you know me… -

    PHP developers? - architecs / engineers? - know React?
  15. 36.

    PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle 36 Apache Client PHP MySQL
  16. 37.

    PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle PHP is too slow? 37 Apache Client PHP MySQL
  17. 38.

    PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle PHP is too slow? 38 Apache Client MySQL FPM PHP PHP
  18. 39.

    PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle PHP is too slow? 39 nginx Client MySQL FPM PHP PHP
  19. 40.

    PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle PHP is too slow? 40 nginx Client FPM PHP PHP memcache MySQL
  20. 45.

    Knock knock! 2019! - Separation of concerns (Frontend↔Backend) - HTTP

    APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 45
  21. 46.

    Knock knock! 2019! - Separation of concerns (Frontend↔Backend) - HTTP

    APIs (RESTful) - Integration with 3rd parties - Live-Data (ticker) - CLI tools Who’s there? 46
  22. 52.
  23. 54.
  24. 59.

    59

  25. 62.

    62

  26. 67.
  27. 78.

    I/O is everywhere third party HTTP APIs (RESTful, SOAP, you

    name it…) mysql, postgres filesystem I/O (session files) 78
  28. 79.

    I/O is everywhere third party HTTP APIs (RESTful, SOAP, you

    name it…) mysql, postgres filesystem I/O (session files) redis, memcache 79
  29. 85.
  30. 86.

    This is React 86 Start multiple I/O operations (non-blocking) Get

    notified when something happens (react) Don’t waste time waiting
  31. 89.

    What React is not React is not black magic /

    vodoo React is not a framework 89
  32. 90.

    What React is not React is not black magic /

    vodoo React is not a framework React is not the new buzz 90
  33. 94.

    Event loop Consumers - THE core, low-level component - Create

    an instance - Just use the Factory - Additional extensions for bigger payloads - something inbetween… - just pass the $loop around - Start running - keeps running forever - unless stopped or done 94
  34. 95.

    Event loop Consumers - THE core, low-level component - Create

    an instance - Just use the Factory - Additional extensions for bigger payloads - something inbetween… - just pass the $loop around - Start running - keeps running forever - unless stopped or done 95
  35. 97.

    Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks 97
  36. 98.

    Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks 98
  37. 99.

    Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks 99
  38. 100.

    Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks - plus wait for stream resources to become - readable - writable 100
  39. 102.

    Streams - Process large strings in chunks as they happen

    (think downloads) - Types - Readable (e.g. STDIN pipe) - Writable (e.g. STDOUT pipe) - Duplex (e.g. TCP/IP connection) 102
  40. 109.

    Sockets 109 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  41. 110.

    Sockets 110 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  42. 111.

    Sockets 111 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  43. 112.

    Sockets 112 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  44. 113.

    Sockets 113 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  45. 117.

    Sockets in practice - implementation detail - higher level protocols

    (HTTP anybody) - higher level concepts (RESTful etc.) 117
  46. 118.

    Sockets in practice - implementation detail - higher level protocols

    (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) 118
  47. 119.

    Sockets in practice - implementation detail - higher level protocols

    (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) - Concepts still apply, details are hidden 119
  48. 121.

    Promises - Placeholder for a single future result - Possible

    states: - pending - fulfilled (successfully resolved) - rejected (Exception occured) 121
  49. 129.

    Promises in practice - Everywhere! - react/socket - clue/buzz-react -

    clue/packagist-react - clue/redis-react - react/mysql - … 129
  50. 133.

    HTTP in a gist 133 GET / HTTP/1.1 HTTP/1.1 200

    OK Content-Type: text/plain hello world!
  51. 134.

    HTTP in a gist 134 GET / HTTP/1.1 HTTP/1.1 200

    OK Content-Type: text/plain hello world!
  52. 137.

    HTTP streaming 137 - HTTP request/response semantics - streaming responses

    (download huge files) - streaming requests (upload huge files)
  53. 138.

    HTTP streaming 138 - HTTP request/response semantics - streaming responses

    (download huge files) - streaming requests (upload huge files) - Still request/response semantics
  54. 139.

    HTTP streaming 139 - HTTP request/response semantics - streaming responses

    (download huge files) - streaming requests (upload huge files) - Still request/response semantics - Long-polling (Comet) anyone?
  55. 140.

    HTTP streaming 140 - HTTP request/response semantics - streaming responses

    (download huge files) - streaming requests (upload huge files) - Still request/response semantics - Long-polling (Comet) anyone?
  56. 144.

    Server-Sent Events in a gist 144 - Normal Request/Response -

    Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream
  57. 145.

    Server-Sent Events in a gist 145 - Normal Request/Response -

    Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello
  58. 146.

    Server-Sent Events in a gist 146 - Normal Request/Response -

    Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello data: world
  59. 147.

    Server-Sent Events in a gist 147 - Normal Request/Response -

    Client API for streaming access HTTP/1.1 200 OK Content-Type: text/event-stream data: hello data: world
  60. 150.

    150

  61. 154.

    YES 154 But you might be missing the point… Can

    I use ReactPHP to make my website 1000x faster?
  62. 155.
  63. 161.
  64. 162.
  65. 165.
  66. 176.

    Integration with traditional environments 176 integrating async into sync is

    easy - just run the loop until you’re done - see clue/block-react
  67. 177.

    Integration with traditional environments 177 integrating async into sync is

    easy - just run the loop until you’re done - see clue/block-react integrating sync into async is hard
  68. 178.

    Integration with traditional environments 178 integrating async into sync is

    easy - just run the loop until you’re done - see clue/block-react integrating sync into async is hard - often requires async rewrite - consider forking instead
  69. 180.

    Avoid blocking! - The loop must not be blocked -

    Many functions / lib assume blocking by default - Anything >1ms should be reconsidered 180
  70. 181.

    Avoid blocking! - The loop must not be blocked -

    Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams 181
  71. 182.

    Avoid blocking! - The loop must not be blocked -

    Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams - Need a blocking function? - Fork off! - Use IPC 182
  72. 183.

    Avoid blocking! - The loop must not be blocked -

    Many functions / lib assume blocking by default - Anything >1ms should be reconsidered - Alternatives - Single result: Promises - Evented: Streams - Need a blocking function? - Fork off! - Use IPC 183 Pay attention: - PDO, mysql etc. - file system access - network access - third-party APIs