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

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

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

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 2018! 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 hands-on tutorial you will learn about the core concepts of async PHP and why you too should care about ReactPHP being a real thing. The workshop 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 tutorial is for you! We will start from scratch and build a demo application that pushes data from your command line in real-time to your browser. Several scenarios are prepared, but ideally you bring in your own ideas: Let’s build an interactive chat bot, an interactive CLI tool or even an actual desktop GUI, it’s up to you!

The tutorial assumes people are familiar with PHP, have PHP and their favorite IDE already setup, but does not require people to be familiar with ReactPHP.

---

These slides were used as part of a hands-on workshop at @PHPYorkshire. The full workshop took 3h 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/6ba091ed298b1ecec528a3a6c201a2d1

Christian Lück
PRO

April 13, 2018
Tweet

More Decks by Christian Lück

Other Decks in Programming

Transcript

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

    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 YOUR workshop
    14

    View Slide

  15. you need: Composer + wifi
    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
    17

    View Slide

  18. Agenda
    - Hello!
    - Introduction to async PHP with ReactPHP
    - event loops
    - streaming data
    - sockets
    - promises
    - event-driven, streaming application development
    - Conclusions
    18

    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. 32

    View Slide

  33. The other React™
    33

    View Slide

  34. The REAL React™
    34

    View Slide

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

    View Slide

  36. PHP and the web of the ‘90s
    - traditional LAMP stack
    - Request-Response-Cycle
    - PHP is too slow?
    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?
    - We sure can improve this…
    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?
    - We sure can improve this…
    38
    Apache
    Client PHP MySQL
    Apache
    Client
    FPM
    MySQL
    PHP
    PHP

    View Slide

  39. PHP and the web of the ‘90s
    - traditional LAMP stack
    - Request-Response-Cycle
    - PHP is too slow?
    - We sure can improve this…
    39
    Apache
    Client PHP MySQL
    Apache
    Client
    FPM
    MySQL
    PHP
    PHP
    nginx
    Client
    FPM
    MySQL
    PHP
    PHP

    View Slide

  40. PHP and the web of the ‘90s
    - traditional LAMP stack
    - Request-Response-Cycle
    - PHP is too slow?
    - We sure can improve this…
    40
    Apache
    Client PHP MySQL
    Apache
    Client
    FPM
    MySQL
    PHP
    PHP
    nginx
    Client
    FPM
    MySQL
    PHP
    PHP
    nginx
    Client
    FPM
    memcache
    PHP
    PHP
    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!
    2018!
    Who’s there?
    44

    View Slide

  45. Knock knock!
    2018!
    - Separation of concerns
    (Frontend↔Backend)
    - HTTP APIs (RESTful)
    - Integration with 3rd parties
    - Live-Data (ticker)
    - CLI tools
    Who’s there?
    45

    View Slide

  46. nodejs?
    46

    View Slide

  47. no js!
    47

    View Slide

  48. Enter React!
    48

    View Slide

  49. What is React?
    49

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. 100%
    53

    View Slide

  54. 100%
    pure PHP
    54

    View Slide

  55. 100%
    pure PHP
    no extensions
    55

    View Slide

  56. 100%
    pure PHP
    no extensions
    no magic
    56

    View Slide

  57. What does that even mean?!
    57

    View Slide

  58. the idea
    58

    View Slide

  59. the idea
    calculations are fast
    59

    View Slide

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

    View Slide

  61. I/O is everywhere
    61

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. I/O is slow!
    67

    View Slide

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

    View Slide

  69. This is React
    69

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. What React is not
    73

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. React core components
    77

    View Slide

  78. event loops
    78

    View Slide

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

    View Slide

  80. 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
    80

    View Slide

  81. 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
    81
    $loop = Factory::create();
    // something inbetween
    // pass the $loop around to all components
    $loop->run();

    View Slide

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

    View Slide

  83. Event loop
    Implementors
    - Reactor pattern (hence the name)
    - start timers
    - once
    - periodic
    - ticks
    83
    $loop->addTimer(0.5, function () {
    echo ‘world’;
    });
    $loop->addTimer(0.3, function () {
    echo ‘hello’;
    });

    View Slide

  84. Event loop
    Implementors
    - Reactor pattern (hence the name)
    - start timers
    - once
    - periodic
    - ticks
    - wait for stream resources to become
    - readable
    - writable
    84
    $loop->addTimer(0.5, function () {
    echo ‘world’;
    });
    $loop->addTimer(0.3, function () {
    echo ‘hello’;
    });
    $loop->addReadStream($stream, $fn);
    $loop->addWriteStream($stream, $fn);

    View Slide

  85. 85

    View Slide

  86. streaming data
    86

    View Slide

  87. 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)
    87

    View Slide

  88. Streams
    - interfaces, events and listeners:
    88
    $dest->write(‘hello’);
    $source->on(‘data’, function ($data) {
    var_dump($data);
    });
    $source->on(‘close’, function () {
    echo ‘stream closed’;
    });

    View Slide

  89. Streams
    - interfaces, events and listeners:
    89
    $dest->write(‘hello’);
    $source->on(‘data’, function ($data) {
    var_dump($data);
    });
    $source->on(‘close’, function () {
    echo ‘stream closed’;
    });
    $source->pipe($gunzip)->pipe($badwords)->pipe($dest);

    View Slide

  90. 90

    View Slide

  91. sockets
    91

    View Slide

  92. Sockets
    92
    - Streams, but over the network

    View Slide

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

    View Slide

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

    View Slide

  95. 95

    View Slide

  96. Sockets in practice
    96

    View Slide

  97. Sockets in practice
    - implementation detail
    97

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  101. 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
    101

    View Slide

  102. promises
    102

    View Slide

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

    View Slide

  104. Promises
    - no more imperative code flow
    - instead (tell, don’t ask)
    104
    $a->then($fulfilled = null, $rejected = null);
    $a->then(‘process’);
    $a->then(‘process’, ‘var_dump’);

    View Slide

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

    View Slide

  106. 106

    View Slide

  107. HTTP streaming
    107

    View Slide

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

    View Slide

  109. EventSource
    109

    View Slide

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

    View Slide

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

    View Slide

  112. Server-Sent Events in a gist
    112
    - Normal Request/Response
    - Client API for streaming access
    HTTP/1.1 200 OK
    Content-Type: text/event-stream

    View Slide

  113. Server-Sent Events in a gist
    113
    - Normal Request/Response
    - Client API for streaming access
    HTTP/1.1 200 OK
    Content-Type: text/event-stream
    data: hello

    View Slide

  114. Server-Sent Events in a gist
    114
    - Normal Request/Response
    - Client API for streaming access
    HTTP/1.1 200 OK
    Content-Type: text/event-stream
    data: hello
    data: world

    View Slide

  115. 115

    View Slide

  116. Server sent events
    clue/sse-react
    - Server sent events (SSE)
    - aka. EventSource (browser API)
    - Streaming events to browser
    - limited browser support
    116

    View Slide

  117. WebSocket
    117

    View Slide

  118. WebSocket
    118
    - HTTP Upgrade
    - Binary protocol
    - Bidirectional communication
    - Do you need this?

    View Slide

  119. Websocket server
    cboden/ratchet
    - Async WebSocket server
    - bidirectional data flow between
    browser and server
    - better browser support
    119

    View Slide

  120. GUIs
    120

    View Slide

  121. Zenity
    clue/zenity-react
    - PHP desktop GUI applications
    - very simple, Promise-based
    121

    View Slide

  122. 122

    View Slide

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

    View Slide

  124. Conclusions
    124

    View Slide

  125. PHP
    125

    View Slide

  126. PHP
    faster than you probably thought
    126

    View Slide

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

    View Slide

  128. ReactPHP
    128

    View Slide

  129. ReactPHP
    129
    a real deal and here to stay

    View Slide

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

    View Slide

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

    View Slide

  132. try!
    132

    View Slide

  133. try!
    whenever having to wait
    133

    View Slide

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

    View Slide

  135. Need help? Want to help?
    - check each component’s README
    - check open issues
    135

    View Slide

  136. Need help? Want to help?
    - check each component’s README
    - check open issues
    - join #reactphp on irc.freenode.org
    - tweet @ReactPHP or #reactphp
    136

    View Slide

  137. Need help? Want to help?
    - check each component’s README
    - check open issues
    - join #reactphp on irc.freenode.org
    - tweet @ReactPHP or #reactphp
    - Talk to me
    137

    View Slide

  138. Need help? Want to help?
    - check each component’s README
    - check open issues
    - join #reactphp on irc.freenode.org
    - tweet @ReactPHP or #reactphp
    - Talk to me
    Did I mention I’m available?
    138

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  142. 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
    142

    View Slide

  143. 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
    143

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  147. Integration with traditional environments
    147
    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

  148. Integration with traditional environments
    148
    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