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. getting started with ReactPHP pushing real-time data to the browser

    @another_clue
  2. Agenda - Hello! - Introduction to async PHP with ReactPHP

    2
  3. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops 3
  4. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data 4
  5. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets 5
  6. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises 6
  7. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data 7
  8. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP 8
  9. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - real time data - Streaming HTTP - Chat bots 9
  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
  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
  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
  13. really? 13

  14. this is a getting started guide 14

  15. pushing real-time data to the browser 15

  16. I encourage feedback, questions + suggestions 16

  17. Agenda - Hello! - Introduction to async PHP with ReactPHP

    - event loops - streaming data - sockets - promises - conclusions 17
  18. Agenda - Hello! - Introduction to async PHP with ReactPHP

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

  20. $ whoami 20

  21. $ whoami Christian Lück 21

  22. $ whoami Christian Lück 22

  23. $ whoami Christian Lueck 23

  24. $ whoami Christian Lueck 24

  25. $ whoami Christian Lueck @clue 25

  26. $ whoami Christian Lueck @another_clue 26

  27. $ whoami Christian Lueck @another_clue passionate about pushing the limits

    27
  28. $ whoami Christian Lueck @another_clue passionate about pushing the limits

    freelance software engineer 28
  29. Who are you? 29 now that you know me…

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

    PHP developers? - architecs / engineers?
  31. Who are you? 31 now that you know me… -

    PHP developers? - architecs / engineers? - know React?
  32. PHP, the web of the ‘90s? 32

  33. PHP and the web of the ‘90s 33

  34. PHP and the web of the ‘90s 34 Apache Client

    PHP MySQL
  35. PHP and the web of the ‘90s traditional LAMP stack

    35 Apache Client PHP MySQL
  36. PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle 36 Apache Client PHP MySQL
  37. PHP and the web of the ‘90s traditional LAMP stack

    Request-Response-Cycle PHP is too slow? 37 Apache Client PHP MySQL
  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
  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
  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
  41. PHP may not be pretty… 41

  42. PHP may not be pretty… but it gets the job

    done! 42
  43. Knock knock! Who’s there? 43

  44. Knock knock! 2019! Who’s there? 44

  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
  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
  47. Node.js 47

  48. Node.js 48 good fit, huge ecosystem

  49. Node.js 49 good fit, huge ecosystem interesting concepts

  50. Node.js 50 good fit, huge ecosystem interesting concepts npm install…

  51. nodejs? 51

  52. no js! 52

  53. Everybody’s favorite language… 53

  54. PHP 54

  55. PHP 55 gets the job done

  56. PHP 56 gets the job done widespread usage

  57. PHP 57 gets the job done widespread usage if PHP

    can do it…
  58. Enter React! 58

  59. 59

  60. The other React™ 60

  61. The REAL React™ 61

  62. 62

  63. What is React? 63

  64. What is React? non-blocking I/O 64

  65. What is React? non-blocking I/O event-driven 65

  66. What is React? non-blocking I/O event-driven async 66

  67. 100% 67

  68. 100% pure PHP 68

  69. 100% pure PHP no extensions 69

  70. 100% pure PHP no extensions no magic 70

  71. What does that even mean?! 71

  72. the idea 72

  73. calculations are fast 73 the idea

  74. calculations are fast I/O is slow 74 the idea

  75. I/O is everywhere 75

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

    name it…) 76
  77. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you

    name it…) mysql, postgres 77
  78. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you

    name it…) mysql, postgres filesystem I/O (session files) 78
  79. I/O is everywhere third party HTTP APIs (RESTful, SOAP, you

    name it…) mysql, postgres filesystem I/O (session files) redis, memcache 79
  80. 80 Source: Latency Numbers Every Programmer Should Know: https://gist.github.com/jboner/2841832 CPU

    vs I/O
  81. I/O is slow! 81

  82. I/O is slow! So why wait? 82

  83. This is React 83

  84. This is React 84 Start multiple I/O operations (non-blocking)

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

    notified when something happens (react)
  86. This is React 86 Start multiple I/O operations (non-blocking) Get

    notified when something happens (react) Don’t waste time waiting
  87. What React is not 87

  88. What React is not React is not black magic /

    vodoo 88
  89. What React is not React is not black magic /

    vodoo React is not a framework 89
  90. What React is not React is not black magic /

    vodoo React is not a framework React is not the new buzz 90
  91. React core components 91

  92. event loop 92

  93. Event loop Consumers - THE core, low-level component 93

  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
  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
  96. Event loop Implementors - Reactor pattern (hence the name) 96

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

    start timers - once - periodic - ticks 97
  98. Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks 98
  99. Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks 99
  100. Event loop Implementors - Reactor pattern (hence the name) -

    start timers - once - periodic - ticks - plus wait for stream resources to become - readable - writable 100
  101. streaming data 101

  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
  103. Stream interfaces and events 103

  104. Stream interfaces and events 104

  105. Stream interfaces and events 105

  106. sockets 106

  107. Sockets 107 - Streams, but over the network

  108. Sockets 108 - Streams, but over the network - servers

    listen - clients connect
  109. Sockets 109 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  110. Sockets 110 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  111. Sockets 111 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  112. Sockets 112 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  113. Sockets 113 - Streams, but over the network - servers

    listen - clients connect - Focus on TCP/IP (UDP etc. also possible)
  114. Sockets in practice 114

  115. Sockets in practice - implementation detail 115

  116. Sockets in practice - implementation detail - higher level protocols

    (HTTP anybody) 116
  117. Sockets in practice - implementation detail - higher level protocols

    (HTTP anybody) - higher level concepts (RESTful etc.) 117
  118. Sockets in practice - implementation detail - higher level protocols

    (HTTP anybody) - higher level concepts (RESTful etc.) - higher level APIs (SDKs, API clients etc.) 118
  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
  120. promises 120

  121. Promises - Placeholder for a single future result - Possible

    states: - pending - fulfilled (successfully resolved) - rejected (Exception occured) 121
  122. Promise API 122

  123. Promise API 123

  124. Promise API usage 124

  125. Promise API usage 125

  126. Promise API usage 126

  127. Promises in practice - 127

  128. Promises in practice - Everywhere! 128

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

    clue/packagist-react - clue/redis-react - react/mysql - … 129
  130. HTTP streaming 130

  131. HTTP in a gist 131

  132. HTTP in a gist 132 GET / HTTP/1.1

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

    OK Content-Type: text/plain hello world!
  134. HTTP in a gist 134 GET / HTTP/1.1 HTTP/1.1 200

    OK Content-Type: text/plain hello world!
  135. HTTP streaming 135

  136. HTTP streaming 136 - HTTP request/response semantics

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

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

    (download huge files) - streaming requests (upload huge files) - Still request/response semantics
  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?
  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?
  141. EventSource 141

  142. Server-Sent Events (SSE) / EventSource 142

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

    Client API for streaming access
  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
  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
  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
  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
  148. fully-functional streaming HTTP server in a single PHP file 148

  149. many, MANY more third-party projects: https://github.com/reactphp/react/wiki/Users 149

  150. 150

  151. Conclusions 151

  152. 152 Can I use ReactPHP to make my website 1000x

    faster?
  153. YES 153 Can I use ReactPHP to make my website

    1000x faster?
  154. YES 154 But you might be missing the point… Can

    I use ReactPHP to make my website 1000x faster?
  155. PHP 155

  156. PHP faster than you probably thought 156

  157. PHP faster than you probably thought more versatile than you

    probably thought 157
  158. ReactPHP 158

  159. ReactPHP 159 a real deal and here to stay

  160. ReactPHP 160 a real deal and here to stay stable

    & production ready
  161. ReactPHP 161 a real deal and here to stay stable

    & production ready *awesome*
  162. try! 162

  163. try! whenever having to wait 163

  164. try! whenever having to wait whenever accessing network 164

  165. help! 165

  166. help! elaborate documentation on ReactPHP.org 166

  167. help! elaborate documentation on ReactPHP.org tweet @ReactPHP or #reactphp 167

  168. help! elaborate documentation on ReactPHP.org tweet @ReactPHP or #reactphp Talk

    to me 168
  169. help! elaborate documentation on ReactPHP.org tweet @ReactPHP or #reactphp Talk

    to me Did I mention I’m available? 169
  170. // thank you! $loop->stop(); 170 @another_clue – https://lueck.tv/

  171. integration 171

  172. integration non-blocking and blocking don’t mix well 172

  173. integration non-blocking and blocking don’t mix well decide for either

    approach 173
  174. integration non-blocking and blocking don’t mix well decide for either

    approach isolate & communicate 174
  175. Integration with traditional environments 175 integrating async into sync is

    easy
  176. Integration with traditional environments 176 integrating async into sync is

    easy - just run the loop until you’re done - see clue/block-react
  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
  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
  179. Avoid blocking! - The loop must not be blocked 179

  180. Avoid blocking! - The loop must not be blocked -

    Many functions / lib assume blocking by default - Anything >1ms should be reconsidered 180
  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
  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
  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