Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Christian Lück
PRO

June 06, 2019
Tweet

More Decks by Christian Lück

Other Decks in Programming

Transcript

  1. getting started with ReactPHP
    pushing real-time data to the browser
    @another_clue

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  13. really?
    13

    View Slide

  14. this is a getting started guide
    14

    View Slide

  15. pushing real-time data
    to the browser
    15

    View Slide

  16. I encourage feedback,
    questions + suggestions
    16

    View Slide

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

    View Slide

  18. Agenda
    - Hello!
    - Introduction to async PHP with ReactPHP
    - event loops
    - streaming data
    - sockets
    - promises
    - conclusions
    18
    examples and demo time!

    View Slide

  19. Hello!
    19

    View Slide

  20. $ whoami
    20

    View Slide

  21. $ whoami
    Christian Lück
    21

    View Slide

  22. $ whoami
    Christian Lück
    22

    View Slide

  23. $ whoami
    Christian Lueck
    23

    View Slide

  24. $ whoami
    Christian Lueck
    24

    View Slide

  25. $ whoami
    Christian Lueck
    @clue
    25

    View Slide

  26. $ whoami
    Christian Lueck
    @another_clue
    26

    View Slide

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

    View Slide

  28. $ whoami
    Christian Lueck
    @another_clue
    passionate about pushing the limits
    freelance software engineer 28

    View Slide

  29. Who are you?
    29
    now that you know me…

    View Slide

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

    View Slide

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

    View Slide

  32. PHP, the web of the ‘90s?
    32

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  41. PHP may not be pretty…
    41

    View Slide

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

    View Slide

  43. Knock knock!
    Who’s there?
    43

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  47. Node.js
    47

    View Slide

  48. Node.js
    48
    good fit, huge ecosystem

    View Slide

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

    View Slide

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

    View Slide

  51. nodejs?
    51

    View Slide

  52. no js!
    52

    View Slide

  53. Everybody’s favorite language…
    53

    View Slide

  54. PHP
    54

    View Slide

  55. PHP
    55
    gets the job done

    View Slide

  56. PHP
    56
    gets the job done
    widespread usage

    View Slide

  57. PHP
    57
    gets the job done
    widespread usage
    if PHP can do it…

    View Slide

  58. Enter React!
    58

    View Slide

  59. 59

    View Slide

  60. The other React™
    60

    View Slide

  61. The REAL React™
    61

    View Slide

  62. 62

    View Slide

  63. What is React?
    63

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. 100%
    67

    View Slide

  68. 100%
    pure PHP
    68

    View Slide

  69. 100%
    pure PHP
    no extensions
    69

    View Slide

  70. 100%
    pure PHP
    no extensions
    no magic
    70

    View Slide

  71. What does that even mean?!
    71

    View Slide

  72. the idea
    72

    View Slide

  73. calculations are fast
    73
    the idea

    View Slide

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

    View Slide

  75. I/O is everywhere
    75

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  80. 80
    Source: Latency Numbers Every Programmer Should Know: https://gist.github.com/jboner/2841832
    CPU vs I/O

    View Slide

  81. I/O is slow!
    81

    View Slide

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

    View Slide

  83. This is React
    83

    View Slide

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

    View Slide

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

    View Slide

  86. This is React
    86
    Start multiple I/O operations (non-blocking)
    Get notified when something happens (react)
    Don’t waste time waiting

    View Slide

  87. What React is not
    87

    View Slide

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

    View Slide

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

    View Slide

  90. What React is not
    React is not black magic / vodoo
    React is not a framework
    React is not the new buzz
    90

    View Slide

  91. React core components
    91

    View Slide

  92. event loop
    92

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  100. Event loop
    Implementors
    - Reactor pattern (hence the name)
    - start timers
    - once
    - periodic
    - ticks
    - plus wait for stream resources to become
    - readable
    - writable
    100

    View Slide

  101. streaming data
    101

    View Slide

  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

    View Slide

  103. Stream interfaces and events
    103

    View Slide

  104. Stream interfaces and events
    104

    View Slide

  105. Stream interfaces and events
    105

    View Slide

  106. sockets
    106

    View Slide

  107. Sockets
    107
    - Streams, but over the network

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  114. Sockets in practice
    114

    View Slide

  115. Sockets in practice
    - implementation detail
    115

    View Slide

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

    View Slide

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

    View Slide

  118. Sockets in practice
    - implementation detail
    - higher level protocols (HTTP anybody)
    - higher level concepts (RESTful etc.)
    - higher level APIs (SDKs, API clients etc.)
    118

    View Slide

  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

    View Slide

  120. promises
    120

    View Slide

  121. Promises
    - Placeholder for a single future result
    - Possible states:
    - pending
    - fulfilled (successfully resolved)
    - rejected (Exception occured)
    121

    View Slide

  122. Promise API
    122

    View Slide

  123. Promise API
    123

    View Slide

  124. Promise API usage
    124

    View Slide

  125. Promise API usage
    125

    View Slide

  126. Promise API usage
    126

    View Slide

  127. Promises in practice
    -
    127

    View Slide

  128. Promises in practice
    - Everywhere!
    128

    View Slide

  129. Promises in practice
    - Everywhere!
    - react/socket
    - clue/buzz-react
    - clue/packagist-react
    - clue/redis-react
    - react/mysql
    - …
    129

    View Slide

  130. HTTP streaming
    130

    View Slide

  131. HTTP in a gist
    131

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  135. HTTP streaming
    135

    View Slide

  136. HTTP streaming
    136
    - HTTP request/response semantics

    View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

  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?

    View Slide

  141. EventSource
    141

    View Slide

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

    View Slide

  143. Server-Sent Events in a gist
    143
    - Normal Request/Response
    - Client API for streaming access

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  148. fully-functional streaming
    HTTP server in a single PHP
    file
    148

    View Slide

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

    View Slide

  150. 150

    View Slide

  151. Conclusions
    151

    View Slide

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

    View Slide

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

    View Slide

  154. YES
    154
    But you might be missing the point…
    Can I use ReactPHP to make my website 1000x faster?

    View Slide

  155. PHP
    155

    View Slide

  156. PHP
    faster than you probably thought
    156

    View Slide

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

    View Slide

  158. ReactPHP
    158

    View Slide

  159. ReactPHP
    159
    a real deal and here to stay

    View Slide

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

    View Slide

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

    View Slide

  162. try!
    162

    View Slide

  163. try!
    whenever having to wait
    163

    View Slide

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

    View Slide

  165. help!
    165

    View Slide

  166. help!
    elaborate documentation on ReactPHP.org
    166

    View Slide

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

    View Slide

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

    View Slide

  169. help!
    elaborate documentation on ReactPHP.org
    tweet @ReactPHP or #reactphp
    Talk to me
    Did I mention I’m available? 169

    View Slide

  170. // thank you!
    $loop->stop();
    170
    @another_clue – https://lueck.tv/

    View Slide

  171. integration
    171

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  176. Integration with traditional environments
    176
    integrating async into sync is easy
    - just run the loop until you’re done
    - see clue/block-react

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  180. Avoid blocking!
    - The loop must not be blocked
    - Many functions / lib assume blocking by default
    - Anything >1ms should be reconsidered
    180

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide