The EventEmitter is the class that implements listener support. Let's create a new module, models/notes-events.js, containing the following:

'use strict';

const EventEmitter = require('events');
class NotesEmitter extends EventEmitter {}
module.exports = new NotesEmitter();

module.exports.noteCreated = function(note) {
    module.exports.emit('notecreated', note);
};
module.exports.noteUpdate = function(note) {
    module.exports.emit('noteupdate', note);
};
module.exports.noteDestroy = function(data) {
    module.exports.emit('notedestroy', data);
};

This module maintains for us the listeners to notes-related events. Because we have multiple Notes models, it is useful to handle listener maintenance in a common module.

This module exports an EventEmitter object, meaning that the module exports two functions: .on and .emit. We then add additional methods to emit specific events related to the notes life cycle.

Let's now update models/notes-sequelize.js to use notes-events to emit events. Similar changes can be made in the other Notes models. Add the following code to it:

exports.events = require('./notes-events');

This technique adds the content of one module to the exports of another module. Not every export from a module needs to be implemented by that module. A Node.js module is simply an object, module.exports, that is returned by the require statement. The contents of that module object can come from a variety of sources. In this case, the events export will come from the notes-events module.

In the create function, add the following:

exports.create = function(key, title, body) {
    return exports.connectDB()
    .then(SQNote => { 
        return SQNote.create({
            notekey: key,
            title: title,
            body: body
        });
        })
    .then(newnote => {
        exports.events.noteCreated({
            key: newnote.key,
            title: newnote.title,
            body: newnote.body
        });
        return newnote;
    });
};

This is the pre-existing create function but with a second step to emit the notecreated event. We'll make similar changes throughout this module, adding an additional step to emit events.

Remember that the exports.events object came from require('./notes-events'). That object exported a set of functions, one of which is noteCreated. This is how we'll use that module.

In this case, we add a clause to the promise to emit an event for every note that is created. The Promise still returns the SQNote object that was created. We simply add this side effect of emitting an event.

Then, make a similar change for updating a note:

exports.update = function(key, title, body) {
    return exports.connectDB()
    .then(SQNote => { 
        return SQNote.find({ where: { notekey: key } })
    })
    .then(note => { 
        if (!note) {
            throw new Error("No note found for key " + key);
        } else {
            return note.updateAttributes({
                title: title,
                body: body
            });
        }
     })
    .then(newnote => {
        exports.events.noteUpdate({
            key,
            title: newnote.title,
            body: newnote.body
        });
        return newnote;
    });
};

Here, we send a notification that a note was edited.

Finally, the destroy method:

exports.destroy = function(key) {
    return exports.connectDB()
    .then(SQNote => {
        return SQNote.find({ where: { notekey: key } })
    })
    .then(note => note.destroy())
    .then(() => exports.events.noteDestroy({ key }));
};

This sends a notification that a note was destroyed.

We only changed the notes-sequelize.js module. The other notes models will require similar changes should you want to use one of them to store notes.

The changes in the Notes model are only the first step. Making the events visible to our users means the controller and view portions of the application must consume those events.

Let's start making changes to routes/index.js:

router.get('/', function(req, res, next) {
    getKeyTitlesList().then(notelist => {
        var user = req.user ? req.user : undefined;
        res.render('index', {
            title: 'Notes',
            notelist: notelist,
            user: user,
            breadcrumbs: [{ href: '/', text: 'Home' }]
        });
    })
    .catch(err => { error('home page '+ err); next(err); });
});

We need to reuse part of the code that had been in this router function. Let's now add this function:

module.exports = router;

var getKeyTitlesList = function() {
    return notes.keylist()
    .then(keylist => {
        var keyPromises = keylist.map(key => {
            return notes.read(key).then(note => {
                return { key: note.key, title: note.title };
            });
        });
        return Promise.all(keyPromises);
    });
};

This is the same as earlier, just in its own function. It generates an array of items containing the key and title for all existing notes:

module.exports.socketio = function(io) {
    var emitNoteTitles = () => {
        getKeyTitlesList().then(notelist => {
            io.of('/home').emit('notetitles', { notelist });
        });
    };
    notes.events.on('notecreated', emitNoteTitles);
    notes.events.on('noteupdate',  emitNoteTitles);
    notes.events.on('notedestroy', emitNoteTitles);
};

This is where app.js injects the io object into the home page routing module.

Now, we get to some actual Socket.IO code. Remember that this function is called from app.js, and it is given the io object we created there.

