Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Websocket Essentials: Building apps with HTML5 websockets
Websocket Essentials: Building apps with HTML5 websockets

Websocket Essentials: Building apps with HTML5 websockets: Build your own real-time web applications using HTML5 WebSockets

eBook
$17.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Websocket Essentials: Building apps with HTML5 websockets

Chapter 2. Getting Started with WebSockets

Client server communication is one of the most important parts of any web application. Data communication between the server and client has to be smooth and fast so that the user can have an excellent experience. If we look into the traditional methods of server communication, we will find that those methods were limited and were not really the best solutions. These methods have been used by people for a long period of time and made HTML the second choice for data communication.

Why WebSockets?

The answer to why we need WebSockets lies in the question—what are the problems with the other methods of communication? Some of the methods used for server communication are request/response, polling, and long-polling, which have been explained as follows:

  • Request/Response: This is a commonly used mechanisms in which the client requests the server and gets a response. This process is driven by some interaction like the click of a button on the webpage to refresh the whole page. When AJAX came into the picture, it made the webpages dynamic and helped in loading some part of the webpage without loading the whole page.
  • Polling: There are scenarios where we need the data to be reflected without user interaction, such as the score of a football match. In polling, the data is fetched after a period of time and it keeps hitting the server, regardless of whether the data has changed or not. This causes unnecessary calls to the server, opening a connection and then closing...

Importance of WebSockets

WebSockets comes into the picture to save us from the old heavy methods of server communication. WebSockets solved one of the biggest problems of server communication by providing a full-duplex two-way communication bridge. It provides both the server and client the ability to send data at any point of time, which was not provided by any of the old methods. This has not only improved performance but also reduced the latency of data. It creates a lightweight connection which we can keep open for a long time without sacrificing the performance. It also gives us full control to open and close the connection at any point of time.

WebSockets comes as a part of HTML5 standard, so we do not need to worry about adding some extra plugin to make it work. WebSockets API is fully supported and implemented by JavaScript. Almost all modern browsers now support WebSockets; this can be checked using the website http://caniuse.com/#feat=websockets which gives the following screenshot...

When to use?

WebSockets being a very powerful way of communication between the client and server, it is really useful for applications which need a lot of server interaction. As WebSockets gives us the benefit of real-time communication, applications that require real-time data transfer, like chatting applications, can leverage WebSockets. It is not only used for real-time communication but also for scenarios where we need only the server to push the data to the client.

The decision to use WebSockets can be made when we know the exact purpose of its usage. We should not use WebSockets when we just have to create a website with static pages and hardly any interaction. We should use WebSockets where the communication is higher in terms of data passing between the client and server.

There are many applications like stock applications where the data keeps updating in real time. Collaborative applications need real-time data sharing, such as a game of chess or a Ping-Pong game. WebSockets is majorly...

How it works?

WebSockets communicates using the TCP layer. The connection is established over HTTP and is basically a handshake mechanism between the client and server. After the handshake, the connection is upgraded to TCP. Let's see how it works through this flow diagram:

How it works?

The following steps will take you through the flow shown in the preceding diagram:

  1. The first step is the HTTP call that is initiated from the client side; the header of the HTTP call looks like this:
    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com
    
    • Here, Host is the name of the server that we are hitting.
    • Upgrade shows that it is an upgrade call for, in this case, WebSockets. Connection defines that it is an upgrade call.
    • Sec-Websocket-Key is a randomly generated key which is further used to authenticate the response. It is the authentication key of...

WebSocket API

WebSockets standard is defined by W3. The API interface for WebSockets looks like this:

enum BinaryType { "blob", "arraybuffer" };

[Constructor(DOMString url, optional (DOMString or DOMString[]) protocols), Exposed=Window,Worker]

interface WebSocket : EventTarget {

  readonly attribute DOMString url;

  // ready state

  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking

