Our application is currently static. It loads data once and then it doesn’t change. By installing Socket.io, we can provide real-time functionalities.
- View Offline
- Welcome back. Hopefully you've been playing around with Marker seeing what else you can write tests for, since we covered that in the last video. In this section, we'll learn how to install Socket.io. It is java-script library from real time web applications, handling data in real time for our application, scoping data to individual users. We'll build a basic chat system for our users, adding onto the chat system and making it a public chat room.
In this video we're going to be installing Socket.io. Socket.io is a real time communication library. It contains server-side and client-side components and we can use it to deliver information to our users in real time, when they connect to our application. Thanks to libraries such as Socket.io Node.js is fantastic for real-time communication. Adding a real-time aspect to any app can help impress your users. Socket.io acts as an abstraction layer on top of technologies, such as web-sockets and long-holing, the technologies used to provide real-time functionality to websites.
First, we need to install Socket dot IO from npm. As always we just type npm intsall Socket.io. Once we have Socket.io installed we need to hook it up to our HTTP server. We do this so that we have access to the Socket.io assets that we need on the client-side. So, let's edit bin/www.
This is our entry point to our application. We jump to where we create our HTTP server and move that to the top of our file. The reason we need to do this is because we need the server when we require Socket.io as its pass as a parameter to the require statement. As well as configuring Socket.io well add a handler that triggers each time a user connects so that we can make sure things are working as expected.
Here, we just console logged that a user has connected. Next, we need to configure our client-side code to include the Socket.io library. So let's edit layouts.html Now this confused me for a long time, but you can just require the Socket.io path without copying it anywhere. Our HTTP server will intercept the request and serve up the relevant java-script. So let's add that to the bottom on our HTML body.
Now that we've added our code we can test that it works. So, let's start our application and visit it in web browser. If we flip back to our application console we see that "A user has connected!" message appears. This means that Socket.io was configured correctly. That's all we needed to do get Socket.io installed. As it's such a popular library the installation instructions have been tested over and over to make it as easy as possible for people to get it up and running.
Our application doesn't do much for now, but in the next video we'll take a look at how to send data back and forth between the client and our app. If you prefer, there are other options available such as Sock.js, Faye, and raw web sockets. However, I have only ever used Socket.io and have been very happy with it. So, I'll see you in the next video where we'll be sending and receiving data in real-time.
To start, author Michael Heap creates a new Express application, showing how to configure it and increase application visibility with logs. Explore Express along with various libraries that will help improve your development experience. Then take a look at technologies such as SSL and nginx, and work through deploying your application to production in a secure and scalable way. Michael also introduces some existing open-source Express projects and reviews how they are structured, to help you organize your own applications in a systematic way. By the end of the course, you'll be familiar with a wide range of new Express tools and libraries, all of which will help you deliver the best value to your customers.
- Consuming an API
- Showing results on a webpage
- Caching requests in memory
- Refactoring for testing
- Mocking to remove dependencies
- Spying with Sinon.JS
- Sending and receiving data in real time
- Mounting subapplications
- Serving content conditionally for AJAX
- Securing your app
- Improving performance
- Examining large-scale Express apps: Ghost.org and Balloons.IO