HTML and CSS Reference
Chapter 2. The WebSocket API
start developing HTML5 WebSockets right now. WebSocket communication and data
transmission is bidirectional, so we need two parties to establish it: a server and a
client. This chapter focuses on the HTML5 web client and introduces the WebSocket
Any HTML5 web client is a combination of structure, styling, and programming logic.
As we have already mentioned, the HTML5 framework provides discrete sets of tech-
nologies for each use. Although we assume that you are already slightly familiar with
these concepts, let's have a quick look at them.
The markup defines the structure of your web application. It is a set of XML tags that
lets you specify the hierarchy of the visual elements within an HTML document. Pop-
ular new HTML5 tags include the header , article , footer , aside , and nav tags.
The elements have a specific meaning and help distinguish the different parts of a
Here is a simple example of HTML5 markup code that generates the essential ele-
ments for our chatting app: a text field, two buttons, and a label. The text field is used
for typing our message, the first button will send the message, the second button will
terminate the chat, and the label will display the interactions coming from the server:
<h1> HTML5 WebSocket chat. </h1>
<input type="text" id="text-view" />
<input type="button" id="send-button"