Real-time Web Applications
Course info
Course info
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
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
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.