Now, the connection event also exists in the client. This means that in the client, we can do something when we successfully connect to the server. It may not happen right away; it may take a little time. Over inside Atom, we can add this event inside index.html, right below our call to io. As shown, we'll call socket.on:

var socket = io();

socket.on

We want to listen for an event, and this event is a little different to the one we have in our server.js file. It's not on('connection'), but on('connect'):

var socket = io();

socket.on('connect');

The on method here is exactly the same as the one we used in server.js. The first argument is the event name and the second argument is the callback function. In this case, we don't get access to a socket argument, since we already have it as a socket variable.

In this case, all I'll do is use console.log to print a little message to the console, Connected to server:

socket.on('connect', () => {
  console.log('Connected to server');
});

Now that we have this in place, we can go into the browser and go to a new tab in Developer tools. We'll load the Console tab. The Console tab is kind of like the Terminal inside Node. If we use console.log in our client-side JavaScript code, those messages are going to show up there. As you can see in the preceding screenshot, we also have some errors. These errors occurred when our server was down as I was showing you how it reconnects; but if we refresh the page, as you're going to see, Connected to server shows up, as shown here:

As soon as the connection happens, the client and the server both have that event fired. The client prints Connected to server and the server prints New user connected.

With this in place, we've now used the event system in Socket.io. We haven't set our own custom events, but we have taken advantage of some built-in ones.