Programming the frontend

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:

  • Adding drag and drop capabilities to the notes
  • Initializing Socket.io
  • Listening for updates
  • Updating the graphics to reflect changes

    Note

    As the focus of this book is interacting with RethinkDB, we won't go over the code that adds drag-and-drop capabilities to the notes or the code that works with the graphics. Instead, we'll focus on how to use Socket.io to receive updates from RethinkDB. As usual, you can find the full script in the book's code.

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
        }
    });
});
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.161.251