loading...

Journey to a Full Stack Developer - ep. 3 - Setup Socket.io part 2

tnguyen303 profile image tnguyen303 Updated on ・1 min read

This week, we're going to pick up from last week post about how to integrate Socket.io package in your Node application. Socket.io is a package that allows pushing data to specific or all users who are interacting with the application, in real time, such as a chat application, a Facebook UI where you see real-time notifications.

Continuing from my last episode, we currently have the server file completely set up:

const express = require("express");
const app = express();
//http package lets you run server without Express, socket.io requires more control that is provided with this package
const server = require("http").createServer(app);
const io = require("socket.io")(server);

require("./sockets/message-sockets")(io);

This is our front-end javascript code that gets run by the html file, it contains a function that sends a chat message to our database via a POST route (the ajax call) AND additionally send that same message to our socket "listener" file that handles real-time data:

const sendMessage = function(event) {
  const message = $("#message").val();
  event.preventDefault();
    //prepare our data to be sent across your application
    const newMessage = {
      message: message,
      sender: sender,
      recipient: recipient
    };
    //send to server, calling new-message to reference in message-sockets.js
    $.ajax({
      url: `/api/chat/${sender}/${recipient}`,
      method: "POST",
      data: newMessage
    });
    //this is the magic sauce, socket.emit sends data to our server which then gets redirected by the message-sockets.js file to other people's browser. The tag is "new-message" and this must match the receiving socket.on in your message-sockets.js file.
    socket.emit("new-message", newMessage);
};

As you can tell, we are calling a "message-sockets" file to be used by the Socket.io package. This is a JavaScript file that will hold the server-side "handling" of the real-time data:

//this is message-sockets.js file in sockets subfolder
module.exports = function(io) {
  console.log("running");
  //this .on listener runs every time a user connects
  io.on("connection", function(socket) {
    //SOCKET ROUTES:

    // push to all sockets, can be used to notify users of a New Version Update is available
    socket.on("new-message-to-all", function(data) {
      io.emit('emit-message-to-all',data);
    });

    //push to specific (private) sockets, can be used to send private info such as messages to a user or group
    socket.on("new-message", function(data){
      const socket1 = users[data.sender];
      const socket2 = users[data.recipient];
      socket1.emit('emit-message', data);
      socket2.emit('emit-message', data);
    });

  });
};

After the server has redirected our new-message data, the front-end code must have a function to listen for this new data, now called "emit-message" and render it to the targeted users:

//this is my client-side javascript file that runs when my html runs
//display message on private sockets
socket.on("emit-message", function(data) {
  //this is a simple function to render a new message to the website
  renderMessageList(data);
});

It looks complicated and long but the whole code can be summarized as, In socket.io, we have three steps to send real-time data:

  1. Emit - this is just a notice that tells the server there is new data, along with the new data and a tag
  2. On (server-side) - this is basically an event listener that listens for the specific "Emit" tag, then performs an Emit back to the client-side to targeted "sockets" or users.
  3. On (client-side) - this, again, is just a listener for the redirected data, in step 2, and perform a function, usually a simple function that display this data to the client's browser.

Next week I'm going to share what I have learned in testing with you. Hopefully this has been an informative how-to and I will be glad to know I had helped someone in need!

Posted on by:

Discussion

pic
Editor guide