           attribute EventHandler onopen;
           attribute EventHandler onerror;
           attribute EventHandler onclose;
  readonly attribute DOMString extensions;
  readonly attribute DOMString protocol;

  void close([Clamp] optional unsigned short code, optional DOMString reason);

  // messaging
           attribute EventHandler onmessage;
           attribute BinaryType...

Why WebSockets?


The answer to why we need WebSockets lies in the question—what are the problems with the other methods of communication? Some of the methods used for server communication are request/response, polling, and long-polling, which have been explained as follows:

  • Request/Response: This is a commonly used mechanisms in which the client requests the server and gets a response. This process is driven by some interaction like the click of a button on the webpage to refresh the whole page. When AJAX came into the picture, it made the webpages dynamic and helped in loading some part of the webpage without loading the whole page.

  • Polling: There are scenarios where we need the data to be reflected without user interaction, such as the score of a football match. In polling, the data is fetched after a period of time and it keeps hitting the server, regardless of whether the data has changed or not. This causes unnecessary calls to the server, opening a connection and then closing it every...

Importance of WebSockets


WebSockets comes into the picture to save us from the old heavy methods of server communication. WebSockets solved one of the biggest problems of server communication by providing a full-duplex two-way communication bridge. It provides both the server and client the ability to send data at any point of time, which was not provided by any of the old methods. This has not only improved performance but also reduced the latency of data. It creates a lightweight connection which we can keep open for a long time without sacrificing the performance. It also gives us full control to open and close the connection at any point of time.

WebSockets comes as a part of HTML5 standard, so we do not need to worry about adding some extra plugin to make it work. WebSockets API is fully supported and implemented by JavaScript. Almost all modern browsers now support WebSockets; this can be checked using the website http://caniuse.com/#feat=websockets which gives the following screenshot...

When to use?


WebSockets being a very powerful way of communication between the client and server, it is really useful for applications which need a lot of server interaction. As WebSockets gives us the benefit of real-time communication, applications that require real-time data transfer, like chatting applications, can leverage WebSockets. It is not only used for real-time communication but also for scenarios where we need only the server to push the data to the client.

The decision to use WebSockets can be made when we know the exact purpose of its usage. We should not use WebSockets when we just have to create a website with static pages and hardly any interaction. We should use WebSockets where the communication is higher in terms of data passing between the client and server.

There are many applications like stock applications where the data keeps updating in real time. Collaborative applications need real-time data sharing, such as a game of chess or a Ping-Pong game. WebSockets is majorly...

How it works?


WebSockets communicates using the TCP layer. The connection is established over HTTP and is basically a handshake mechanism between the client and server. After the handshake, the connection is upgraded to TCP. Let's see how it works through this flow diagram:

The following steps will take you through the flow shown in the preceding diagram:

  1. The first step is the HTTP call that is initiated from the client side; the header of the HTTP call looks like this:

    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com
    
    • Here, Host is the name of the server that we are hitting.

    • Upgrade shows that it is an upgrade call for, in this case, WebSockets. Connection defines that it is an upgrade call.

    • Sec-Websocket-Key is a randomly generated key which is further used to authenticate the response. It is the authentication key of the...

Left arrow icon Right arrow icon

Description

This book is for web developers who want to learn and implement WebSocket to create interesting apps for modern browsers, leveraging the capabilities of HTML5 with WebSockets.

Who is this book for?

This book is for web developers who want to learn and implement WebSocket to create interesting apps for modern browsers, leveraging the capabilities of HTML5 with WebSockets.

What you will learn

