Question and Answers: Using Drupal and the Live Update module

Oh hello there, I didn't see you come in. I want to talk to you about getting started with the Live Update API module. Live Update is a module to give Drupal the ability to update a page when new content is available without requiring a page refresh.

We have done some Fun & Good Work over at PBS and my favorite part was the Live Chat system. We've also had the opportunity to contribute the backing API to Drupal as a module. There's been a bit of clamor to know How We Did It and that's what I want to cover today.

Let's create a Live Question & Answer system in Drupal!

We'll begin a base stack of:

• Drupal 6.x
• CCK (with Text fields)
• Views
• Live Update (currently it is a dev release and the best bet is checking out from CVS)

Now let's get started.

Setting up our Cotent Type & View

First create a new content type called "Question". We will add the following fields:

• A text area called Question (field_question_question)
• A text area called Answer (field_question_answer)

Now, let's set up a view to hold our questions. I called it 'chat_view'.

• Filter by node type of 'Question'
• Filter by content: Question IS NOT NULL 
• Add fields: Question and Answer
• Add Page view (path: /chat)
• Set Row style to Node View

The next step is to create a couple sample questions & visit your view. You should see a list of questions.

Time to Make the Donuts

We are using drupal, which means configuration has gotten us 80% of the way there and we have to do some real live development work to finish the race. Let's dig in.

First download and enable the Live Update API module if you haven't already. Create a custom module called 'live_update_chat' and enable that.

We have to tasks to complete to make this system function.

1. Telling Drupal to watch for new content.
2. Telling Drupal that new content is available.

Telling Drupal to watch for new content.

We want to tell Drupal that new content maybe available when we are at our chat view.

We will be doing this by using hook_init(). This isn't best practice as we will have to make a check every page load. A better way is to use the Drupal 6.x Preprocessing Awesomness and load live_update when the view is being loaded. However, since preprocessing views from modules is currently complicated we will be using hook_init() for this exercise.

To tell Drupal to watch for new content we use the function

$element (string) is a unique name to review to this instance of live_update.

$default_settings (array) is an array of settings to use by default it can be set per live_update, so we can leave this blank for now.

Our hook_init implementation should look like this.

Now if you visit our view (/chat) and you have Firebug installed, you can see in Console that Live Update looking for new content.

Telling Drupal new content is available

The last piece is to tell Drupal that we have new content available. We can use hook_nodeapi() to tell Live Update new content is available when a Question node with an Answer is saved.

This is done via a function

$element string should be same you initialized with live_update_initialize

$html string is the updated content, it needs to be fully rendered html. Since we set the view to use Node Views as the row, we can call node_view to generate the same html a page reload would for that row.

$settings array is an array of settings that tell live_update how to insert the content. If this is not specified per update_content

Time to drink the nectar of our practice.

In one window load our view (/chat) and in the other edit one of the questions displayed on the view, fill in an answer and Live Update will pick up the status change update the page.

You can extend this several ways:

• Include cck fields to keep track when a question is 'Asked' or 'Answered'
• Build an admin interface to control a chat
• Extend the Q&A module to more 'chatting functionality'

Alright! So that is just one way you can use the Live Update API to build some cool stuff, I hope this gets you started on the right track. The project page is located here (the API documentation is included along with some sample modules). See you in the issue tracker!