The code in this case is fairly straightforward. It listens to the events we just implemented, notecreated, noteupdate, and notedestroy. For each of these events, it emits an event, notetitles, containing the list of note keys and titles.

That's it!

As notes are created, updated, and destroyed, we ensure that the home page will be refreshed to match. The home page template, views/index.ejs, will require code to receive that event and rewrite the page to match.

<% include footer %>

<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function () {
  var socket = io('/home');
  socket.on('notetitles', function(data) {
    var notelist = data.notelist;
    $('#notetitles').empty();
    for (var i = 0; i < notelist.length; i++) {
      notedata = notelist[i];
      $('#notetitles')
      .append('<a class="btn btn-lg btn-block btn-default" href="/notes/view?key='+
                notedata.key +'">'+ notedata.title +'</a>');
    }
  });
});
</script>

$ cd chap09/users
$ npm start
> [email protected] start /Users/david/chap08/users
> DEBUG=users:* PORT=3333 SEQUELIZE_CONNECT=sequelize-sqlite.yaml node user-server

  users:server User-Auth-Service listening at http://127.0.0.1:3333 +0ms

$ cd chap09/notes
$ npm start
> [email protected] start /Users/david/chap09/notes
> SEQUELIZE_CONNECT=models/sequelize-sqlite.yaml NOTES_MODEL=models/notes-sequelize USERS_MODEL=models/users-rest USER_SERVICE_URL=http://localhost:3333 node ./app

  notes:server Listening on port 3000 +0ms

It's cool how we can now see real-time changes in a part of the Notes application. Let's turn to the /notes/view page to see what we can do. What comes to mind is this functionality:

For the first two features, we can rely on the existing events coming from the Notes model. The third feature will require a messaging subsystem, so we'll get to that later in this chapter.

In routes/notes.js, add this to the end of the module:

module.exports.socketio = function(io) {
    var nspView = io.of('/view');
    var forNoteViewClients = function(cb) {
        nspView.clients((err, clients) => {
            clients.forEach(id => {
                cb(nspView.connected[id]);
            });
        });
    };

    notes.events.on('noteupdate',  newnote => {
        forNoteViewClients(socket => {
           socket.emit('noteupdate', newnote);
        });
    });
    notes.events.on('notedestroy', data => {
        forNoteViewClients(socket => {
           socket.emit('notedestroy', data); 
        });
    });
};

Now is the time to uncomment that line of code in app.js because we've now implemented the function we said we'd get to later.

routes.socketio(io);
notes.socketio(io);

First, we will connect to the /view namespace. This means any browser viewing any note in the application will connect to this namespace. Every such browser will receive events about any note being changed, even those notes that are not being viewed. This means that the client code will have to check the key, and only take action if the event refers to the note being displayed.

What we're doing is listening to the noteupdate and notedestroy messages from the Notes model and sending them to the /view Socket.IO namespace. However, the code shown here doesn't use the method documented on the Socket.IO website.

We should be able to write the code as follows:

notes.events.on('noteupdate',  newnote => {
    io.of('/view').emit('noteupdate', newnote);
});

However, with this, there were difficulties initializing communications that meant reloading the page twice.

With this code, we dig into the data that each namespace uses to track the connected clients. We simply loop through those clients and invoke a callback function on each. In this case, the callback emits the message we need to be sent to the browser.

<div class="row"><div class="col-xs-12">
<h3 id="notetitle"><%= note ? note.title : "" %></h3>
<p id="notebody"><%= note ? note.body : "" %></p>
<p>Key: <span id="notekey"><%= notekey %></span></p>
</div></div>

<% if (notekey && user) { %>
    <div class="row">
    <div class="btn-group col-sm-12">
        <a class="btn btn-default" href="/notes/destroy?key=<%= notekey %>" role="button">Delete</a>
        <a class="btn btn-default" href="/notes/edit?key=<%= notekey %>" role="button">Edit</a>
    </div>
    </div>
<% } %>

<% include footer %>

<% if (notekey) { %>
<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function () {
    io('/view').on('noteupdate', function(note) {
        if (note.key === "<%= notekey %>") {
            $('h3#notetitle').empty();
            $('h3#notetitle').text(note.title);
            $('p#notebody').empty();
            $('p#notebody').text(note.body);
        }
    });
    io('/view').on('notedestroy', function(data) {
        if (data.key === "<%= notekey %>") {
            window.location.href = "/";
        }
    });
});
</script>
<% } %>

if (note.key === "<%= notekey %>") {
  ..
}