HTML and CSS Reference
In-Depth Information
Chapter 2. The WebSocket API
If you are familiar with HTML and JavaScript, you already know enough stuff to
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
client API.
HTML5 basics
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.
Markup
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
web document.
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:
<!DOCTYPE html>
<head>
<title>HTML5 WebSockets</title>
</head>
<body>
<h1> HTML5 WebSocket chat. </h1>
<input type="text" id="text-view" />
<input type="button" id="send-button"
Search WWH ::




Custom Search