This talk was given at the Dutch PHP Conference 2011 and details the use of Comet (aka reverse ajax or ajax push) technologies and the importance of websockets and server-sent events. More information is available at http://joind.in/3237.

1. Implement Comet using PHP Dutch PHP Conference 2011 Jonas Mariën – King Foo www.king-foo.be

3. Comet = data push from server to client

4. Comet aka Reverse Ajax HTTP server Push Ajax Push HTTP streaming ... abused/umbrella term

6. news items

7. chat messages

8. status updates

9. e-mail notifications

10. in-app messaging

11. monitoring feedback

12. feedback on processes that take time to complete

13. ...

15. Connection is kept open as long as possible

16. A giant hack

17. Does the trick for now

18. The Basics

20. Responsiveness at the cost of performance (on the server side). Wasteful in terms of resources.

21. Easy, but not really what we are looking for.

22. Not considered 'comet'.

23. Short polling function getUpdate() { $.ajax({ type: "POST", url: "server.php", data: "type=news&category=PHP", success : function(msg){ $('#feed').append(msg);/** we do something **/ setTimeout("getUpdate()", 2000); } }); } $(document).ready(function() { getUpdate(); }

24. Short polling demo

26. Also called “streaming”

27. Dirty, e.g IE doesn't like this

28. The forever frame In the page: <script type=&quot;text/javascript&quot;>function updateResult(/** do something **/)</script>) <iframe style='width: 0px; height: 0px' src='./serverside.php'></iframe> On the server: <?php set_time_limit(0); header(&quot;Cache-Control: no-cache, must-revalidate&quot;); header(&quot;Expires: Mon, 24 Jul 1974 05:00:00 GMT&quot;); flush(); ob_flush();//if ob_start (implicitly) called before while(true) { $result = date('Y-m-d H:i:s'); echo '<script type=&quot;text/javascript&quot;>parent.updateResult(apos;'.$result.'apos;);</script>'; flush(); ob_flush(); $sleeptimer = rand(1, 15); sleep($sleeptimer); }

29. The forever frame demo

31. Output 'busy' && sleep() on the server side untill finishing

32. We need to get the status before oncomplete/onsuccess Note: there is also multipart/x-mixed-replace as part of XHR

33. XHR “ The XMLHttpRequest object can be in several states. The readyState attribute must return the current state, which must be one of the following values” * http://www.w3.org/TR/XMLHttpRequest/#states UNSENT (0) The object has been constructed. OPENED (1) The open() method has been successfully invoked. During this state request headers can be set using setRequestHeader() and the request can be made using the send() method. HEADERS_RECEIVED (2) All redirects (if any) have been followed and all HTTP headers of the final response have been received. Several response members of the object are now available. LOADING (3) The response entity body is being received. DONE (4) The data transfer has been completed or something went wrong during the transfer (e.g. infinite redirects).

35. No access to loading state

38. Mixed results using different browsers for direct XHR manipulation

