Distributed Events and the Browser-Server Dialogue

The refactoring above wouldn't be very useful if we stopped with an event mechanism. Good for your work experience perhaps, but we haven't yet added any functionality to justify the effort; it's basically the same application as before. Not to worry Watchlist Wiki Demo (http://ajaxify.com/run/wiki/events/watchlist) to the rescue! A new watchlist monitors interesting messages, so that when a message you're watching is updated (by you or someone else), the watchlist will add a summary line.

To start with, the HTML now includes a watchlist table:

  <div id="summary">
    <table id="watchlist">
      <tr>
        <th>Author</th>       
        <th>Message</th>
      </tr>
      <tbody id="watchlistBody"> </tbody>
    </table>
  </div>

Which messages are in your watchlist? That's determined by a new checkbox control, one per message:

  onNewMessage: function(message) {
    ...
    var watching = document.createElement("input");
    watching.type = "checkbox";    
    watching.messageId = message.id;    
    watching.onclick = onWatchingToggled;     ...
  }

When the user wants to watch a message, she selects its checkbox. A single function updates the watchlist for all chosen messages. Remember that message update events are fine-grained, so we need to ensure this callback is registered to receive notifications for all the chosen messages and nothing else. So when a user deselects a message, we'll unregister the function as a listener on that message. Note that this functionality necessitated the creation of an function to unregister listeners, which was never required in the previous version.

  function onWatchingToggled(event) {
    event = event || window.event;
    var checkbox = event.target || event.srcElement;
    if (checkbox.checked) {
      messageModel.addMessageUpdateListener(checkbox.messageId,
        onWatchedMessageUpdate);
    } else {
      messageModel.removeMessageUpdateListener(
        checkbox.messageId,onWatchedMessageUpdate);
    }
  }

onWatchedMessageUpdate will now receive notification of any new messages that are being watched. It simply adds a summary row to the table and runs a visual effect:

  function onWatchedMessageUpdate(message) {

    var summary = message.content;
    if (summary.length > 35) {
      summary =   summary.substring(0, 15) + "..."
                + summary.substring(summary.length - 15);
    }

    var row = document.createElement("tr");

    var authorCol = document.createElement("td");
    authorCol.className = "authorSummary";
    authorCol.innerHTML = message.author;     
    row.appendChild(authorCol);

    var contentCol = document.createElement("td");
    contentCol.className = "contentSummary";

    contentCol.innerHTML = summary;    
    row.appendChild(contentCol);

    if ($("watchlistBody").childNodes.length > 0) {
      $("watchlistBody").insertBefore(row, $("watchlistBody").childNodes[0]);
    } else {      
      $("watchlistBody").appendChild(row);     }
    Effect.Appear(row);

  }

We now have two independent functions that receive notifications of new messages arriv ing from the server. Each can use the information however it pleases. This is a much more scalable approach than having the server message recipient dictate how the browser should respond.

Related Patterns

Periodic Refresh, HTTP Streaming

For server-to-browser propagation, Periodic Refresh (see earlier) or HTTP Streaming (Chapter 6) is required.

RESTful Service

Distributed Events usually involve a browser element observing a server-side entity. REST is ideal for this purpose as it provides a simple, standard way to exposes server state.

XML Data Island

If the server responds with XML and you need to retain state locally--e.g., to track differences--an XML Data Island (Chapter 11) would be useful. Under some technologies illustrated in that pattern, XML Data Islands allow for automated updates--when the data island changes, then a control is updated, and vice versa.

Metaphor

The old newspaper analogy still works. People can subscribe to any number of newspapers, and each newspaper can have any number of subscribers. The algorithm does not explicitly mention any particular subscriber; rather, when a newspaper comes out, it simply loops through each subscriber and sends a copy to each of them.

Please check back next week for the conclusion of this article.