Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Progressive page updates

Now this is cool: The joy of flush() shows how PHP’s flush() function can be used to send data to the browser before a page has finished rendering. Check out Ben’s demo page to see the trick in action.

I’ve seen this in use on a few sites for progress indicators, but I’d never realised how easy it was to achieve in PHP. The progress indicator trick is pretty neat—it generally works by having a progress indicator widget that can be modified by javascript, then flushing a <script> element with a call to the progress incrementing function whenever an operation in the server side code has been completed. I’ve seen it used for IRC style chat applications as well, but I’ve always been concerned about the server resources that must be tied up in serving multiple persistent connections at once.

Posted 23rd October 2003 at 4:16 pm

This is Progressive page updates by Simon Willison, posted on 23rd October 2003.

View blog reactions

Next: Microsoft's XUL

Previous: Pair Programming

7 comments

  1. Well, i think, this technic can only be used, if you don't use any caching-tools or gzipping webpages.

    Pepino - 23rd October 2003 16:52 - #

  2. This is a useful technique! One thing to keep in mind (excerpted from the PHP manual entry on flush()):

    Some versions of Microsoft Internet Explorer will only start to display the page after they have received 256 bytes of output, so you may need to send extra whitespace before flushing to get those browsers to display the page.

    This is useful to know -- with a quick test, this output buffering limitation seems to be true for IE6. Easy enough to get around:
    <?=(str_repeat(' ',256)."\n")?>
    can go somewhere between (X)HTML tags in the top of the document.

    Nathan - 23rd October 2003 18:11 - #

  3. I can't even explain how useful this could be. Thanks for hookup Simon and Ben.

    Scrivs - 23rd October 2003 18:49 - #

  4. I've used similar stuff on www.sj-web.com, using ASP's Response.Flush to send completed blocks of text to the browser.

    Very usefull, because that site has a lot of database queries and this gives the user impression that something is happening while data is gathered and processed.

    Also, browser tend to mess up the design if they receive part of the block, like half the table or just part of stylized list, so one must be carefull when to flush things.

    Also, Internet Explorer and Opera allow you to do document.write in the header - can be usefull when you want to write messages to user while page is loading. I used this on the same site - at first it had messages like "loading betslip engine", "loading styles" etc, but client wanted to jsut say "loading, please wait". Oh well, tie the horse where the Lord says.

    aleck - 24th October 2003 01:10 - #

  5. ASP has similar functionality through the Flush method of the Response object. By default, latter versions of ASP buffer the output, but the Flush method can be used to control how data is sent to the client. These functions are really useful when doing intensive database queries, as they assure the visitor that something is happening as the page slowly loads.

    Gez Lemon - 24th October 2003 06:19 - #

  6. That is cute, but for complex applications I've always found it a much better idea to pass around strings of XHTML markup and then output the entire lot to the browser in one go. This makes it much easier to do things like displaying trees constructed from databases. My current application couldn't work any other way - it's dynamically constructing intuitive layouts for forms to book children onto holiday courses: the form layout algorithm is so complex that it's just not practical to use any method but having objects that return multiple strings of markup which parent objects use to assemble the layout. And, of course, in this case you can't flush all the time.

    Rich - 24th October 2003 10:04 - #

  7. zxnczxczxc kzxmcopzxczx copzxc zpxoczxc zxc xclkzx c,zxc ,z xc.,z xc,.zxmcmvkcvmcmvodfkfofopkf fpdf sdfsdf, s lxcvp[sdf sdgksr gsfg sdiogsd sig sdfisd gpsodg sdopivsd fiosdf sdjofg sdig sdgjsd f sdfisd fsdufsdn f sdkfsdnsd fopsd gsd sdg

    Paul Baxter - 24th October 2003 15:01 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/10/23/progressivePageUpdates

A django site