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

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

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 2020! 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 @phpbenelux. The full presentation took 60min 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

January 25, 2020
Tweet

Transcript

  1. 4.

    @another_clue Agenda - Hello! - Introduction to async PHP with

    ReactPHP - event loops - streaming data 4
  2. 5.

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue 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.

    @another_clue 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.

    @another_clue Agenda 12 - 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
  10. 17.

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue Agenda - Hello! - Introduction to async PHP with

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

    @another_clue Who are you? 30 now that you know me…

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

    @another_clue Who are you? 31 now that you know me…

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

    @another_clue PHP and the web of the ‘90s traditional LAMP

    stack Request-Response-Cycle 36 Apache Client PHP MySQL
  15. 37.

    @another_clue PHP and the web of the ‘90s traditional LAMP

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

    @another_clue PHP and the web of the ‘90s traditional LAMP

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

    @another_clue PHP and the web of the ‘90s traditional LAMP

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

    @another_clue 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
  19. 45.

    @another_clue Knock knock! 2020! - Separation of concerns (Frontend↔Backend) -

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

    @another_clue Knock knock! 2020! - Separation of concerns (Frontend↔Backend) -

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

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

    you name it…) mysql, postgres filesystem I/O (session files) 79
  22. 80.

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

    you name it…) mysql, postgres filesystem I/O (session files) redis, memcache 80
  23. 85.
  24. 86.

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

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

    @another_clue What React is not React is not black magic

    / vodoo React is not a framework 89
  26. 90.

    @another_clue What React is not React is not black magic

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

    @another_clue 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
  28. 95.

    @another_clue 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
  29. 97.
  30. 98.
  31. 99.
  32. 100.

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

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

    @another_clue 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
  34. 108.
  35. 109.

    @another_clue Sockets 109 - Streams, but over the network -

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

    @another_clue Sockets 110 - Streams, but over the network -

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

    @another_clue Sockets 111 - Streams, but over the network -

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

    @another_clue Sockets 112 - Streams, but over the network -

    servers listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  39. 116.

    @another_clue Sockets in practice - implementation detail - higher level

    protocols (HTTP anybody) - higher level concepts (RESTful etc.) 116
  40. 117.

    @another_clue Sockets in practice - implementation detail - higher level

    protocols (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) 117
  41. 118.

    @another_clue 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 118
  42. 120.

    @another_clue Promises - Placeholder for a single future result -

    Possible states: - pending - fulfilled (successfully resolved) - rejected (Exception occured) 120
  43. 128.

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

    - clue/packagist-react - clue/redis-react - react/mysql - … 128
  44. 132.

    @another_clue HTTP in a gist 132 GET / HTTP/1.1 HTTP/1.1

    200 OK Content-Type: text/plain hello world!
  45. 133.

    @another_clue HTTP in a gist 133 GET / HTTP/1.1 HTTP/1.1

    200 OK Content-Type: text/plain hello world!
  46. 136.

    @another_clue HTTP streaming 136 - HTTP request/response semantics - streaming

    responses (download huge files) - streaming requests (upload huge files)
  47. 137.

    @another_clue HTTP streaming 137 - HTTP request/response semantics - streaming

    responses (download huge files) - streaming requests (upload huge files) - Still request/response semantics
  48. 138.

    @another_clue HTTP streaming 138 - HTTP request/response semantics - streaming

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

    @another_clue 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?
  50. 143.

    @another_clue Server-Sent Events in a gist 143 - Normal Request/Response

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

    @another_clue 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 data: hello
  52. 145.

    @another_clue 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 data: world
  53. 146.

    @another_clue 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
  54. 152.

    @another_clue PubSub 152 - Publish/Subscribe - common pattern for distributed

    system - message broker in between Publisher Redis Subscriber
  55. 153.

    @another_clue PubSub 153 - Publish/Subscribe - common pattern for distributed

    system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber
  56. 154.

    @another_clue PubSub 154 - Publish/Subscribe - common pattern for distributed

    system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber Publisher Subscriber Publisher Subscriber
  57. 155.

    @another_clue PubSub 155 - Publish/Subscribe - common pattern for distributed

    system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber Publisher Subscriber Publisher Subscriber
  58. 156.

    @another_clue PubSub 156 - Publish/Subscribe - common pattern for distributed

    system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber Publisher Subscriber Publisher Subscriber
  59. 157.

    @another_clue PubSub 157 - Publish/Subscribe - common pattern for distributed

    system - message broker in between - horizontal scalability - independent components Publisher Redis Subscriber Publisher Subscriber Publisher Subscriber
  60. 163.

    @another_clue YES 163 But you might be missing the point…

    Can I use ReactPHP to make my website 1000x faster?
  61. 170.

    @another_clue ReactPHP 170 a real deal and here to stay

    stable & production ready *awesome*
  62. 185.

    @another_clue Integration with traditional environments 185 integrating async into sync

    is easy - just run the loop until you’re done - see clue/block-react
  63. 186.

    @another_clue Integration with traditional environments 186 integrating async into sync

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

    @another_clue Integration with traditional environments 187 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
  65. 189.

    @another_clue Avoid blocking! - The loop must not be blocked

    - Many functions / lib assume blocking by default - Anything >1ms should be reconsidered 189
  66. 190.

    @another_clue 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 190
  67. 191.

    @another_clue 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 191
  68. 192.

    @another_clue 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 192 Pay attention: - PDO, mysql etc. - file system access - network access - third-party APIs