Building the Realtime User Experience

Chapter 6. Chat

One of the most compelling aspects of creating realtime web applications is the ability to create experiences that were previously available only on the desktop. The syndication example worked as a realtime experience from server to server, and the others have largely been from server to user. This chapter builds on those principles to create a realtime user-to-user experience. In this chapter, we’re going to exploit JavaScript and Tornado to build a fully interactive realtime chat application reminiscent of AOL Instant Messenger.

Before moving onto the code, it’s important to discuss what features a user expects to see when he logs into an instant messaging application. The obvious first expectation is that the application will deliver the messages instantly. Second, chat sessions happen between two specific users; this is not group chat. Finally, users of modern chat applications expect subtle realtime interactions, such as the ability to see that the user on the other end of the line is typing. This application will have those features while operating in a standard web browser.

Setting Up the Basic Code

The Basic HTML Frame

Building this application with Tornado means we can reuse the existing directory structure from our last application. We’ll store our templates in the existing templates folder and our static JavaScript files in the static directory. To get started, open your templates directory and create a file called chat-main.html. Add the following code to ...