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

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