Programming Socket.io

Probably, the top feature in our web application is its ability to send updates directly from the server to the client in real time. To fully implement this feature, we need to call the model's listenForUpdates() function and push the resulting data to all connected clients.

At the start of this chapter, you learned about the Socket.io module, which allows you to send data to clients using WebSockets; so, we're going to use this module to push changes to our users' browsers. You may remember that we initialized the Socket.io module in the app.js file, so we're now going to edit the file; in particular, we're going to edit the server.listen() function:

server.listen(8000, function() {
    console.log"Server up and listening on port 8000");
    model.listenForUpdates(function(data) {
        if((data.new_val != null) && (data.old_val != null)) {
            // position update
            io.emit("updates", data.new_val);
        } else if((data.new_val != null) && (data.old_val == null)) {
            // new note
            data.new_val.status = "new";
            io.emit("notes", data.new_val);
        } else {
            // delete note
            io.emit("notes", data.old_val);
        }
    });
});

This code introduces a lot of new concepts, so let's go through it step by step.

It's important to understand exactly what kind of updates we're going to send to the clients that are connected. We can organize these updates into two categories:

  • Position updates: The database receives these updates when the user moves a note around, changing its position
  • Notes updates: The database receives these updates when the user adds or removes data from the database, such as creating a new note or deleting one

Now that we know this, we need to do two thing. First, we need to call the model's function that starts the Changefeeds, and second, we need to identify what kind of update we received based on the categories we just discussed.

By checking the old and new values of the document that is being updated in the database, we're able to distinguish between three different situations. The first condition evaluates to true if the user changes the position of an existing note; the second condition evaluates to true if the user creates a new note; finally, the last condition evaluates to true if the user deletes a note.

Once we know what kind of update we received, we can send a message to all connected clients using the Socket.io module. As an example, if a user creates a new note, we'll want to send the details of this note to all clients and we can do so like this:

io.emit("notes", data.new_val);

The emit() function sends a message to all clients via WebSockets. The first parameter is the type of update we're sending; in this case, "notes" means that we're creating a new note. The second parameter is the actual data that we received from the database.

That's it! This simple code implements our web application's real-time feature. Now that you've learned how to send messages from the server to the client, you need to understand how we receive and process these messages on the client side.

..................Content has been hidden....................

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