![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;](https://image.slidesharecdn.com/comet-and-php-slideshare-dpc-2011-110521112623-phpapp02/85/Implementing-Comet-using-PHP-45-320.jpg)
Implementing Comet using PHP
- 1. Implement Comet using PHP Dutch PHP Conference 2011 Jonas Mariën – King Foo www.king-foo.be
- 2. Jonas Mariën, King Foo www.king-foo.be Author “Zend Framework Web Services” (php|architect) Online since 93 (yep). PHP for fun since 96, professional since 2001. Master in Biological and Genetic Engineering, University of Leuven.
- 3. Comet = data push from server to client
- 4. Comet aka Reverse Ajax HTTP server Push Ajax Push HTTP streaming ... abused/umbrella term
- 5. Use case Example updates being pushed: ticker info
- 6. news items
- 10. in-app messaging
- 12. feedback on processes that take time to complete
- 13. ...
- 14. Push? But, but ... a browser pulls and the server responds, no? Fake push using polling trickery
- 15. Connection is kept open as long as possible
- 16. A giant hack
- 17. Does the trick for now
- 18. The Basics
- 19. Short polling Client tries to get something new from the server and polls at regular and short intervals.
- 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.
- 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(); }
- 25. The forever frame An iframe keeps loading, never stops (or reloads occasionally)
- 27. Dirty, e.g IE doesn't like this
- 28. The forever frame In the page: <script type="text/javascript">function updateResult(/** do something **/)</script>) <iframe style='width: 0px; height: 0px' src='./serverside.php'></iframe> On the server: <?php set_time_limit(0); header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 24 Jul 1974 05:00:00 GMT"); flush(); ob_flush();//if ob_start (implicitly) called before while(true) { $result = date('Y-m-d H:i:s'); echo '<script type="text/javascript">parent.updateResult(\''.$result.'\');</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).
- 34. XHR Sine jQuery 1.5, no direct access to the underlying XHR object
- 35. No access to loading state
- 36. Can use a filter: http://bugs.jquery.com/ticket/8327
- 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); } }
- 40. Long polling Longer intervals
- 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: "GET", url: "server.php", async: true, cache: false, timeout:50000, success: function(data) { /** do something **/ setTimeout ( 'getUpdate()', 1000 ); }, error: function(XMLHttpRequest, textStatus, errorThrown){ /**show error notice**/ setTimeout ( 'getUpdate()', "20000"); }, }); }; $(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;
- 47. Thoughts & notes Piggybacking
- 48. Long polling issues: Requests are kept open for a while
- 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
- 52. Proxies (chunking stuff) and firewalls (dropping long connections). Some Comet libs (next slides) try to detect intermediate proxies Comet is not mature. Uses HTTP against most of the basic assumptions and no real standards available. Not a real standard.
- 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.
- 55. DWR Direct Web Remoting (http://directwebremoting.org)
- 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?
- 60. Cometd & Bayeux Dojo Foundation
- 61. Cometd: reference implementation (in Java, Perl and Python). Java implementation uses Jetty.
- 62. Bayeux: protocol, JSON for request/response
- 66. /chat/** Now has some WS support too (haven't tested that, see http://cometdproject.dojotoolkit.org/node/124 and https://www.dojotoolkit.org/reference-guide/_static/js/dojox/socket/)
- 67. http://cometd.org/documentation/installation http://cometd.org/documentation/howtos/primer Also, keep an eye on: http://opencoweb.org/
- 68. Bayeux Handshake [ { "channel": "/meta/handshake", "version": "1.0", "minimumVersion": "1.0beta", "supportedConnectionTypes": ["long-polling", "callback-polling", "iframe"] } ] [ { "channel": "/meta/handshake", "version": "1.0", "minimumVersion": "1.0beta", "supportedConnectionTypes": ["long-polling","callback-polling"], "clientId": "Un1q31d3nt1f13r", "successful": true, "authSuccessful": true, "advice": { "reconnect": "retry" } } ] http://cometdproject.dojotoolkit.org/documentation/bayeux
- 70. Subscribe [ { "channel": "/meta/subscribe", "clientId": "Un1q31d3nt1f13r", "subscription": "/chat/**" } ] [ { "channel": "/meta/subscribe", "clientId": "Un1q31d3nt1f13r", "subscription": "/chat/**", "successful": true, "error": "" } ]
- 71. Bayeux dojo.require("dojox.cometd"); dojox.cometd.init("http://example.com/cometd"); dojox.cometd.subscribe("/slideshow/change", function(comet) { $('#slideimg').attr('src', comet.data.src); }); }); .... dojox.cometd.publish("/slideshow/change", { '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
- 74. Phomet/Bayeux client Use phomet to talk Bayeux to Cometd $phomet = new Bayeux(’http://example.com/cometd’); $phomet->publish(’/chat/developersonly’, array( 'user' => 'jonas', 'message' => 'bayeux'. . 'is ... well ... euhm')); http://morglog.alleycatracing.com/bayeux.class.inc.phps
- 75. WebSync Commercial solution based on ASP.NET/IIS, also On-Demand
- 76. Comes with an OnDemand SDK for other languages, has some PHP sample code
- 77. APE APE - Ajax Push Engine
- 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
- 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
- 90. http://tech.kaazing.com/documentation/ Commercial, free dev license for testing
- 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
- 100. Want more? socket.io server side: https://github.com/LearnBoost/Socket.IO-node
- 101. socket.io client side: https://github.com/LearnBoost/Socket.IO
- 105. Other solutions nginx push module (http://pushmodule.slact.net/)
- 110. Jetty 6 / Grizzly / Tomcat 6
- 114. Noloh (has some push support)
- 115. LightStreamer
- 116. Pushlets
- 117. ...
- 119. “HTTP callbacks using POST, for notification” PubSubHubbub http://code.google.com/p/pubsubhubbub/
- 120. “Server-to-server publish/subscribe using webhooks” ReverseHTTP http://reversehttp.net/
- 121. “Server in the browser” WebSockets & Server-Sent Events
- 122. Message formats JSON
- 127. http://riteshsblog.blogspot.com/2011/03/rabbitmq-adapter-for-zend-queue-using.html (uses AMQP and AMQP extension) XMPP
- 128. any PHP based solutions?
- 129. PHP? DIY - have a look at existing attempts Phico (http://www.3site.eu/phico.php)
- 132. Other? No Bayeux/Cometd replacement in PHP, but doable if you really want to
- 134. PHP? Write a daemon Using nanoweb ?
- 135. Using Appserver-in-PHP ? (https://github.com/indeyets/appserver-in-php)
- 136. Use Phet (https://github.com/Tim-Smart/phet) Use existing comet server solutions and add/read data using 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)
- 139. Real-time web Real push WebSockets
- 141. SSE Client: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <script> var source = new EventSource('./server.php'); source.onmessage = function (event) { document.getElementById('output').innerHTML += event.data + '<br>'; }; </script> <div id="output"></div> </body> </html> Server: <?php header("Content-Type: text/event-stream\n\n"); echo 'data: ' . date('Y-m-d H:i:s') . "\n"; 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.
- 146. Credits “ Comet and Reverse Ajax: The next Generation Ajax 2.0” by Dave Crane and Phil McCarthy
- 147. www.html5rocks.com
- 148. www.cometdaily.com
- 149. Wikipedia of course
- 150. Plus: various links showed in the slides
- 153. http://joind.in/3237 Questions? Want us to work for you? [email_address] www.king-foo.be www.king-foo.net/blog @jonasmarien