Chatting with Web Sockets
25 Chatting with Web Sockets
Real-time interaction has been something web developers have been trying to do for many years, but most of the implementations have involved using JavaScript to periodically hit the remote server to check for changes. HTTP is a stateless protocol, so a web browser makes a connection to a server, gets a response, and disconnects. Doing any kind of real-time work over a stateless protocol can be quite rough. The HTML5 specification introduced Web Sockets, which let the browser
make a stateful connection to a remote server. 7 We can use Web Sock- ets to build all kinds of great applications. One of the best ways to get
a feel for how Web Sockets work is to write a chat client, which, coinci- dentally, AwesomeCo wants for its support site.
AwesomeCo wants to create a simple web-based chat interface on its support site that will let members of the support staff communicate internally, because the support staff is located in different cities. We’ll use Web Sockets to implement the web interface for the chat server. Users can connect and send a message to the server. Every connected user will see the message. Our visitors can assign themselves a nick- name by sending a message such as “/nick brian,” mimicking the IRC chat protocol. We won’t be writing the actual server for this, because that has thankfully already been written by another developer. 8
The Chat Interface We’re looking to build a very simple chat interface that looks like Fig-
ure 10.2 , on the next page, with a form to change the user’s nickname,
a large area where the messages will appear, and, finally, a form to post
a message to the chat. In a new HTML5 page, we’ll add the markup for the chat interface,
which consists of two forms and a div that will contain the chat messages.
7. Web Sockets have been spun off into their own specification, which you can find at http://www.w3.org/TR/websockets/ .
8. Take a look at Section 25 , Servers, on page 213 for more about the servers.
C HATTING WITH W EB S OCKETS 208
Figure 10.2: Our chat interface
Download html5_websockets/public/index.html
<div id="chat_wrapper"> <h2> AwesomeCo Help! </h2> <form id="nick_form" action="#" method="post" accept-charset="utf-8">
<p> <label> Nickname <input id="nickname" type="text" value="GuestUser"/> </label> <input type="submit" value="Change">
</p> </form>
<div id="chat"> connecting.... </div> <form id="chat_form" action="#" method="post" accept-charset="utf-8">
<p> <label> Message <input id="message" type="text" /> </label> <input type="submit" value="Send">
</p> </form> </div>
C HATTING WITH W EB S OCKETS 209
We’ll also need to add links to a style sheet and a JavaScript file that will contain our code to communicate with our Web Sockets server.
Download html5_websockets/public/index.html
<script src='chat.js' type='text/javascript'></script> <link rel="stylesheet" href="style.css" media="screen">
Our style sheet contains these style definitions:
Download html5_websockets/public/style.css Line 1
#chat_wrapper{
width: 320px;
height: 440px;
background-color: #ddd; 5 padding: 10px;
#chat_wrapper h2{
width: 300px;
height: 300px;
overflow: auto; 15 background-color: #fff;
padding: 10px;
} On line 14, we set the overflow property on the chat message area so
that its height is fixed and any text that doesn’t fit should be hidden, viewable with scrollbars.
With our interface in place, we can get to work on the JavaScript that will make it talk with our chat server.