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. A visitor can assign himself a nickname 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. The example code’s web server fires up a
chat server, so we can test our code with that.The Chat Interface
We’re looking to build a very simple chat interface that looks like Figure 34,
Our chat interface, on page 219, 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.html5_websockets/index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>My ChatServer</title>
<linkrel="stylesheet"href="stylesheets/style.css">
</head>
<body>
<divid="chat_wrapper">
<h2>AwesomeCoHelp!</h2>
<formid="nick_form"action="#"method="post">
<p>
<label>Nickname
<inputid="nickname"type="text"value="GuestUser"/>
</label>
<inputtype="submit"value="Change">
</p>
</form>
<divid="chat">connecting....</div>
<formid="chat_form"action="#"method="post">
<p>
<label>Message
<inputid="message"type="text"/>
</label>
<inputtype="submit"value="Send">
</p>
</form>
</div>
</body>
</html>Chapter 10. Creating Interactive Web Applications • 220
Download from Wow! eBook <www.wowebook.com> report erratum • discuss