Building the Realtime User Experience

It Was All a Setup!

These examples used a simple Ajax-like implementation to constantly ping the server for new updates. In this case, it used the best tool for the job to provide constant updates from various places around the Web. However, watching this example come together, you’ve probably noticed a couple of things.

The first problem with this approach is that although content may be updated quickly, it would be a stretch to call this a “realtime” user experience. All we’re doing here is checking for new updates, displaying the updates, waiting for a while, and then repeating the process all over again. What happens when an update is ready on the server while our script it just waiting in the timeout loop? No matter how fast we speed up that timeout, there is still going to be a delay. Figure 3-4 shows the messages queuing up while our code waits in the timeout loop.

Figure 3-4. Not realtime: new messages queue up on the server instead of arriving at the client

Another problem with this approach is that it just cannot scale. In order to get more feeds on the page, we added more HTTP requests. In order to get updates faster, we would need to add more HTTP requests. The script now runs three HTTP requests per user per timeout, and adding a second user would double that. Every user who connects would increase amount of HTTP requests needed on the server side by three. It gets more ...