Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Take the Quiz
Do you understand WebSockets? Take our quiz and find out: Do You Understand WebSockets?

Next lesson playing in 5 seconds


Free Preview: Connect the Web With WebSockets


  • Overview
  • Transcript

WebSockets make it possible to have interactive, two-way communication sessions between the user's browser and a server. With this API, you can receive event-driven messages without having to poll the server for updates. This makes WebSockets a powerful and efficient tool for building interactive websites.

Libraries such as Socket.IO make it easy to integrate WebSockets into the front-end and back-end of a site. In this course, Tuts+ instructor Daniel Stern will show you how to build a real-time link-sharing application that uses Express and Socket.IO.

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introducing WebSockets and Socket.IO

1.1 Introduction

Hello, I'm Daniel Stern and I'd like to introduce you to my brand new course, Connection the Web with WebSockets. WebSockets are a powerful addition to the internet specification that has only become available just recently. WebSockets provide a very fast and performant way to communicate not just with users of your applications but for applications to communicate with themselves, via the front-end and the back-end. WebSockets make it possible to have interactive two-way communication sessions between the user's browser and a server. Using WebSockets, you can receive event-driven messages without having to pull the server for updates. This makes WebSockets a powerful and efficient tool for building interactive websites. Libraries, such as socket.io, make it easy to integrate WebSockets into the front-end and back-end of your website. In this course myself, Daniel Stern will show you how to do so. By building an application that shares data in real time between the front-end and the back-end, using express and socket.io. Now, we're gonna be discussing all those topics I just mentioned in this series of videos. This series of videos though is mostly hands-on. That means the only time you're going to see slides are now at the beginning and then at the end. Throughout this series of videos we'll be doing a live coding demonstration.

1.2 What Are WebSockets?

We must ask ourselves, what are WebSockets? Well, whenever you use any internet thing, even if it's not a WebSocket, if you just visit a browser, you're basically making a connection between two computers. Your computer must connect to the server, say Facebook Server. Even if just for a minute to exchange the data that your computer wants. WebSockets are a way of doing this kind of connection I just described, but in a persistent manner. WebSockets share data quickly. Now, with the internet, if I want to share my data with you and you're a computer and I'm a computer, I would first have to send you a request saying hello, and then you reply in computer language, hello. And I'd reply, I'd like to send you a file. And you'd might reply, what kind of file that is and then I'd reply, and maybe after four or five little chatters, I'd send the file. But then maybe you'd say, that's great. Okay, send over another. And if we don't have a protocol in place, we have to repeat the same chatter. I have to tell you, what kind of file it is, who I am, etc., etc. Which if we're dealing with thousands of files, is very slow. WebSockets to the rescue. With WebSockets, you only need to create the connection once. That's why it's called a persistent connection. Once you connect to a WebSocket, you can send data both ways quickly and efficiently. Not only is this a fast and performant way to build our websites, but it's very easy to understand and reason about when writing the code. So do take note that WebSockets are not for every website. If you're building a simple website with, say, just a list of your favorite animals, then you don't really need WebSockets. WebSockets are mostly for interactivity. So in conclusion, if you have a websites where you need to exchange lots of data between the browser and the server, let's say a chat messaging app for example, then you're gonna want a seriously look into WebSockets. So before we begin, we need to have an intelligent discussion about WebSocket support. Why? Because if you're, say, the lead developer of some major company and you decide to implement WebSockets, well, it's your responsibility to know if this technology is actually going to work. Many technologies on the internet don't work on all devices. As an obvious example, Flash, which isn't a real internet technology, doesn't work on iPhone devices or most devices that aren't computers. So in the same way you might choose to do your application Flash or an HTML5 based on your audience. You need to make the same decision about WebSockets. Here on this page we can see the can I use graph for WebSockets. Can I use a website which automatically tests various libraries against a number of different browsers? If the tests pass then the field looks green and you can use it if you're supporting that browser. So we can see that WebSocket Support has three weak points, IE8 and 9, Opera Mini, and a couple of versions of Android browser. So if you're building a project and you must support old version of Internet Explorer, then WebSockets probably aren't for you. Now keep in mind that most libraries provide a shim over WebSockets. So they'll give you an API to use, but if WebSockets aren't available, they'll fall back to a different way of synchronizing data. Remember the example earlier about the long conversation where every time I have to tell you who I am and what I want? Well, that's a thing called Ajax, and you use it all the time in the websites you visit. In fact, you probably use it a lot more than you should, because most of that could probably be done with WebSockets. However, Ajax works, so for a lot of websites it's totally fine. At the end of this series of videos, though, you are going to be totally prepared to use WebSockets or Ajax, whichever one suits you best. So, I hope you'll stick with us for this exciting course and in the next video we'll get started by implementing the scaffolding for application.