Book Image

Getting Started with HTML5 WebSocket Programming

By : Vangos Pterneas
Book Image

Getting Started with HTML5 WebSocket Programming

By: Vangos Pterneas

Overview of this book

<p>WebSockets are capable of bi-directional, full-duplex communication over a persistent TCP connection They provide many benefits compared to the alternatives (for example, long-polling or Comet), such as lower overhead, persistent connections, and low latency. In short, it is the most technically challenging HTML5 feature to implement, but for truly interactive websites, it's a technology worth learning.</p> <p>Getting Started with HTML5 WebSocket Programming gives you the true power of bi-directional communication, implemented by using the brand new HTML5 WebSocket API. You’ll learn how to configure the server and clients, how to transmit different types of data and how to secure the whole system.</p> <p>This book will introduce you to the WebSocket world. We start by introducing the WebSocket API, and continue with practical, real-world examples until we can determine how to build multi-functional web apps for any type of device.</p> <p>You will learn how to configure a web client and a web server that will help you send messages to others using easy-to-use mechanisms. We will also find out how different data types, such as images and videos, can be transferred with little effort. We present additional fallback techniques and solutions for older browsers too. Finally, we will secure our clients from malicious attacks and other threats.</p>
Table of Contents (15 chapters)

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 technologies 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. Popular 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 elements 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...