DEV Community

tnguyen303
tnguyen303

Posted on • Edited on

Journey to a Full Stack Developer - ep. 2

This week, we learned about how to make an application that talks in real time. The technology used here is called socket.io. It is widely used by Facebook, Instagram, Youtube, Google Docs. All these websites (or applications) have real time updates that pop up. This may seem as if it is built in but actually, there are some coding and a package that have to be installed in order to make it function this way.

Socket.io has to be run on your the server (back end). Socket.io does not interact directly to your database, such as Mongo or mySQL, it is rather a way to pass and render data to the front-end. As such all your ajax calls are still required.

To set up to use socket.io, in your js server file, make sure you have:

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/todolist-sockets")(io);

As you can see, all we added is 2 lines to set it up. In socket.io, we have two main commands:

  1. Emit - this is just a notice that tells the server there is new data, along with the new data
  2. On - this is basically an event listener that listens for the specific "Emit", then performs a script, it will often be to render the new data to the user.

Next week we will cover the code fully so you can implement it in your app. As always, please let me know any comments I will be glad to discuss with you.

Top comments (0)