Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Auto-refreshing views for real-time information streams

Imagine you are creating an activity stream for your site. You'd like to use Views because it gives you all the power you need to query items and style them on the page - all in time for your 11am nap. However, the resulting page is static and users have to keep refreshing it manually to see updates. In 2011, that's just uncool.

That's why I created Views Auto-Refresh, a Views Hacks sub-module that implements an auto-refreshing mechanism that integrates right into Views 2 or 3. Here's how it works:

  • Define your view normally, and turn on Ajax.
  • In the view header, enter the following PHP code:
$interval = 15000; // 15000 msec = 15 sec
print theme('views_autorefresh', $interval);
  • Turn on the "Display even if view has no result" option for the header.

Now, automagically, your view will be refreshed every 15 seconds.

Advanced Usage

That's pretty cool, but your server ends up re-querying the same items every 15 seconds, for each user on that page, which is a bit scary. To alleviate the problem a bit, Views Auto-Refresh includes a more advanced mode for "incremental" refresh. The main idea is to create a secondary view, hopefully less heavy than the first one, that only returns new items since the last refresh. The module is responsible for merging those new items into the existing items on the page. Here's how that works in its simplest form:

  • Define a secondary view that is a clone of the original (e.g. another page display of the same view).
  • Give it a unique path, say my_view/autorefresh.
  • Add to this secondary view an argument of type Node: Post date (with operator) - or any other timestamp that makes sense in your case. These arguments are supplied by Views Auto-Refresh.
  • Change the header script above to:
$interval = 15000; // 15000 msec = 15 sec
print theme('views_autorefresh', $interval, array(
  'view_base_path' => 'my_view/autorefresh',
  'view_display_id' => 'page_2',
  'view_name' => 'my_view',
  'sourceSelector' => '.view-content',
  'targetSelector' => '.view-content',
  'firstClass' => 'views-row-first',
  'lastClass' => 'views-row-last',
  'oddClass' => 'views-row-odd',
  'evenClass' => 'views-row-even',
));

The additional settings are used to inform Views Auto-Refresh on which secondary view to hit (given its name, display and path), as well as how to merge the items from the source (the secondary view) into the target (the primary, on-screen view). The code will fetch all items inside the sourceSelector container and prepend them to the targetSelector. Then, it will fix up the odd/even, first/last and row number classes based on the settings.

Integration with other Views features

So far, this module has been successfully tested with exposed filters. Clicking on an exposed filter disables the auto-refresh to allow the user to complete the interaction without disruption.

Future work

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web