Real-time Features with WebSockets

In web application development, real-time features are becoming increasingly important for providing a dynamic user experience. Sails.js, a MVC framework for Node.js, provides an easy way to build custom, enterprise-grade Node.js applications with built-in support for WebSockets, which is a protocol providing full-duplex communication channels over a single TCP connection. This chapter will delve into the real-time features of Sails.js focusing on how WebSocket is employed for real-time communication.

WebSockets in Sails.js are facilitated by a feature known as sails.sockets. Simplistically, Sails.js gives you a real-time WebSocket server for free!

Let's assume we're creating a movie review app called "CinemaView". In CinemaView, we want to allow users to post their reviews and reactions in real-time.

To begin, we start with a basic setup of a Sails.js application. We won't go over the setup process in detail because it is straightforward and well-covered in the Sails.js documentation.

Let's consider a scenario where we want to notify our users when a new review for a particular movie they've seen is posted. We can achieve this by using WebSocket to broadcast the message to all the clients who are currently watching that movie.

Here's a block of code that shows how you can broadcast real-time messages in Sails.js:

sails.sockets.broadcast('room', 'new review', {review: review});

In this case, 'room' is a dynamic variable associated with a certain movie, ‘new review’ is the event being broadcasted, and {review: review} is the data being sent with the event.

To join a room, you can use the .join method as follows:

sails.sockets.join(req, 'room');

In the example above, req is the request object from the client that wants to join the room named 'room'. Each room can be considered as a separate channel for a particular movie.

When a user navigates to the page of a particular movie, they join a room dedicated to that movie, allowing them to receive and send real-time updates about it. The process of joining a room in our CinemaView application might look something like this:

show: function(req, res) {
  let movieId = req.params.id;

  Movie.findOne({id: movieId}, function(err, movie) {
    if(err) return res.serverError(err);
    if(!movie) return res.notFound(`Could not find movie, sorry.`);

    sails.sockets.join(req, `movie_${movieId}`);

    return res.json(movie);
  });
}

In this case, when a user navigates to a movie's page using a URL like '/movie/321', they are subscribing to the 'movie_321' room.

To broadcast a message to that movie's room when a new review is created, you can do as follows:

createReview: function(req, res) {
  let movieId = req.params.movieId;
  let reviewData = req.body;

  Review.create(reviewData, function(err, review) {
    if(err) return res.serverError(err);

    sails.sockets.broadcast(`movie_${movieId}`, 'new_review', { review: review });

    return res.json(review);
  });
}

Here, whenever a new review is created, all the users currently in the room for that specific movie receive the 'new_review' event and the data of the new review.

It's important to note that Sails.js built-in pub-sub methods like .publishCreate(), .publishUpdate(), and .publishDestroy() automatically use the WebSocket protocol if it's enabled. So anytime you create, update, or delete a model, Sails.js will automatically send out a message to any client subscribed to that instance of the model.

For example, if you were to create a new Review:

Review.create(req.body).exec((err, review) => {
  if (err) { return res.serverError(err); }

  Review.publishCreate({id: review.id, movieId: review.movieId});

  return res.ok();
});

When the server runs Review.publishCreate(), Sails.js will send a message to any client subscribed to the 'review' model instance in the database. The client-side code receiving the message might look something like:

io.socket.on('review', (msg) => {
  switch (msg.verb) {
    case 'created':
      console.log(`A new review was added to movie id ${msg.data.movieId}`);
      break;
    default:
      console.log('An unknown message was received from server.');
  }
});

In conclusion, Sails.js with WebSockets allows us to easily develop applications with real-time functionalities. By simply broadcasting messages, applying different rooms for different movies or users, and using Sails's built-in pub-sub methods, we can create upgrade our CinemaView application with dynamic features for a more enhanced user experience.