39. XHR xhr.onreadystatechange = function() { if(http.readyState == 3 && http.status == 200) { //do something document.write(xhr.responseText); } }

41. Each time something is returned from the server, a new request is started

42. Using XHR

43. Server: checks for updates for a few cycles and keeps a counter. If counter limit reached, 'false' or 'error' message goes back. If an update is available before that, exit the loop and return an 'ok' message with payload.

44. Long Polling function getUpdate(){ $.ajax({ type: &quot;GET&quot;, url: &quot;server.php&quot;, async: true, cache: false, timeout:50000, success: function(data) { /** do something **/ setTimeout ( 'getUpdate()', 1000 ); }, error: function(XMLHttpRequest, textStatus, errorThrown){ /**show error notice**/ setTimeout ( 'getUpdate()', &quot;20000&quot;); }, }); }; $(document).ready(function(){ getUpdate(); });

45. Long Polling <?php ... $twitterSearch = new Zend_Service_Twitter_Search('json'); $hashtag = 'dpc11'; if (isset($_GET['hashtag'])) { $hashtag = $_GET['hashtag']; } $result = false; while($result === false) { if (isset($_GET['since_id']) && $_GET['since_id'] > 0) { $since_id = (int) $_GET['since_id'] + 1; $searchResults = $twitterSearch->search($hashtag, array('lang' => 'en', 'rpp' => 30,'since_id' => $since_id)); } else { $searchResults = $twitterSearch->search($hashtag, array('lang' => 'en','rpp' => 30)); } if (isset($searchResults['results']) && count($searchResults['results'])) { $result = json_encode($searchResults['results'][0]); } } echo $result;

46. Long Polling demo

49. Objects (other then the ones being pulled/pushed) on server side can be changed, need to have these changes fed to the client. Piggybacking to the rescue again?

50. One or more long polling requests open and then an AJAX call: might give you browser problems with simultaneous requests

51. Server performance: we need event driven solutions (message queues and/or something like node.js) to fix this

53. Thoughts & Notes Performance is the biggest problem A Comet server should be able to handle as much connections as fast as possible, with a high troughput and low latency. Long polling requests stay idle for a while, so claiming a thread is not ok.

54. Frameworks/Toolkits

56. Nice, but Java only

57. Fallback different polling mechanisms

58. Dynamic Javascript generation

59. Attempts at PHP implementations, one could use something like json-rpc to mimic this Could use a Java bridge from PHP perhaps?

61. Cometd: reference implementation (in Java, Perl and Python). Java implementation uses Jetty.

62. Bayeux: protocol, JSON for request/response

63. Handshake + Publish/Subscribe

65. /chat/develepersonly

67. http://cometd.org/documentation/installation http://cometd.org/documentation/howtos/primer Also, keep an eye on: http://opencoweb.org/

68. Bayeux Handshake [ { &quot;channel&quot;: &quot;/meta/handshake&quot;, &quot;version&quot;: &quot;1.0&quot;, &quot;minimumVersion&quot;: &quot;1.0beta&quot;, &quot;supportedConnectionTypes&quot;: [&quot;long-polling&quot;, &quot;callback-polling&quot;, &quot;iframe&quot;] } ] [ { &quot;channel&quot;: &quot;/meta/handshake&quot;, &quot;version&quot;: &quot;1.0&quot;, &quot;minimumVersion&quot;: &quot;1.0beta&quot;, &quot;supportedConnectionTypes&quot;: [&quot;long-polling&quot;,&quot;callback-polling&quot;], &quot;clientId&quot;: &quot;Un1q31d3nt1f13r&quot;, &quot;successful&quot;: true, &quot;authSuccessful&quot;: true, &quot;advice&quot;: { &quot;reconnect&quot;: &quot;retry&quot; } } ] http://cometdproject.dojotoolkit.org/documentation/bayeux

70. Subscribe [ { &quot;channel&quot;: &quot;/meta/subscribe&quot;, &quot;clientId&quot;: &quot;Un1q31d3nt1f13r&quot;, &quot;subscription&quot;: &quot;/chat/**&quot; } ] [ { &quot;channel&quot;: &quot;/meta/subscribe&quot;, &quot;clientId&quot;: &quot;Un1q31d3nt1f13r&quot;, &quot;subscription&quot;: &quot;/chat/**&quot;, &quot;successful&quot;: true, &quot;error&quot;: &quot;&quot; } ]

71. Bayeux dojo.require(&quot;dojox.cometd&quot;); dojox.cometd.init(&quot;http://example.com/cometd&quot;); dojox.cometd.subscribe(&quot;/slideshow/change&quot;, function(comet) { $('#slideimg').attr('src', comet.data.src); }); }); .... dojox.cometd.publish(&quot;/slideshow/change&quot;, { 'src': src }); http://simonwillison.net/2007/Dec/5/comet/

72. Cometd/Bayeux Download distribution from: http://downloads.dojotoolkit.org/cometd/ $ tar zxvf cometd-1.1.4.tgz $ cd cometd-1.1.4/ $ cd cometd-1.1.4/ $ cd cometd-demo $ mvn jetty:deploy-war http://localhost:8080/ And a demo..

73. Cometd/Bayeux

76. Comes with an OnDemand SDK for other languages, has some PHP sample code

78. Comet but they claim WebSockets support

79. Fallback

80. Written in C, has SpiderMonkey (js) bindings allowing for serverside modules in js

81. GPL

82. http://www.ape-project.org/

83. http://www.ape-project.org/wiki/index.php/How_to_write_an_application_with_APE

84. APE

85. APE

86. APE

88. Gateway, handles Comet and WebSockets

91. Kaazing

92. Kaazing demo

93. node.js

94. node.js

95. node.js git clone https://github.com/joyent/node.git cd node git tag -l git checkout v0.4.7 ./configure make make install

96. Socket.io

97. Socket.io

98. Socket.io curl http://npmjs.org/install.sh | sh npm install socket.io

99. Demo time

101. socket.io client side: https://github.com/LearnBoost/Socket.IO

102. http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/ -> the demo

103. http://thecoffman.com/2011/02/21/getting-your-feet-wet-with-node.js-and-socket.io/

104. NPM http://search.npmjs.org

106. Meteor (http://meteorserver.org)

107. Freeliberator (http://www.freeliberator.com)

108. Tornado (http://www.tornadoweb.org)

109. Hookbox (https://github.com/mcarter/hookbox)

110. Jetty 6 / Grizzly / Tomcat 6

111. Rails: Juggernaut plugin

112. Atmosphere (http://atmosphere.java.net/)

113. Orbited (https://bitbucket.org/desmaj/orbited)

114. Noloh (has some push support)

115. LightStreamer

116. Pushlets

117. ...

124. http://framework.zend.com/manual/en/zend.queue.stomp.html

126. http://pecl.php.net/package/amqp

128. any PHP based solutions?

130. Simplecomet (http://mandor.net/2008/12/23/12-simplecomet-http-streaming-and-toilet-scrubbing)

131. Comep (http://sourceforge.net/projects/comet/files/)

133. Alternatives are available

135. Using Appserver-in-PHP ? (https://github.com/indeyets/appserver-in-php)

137. Use something like node.js + socket.io and think in terms of upcoming websocket support in all browsers

138. Try to implement a node.js alternative using http://php.net/libevent (which could be a really interesting solution)

140. Server-Sent Events (SSE)

141. SSE Client: <!DOCTYPE html> <html> <head> <meta charset=&quot;utf-8&quot; /> </head> <body> <script> var source = new EventSource('./server.php'); source.onmessage = function (event) { document.getElementById('output').innerHTML += event.data + '<br>'; }; </script> <div id=&quot;output&quot;></div> </body> </html> Server: <?php header(&quot;Content-Type: text/event-stream&quot;); echo 'data: ' . date('Y-m-d H:i:s') . &quot;&quot;; http://googlecodesamples.com/html5/sse/sse.html

142. SSE

143. WebSockets http://code.google.com/p/phpwebsocket/ Another option: www.waterspout.com

144. WebSockets

145. Conclusions Push! Go for a solution that bridges the gap while waiting for websockets and SSE Do keep an eye on the real-time web evolution. It will be here very (very) soon and will impact your job.

147. www.html5rocks.com

148. www.cometdaily.com

149. Wikipedia of course

150. Plus: various links showed in the slides

151. Arrows: signsanddisplays.wordpress.com/page/2/

152. Comet image: http://www.igvita.com/2009/10/21/nginx-comet-low-latency-server-push/

153. http://joind.in/3237 Questions? Want us to work for you? [email_address] www.king-foo.be www.king-foo.net/blog @jonasmarien