  • Create a web app with the advanced features of the modern Web
  • Expand the level of application by using different frameworks and libraries
  • Improve HTML5 web application development with the help of uptodate tools
  • Structure your application and speed up development with modern tools
  • Develop a WebSocket server using Node.js
  • Discover all the basics of using WebSockets on mobile and tablet platforms
  • Transmit realtime data between users by building a drawing application in HTML5
  • Understand the importance of using framework AngularJS along with Bootstrap

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : May 06, 2015
Length: 110 pages
Edition : 1st
Language : English
ISBN-13 : 9781784395001
Languages :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : May 06, 2015
Length: 110 pages
Edition : 1st
Language : English
ISBN-13 : 9781784395001
Languages :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 125.97
Websocket Essentials: Building apps with HTML5 websockets
$32.99
Meteor Cookbook
$43.99
Node.js By Example
$48.99
Total $ 125.97 Stars icon

Table of Contents

7 Chapters
1. Introducing the World of Web App Chevron down icon Chevron up icon
2. Getting Started with WebSockets Chevron down icon Chevron up icon
3. Configuring the Server and Transferring Real-time Data Chevron down icon Chevron up icon
4. Using WebSockets in Real Scenario Chevron down icon Chevron up icon
5. WebSockets for Mobile and Tablet Chevron down icon Chevron up icon
6. Enhancing HTML5 Web Application Development Using Modern Tools Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.7
(3 Ratings)
5 star 66.7%
4 star 0%
3 star 0%
2 star 0%
1 star 33.3%
Sann Aug 12, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Information in this book are very useful to learn quickly how to create apps using WebSocket. It starts with few pages of theory, then you learn by concrete examples such as an instant messaging system or a collaborative slideshow. If you are looking for learning WebSocket by creating apps, it worth the read!
Amazon Verified review Amazon
Carles Jul 11, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is not a bible like book, with lots of pages and massive background and sometimes nonsense writing. It goes straight to the point which is a thing I personally value. But at the same time the book don't miss any important point about the matter. It covers thoroughly all the websockets stuff, giving the necessary background to understand the presented concepts with several examples for better understanding. My favourite chapter is number 4, when the reader is guided through a real case scenario covering a full implementation of a collaborative drawing app made with Angular.js and websockets technology. Maybe one of the most creative examples I've ever read on a technical book. Congrats to the authors for this chapter and the book. A real-time-web-apps-designer must have book.
Amazon Verified review Amazon
zak frisch Mar 03, 2016
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Yes, it gives information about WebSockets but not in a simplistic or easily understandable way. The author goes through concepts like he was just writing this to push it out to publication as quickly as possible.To me it uses too many outside scripts. What I mean by that is that you never really work with WebSockets alone to get a handle on it. The author first pairs you up with reveal.js, then a drawing library and then fabric.js. This is fine once you've grasped the basic concepts of something, but to throw in multiple libraries that you've never used and at one point even telling the reader "if you read the fabric.js library you will begin to learn how it works" - are you kidding? I don't give a damn about fabric.js, I bought this book to learn about WebSockets.On top of that, because the code listed in the book is in a really terrible format(it's light text, double-spaced to take up multiple pages when it doesn't need to) I tried to download the code from Packt publishing. When I downloaded the .zip file, I was dismayed to find that INSIDE the .zip file was a .7z file(7-zip) so I had to download 7-zip to unzip that, which I did, only to discover that inside the 7-Zip file were a bunch of text files categorized by chapter. Granted I can obviously save them as their correct .html and .js file types and format them using services like dirtymarkup.com - why in the world would Packt and the Author make the process so ridiculously tedious?In addition the Author of this book hits way too many concepts in passing in WAY too short of a time.Here's a list: "Code Editors", Sublime, BoilerPlates, Yeoman, "Packaging Tools", Bower, Grunt, Brunch, Angular, Ember, Backbone, ext, ExpressThose concepts got how much air time? MAYBE a small paragraph and a bullet point for each. They're not shown in practice, explained in any depth, or shown in any relation to WebSockets. Why the Author even bothered to bring them up blows my mind. The only thing I can think of is to increase the number of pages.I would not recommend this book. Why? This book is a waste of money. The files that come with it are horribly formatted, the information within is horribly formatted, and I feel like I could have gone to a website for free and gotten the same information in a much cleaner and well-organized way.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.