Real-time Web Applications

At the end of this course you will have a concrete understanding of what real-time web applications are, which technologies are used to create these applications, and how to create them using HTML5 WebSockets.
Course info
Rating
(252)
Level
Intermediate
Updated
Jun 19, 2014
Duration
1h 0m
Table of contents
Description
Course info
Rating
(252)
Level
Intermediate
Updated
Jun 19, 2014
Duration
1h 0m
Description

A large number of technologies and practices have attempted to tackle real-time demands to constantly update the browser. The new HTML5 WebSocket protocol promises bi-directional communication between the server and the client through a single TCP connection that removes a great load of header information and reduces latency. At the end of this course, you will be fully aware of the technologies needed to build real-time web applications and why HTML5 WebSockets offer us the opportunity to create unique web apps and enhance browser capabilities we had never had the chance to lay our hands on before.

About the author
About the author

Bill is a Microsoft MVP, Google Developer Expert, a Senior Software Engineer at Software Competitiveness International, and the creator of Dotnetweekly. He has over 7 years of experience in building Web Applications and is excited to learn and teach technologies as they develop/mature in the ever-changing world of the web.

More from the author
Single Page Applications with Vue.js
Intermediate
3h 11m
Oct 10, 2017
Getting Started with Progressive Web Apps
Intermediate
2h 12m
Nov 30, 2016
Working with Polymer.js Elements
Intermediate
1h 42m
Aug 16, 2016
More courses by Bill Stavroulakis
Section Introduction Transcripts
Section Introduction Transcripts

HTML5 WebSockets – The Basics
Hi, this is Bill Stavroulakis from Pluralsight, and welcome to this module on HTML5 WebSockets - The Basics. In this module, we'll go over the technological evolution within the web that led to the creation of WebSockets, what differences do WebSockets have compared with other real-time techniques, and the basic methods, events, and usage of the WebSocket client object.

HTML5 WebSockets - The Demo
Hi, this is Bill Stavroulakis from Pluralsight, and welcome to this module on HTML5 WebSockets - The Demo. At this point, we will create together a more complicated app with the use of WebSockets. After opening the application on a browser, we can go over its features and see what the end result will look like. Thus, this is a Real-Time ToDo List. Once we have opening the page, we can see an empty ToDo list and the cursor placed on an input field with a placeholder, New ToDo Item. When a text has been entered and the Enter button on the keyboard has been pressed, we can see that we have just added a new item on the list. We can then check the item as completed, uncheck it, or delete it. In addition, we notice that the URL of the page changed, and an ID was added at the end. This ID indicates the sessions of the current ToDo list. If we open the page on another browser, we can see a new session created with another ID. Now we can copy/paste a page with the same ID on another tab. These two tabs share the same ID, and once we delete, add, check, or uncheck an item, we can see changes reflected on the other page as well. Finally, we have added a feature where you can upload an image note. Once this happens, the image is added as a ToDo List item and is shared between the tabs with similar IDs.