When the user visits our web application's homepage, the index.ejs template is rendered to screen. This template is actually just a simple HTML document that links to a client-side JavaScript file called notes.js.

If we take a look at the EJS template, we can see exactly where the JavaScript file is loaded:

<script src="notes.js"></script>

You maybe wondering where this file comes from. Actually, this JavaScript file is the one we saved into the public folder of our web application. This script is executed from the user's browser as soon as the HTML page has finished loading.

This script is responsible of doing a few things:

As soon as the HTML page has been fully loaded, we want to initialize Socket.io and connect to our Node.js server. The following lines do exactly this:

$(window).load(function () {
    client = io.connect('http://YOUR_IP_ADDRESS:8000');
});

This code uses the jQuery load event to be notified as soon as the entire HTML page has finished loading. When this happens, we initialize Socket.io by calling the connect() function. This function creates a new WebSocket connection to the server; however, we need to tell Socket.io that we want to listen for updates.

In the previous section, we defined two types of messages: updates—messages that contain the new position of an existing note that has been dragged around, and notes, which inform us that a note has been created or deleted. So, we want to subscribe to both these types of messages. The code looks like this:

client.on('updates', function(message) {
    // move note to new position
});
client.on('notes', function(message) {
    if (message.status == 'new') {
        // create new note
    } else {
        // delete note
    }
});

As you can see, we call the on() function for Socket.IO to specify the type of message we want to listen for passing a callback function that gets called when Socket.IO receives a message from the server. That's it! It's incredible how this simple code lets us receive messages sent directly to us by the server, allowing us to react to these messages by updating the graphics as necessary.

The next piece of code we'll look at is the view; this is the complete code that connects to the server and listens for events:

$(window).load(function () {
    client = io.connect('http://YOUR_IP_ADDRESS:8000');
    client.on('updates', function(message) {
         // move note to new position
    });
    client.on('notes', function(message) {
        if (message.status == 'new') {
             // create new note
        } else {
            // delete note
        }
    });
});