Introduction to Socket.Io

Introduction
When building an application, we can have a real-time way that allow the client and the server to communicate. such as implementing a chat application between multiple users. To implement this messages, need to be sent constantly without the page refreshing. We can implement this type of client/server communication by using web sockets. The problem with web sockets is that not every browser is compatible and web sockets do not wok well with a firewall. So, for this reason we can use an alternative library called Socket.io. This library is built off web sockets but can be used with less restrictions.

What is socket.io
Socket.IO is a JavaScript library for real time web applications. This Library utilizes the Client/Server Architecture to allow communication between the client and server. It is great to add real-time communication to a website and is based on an event-driven system that listens for specific events to be triggered.

Server-side
First, we need to install Socket.Io. and then we will need some way to connect to the server, so we can also install express.
npm install socket.io
npm install express --save
or
npm install socket.io express --save

Once we have out dependencies installed, we will now create our server and establish a connection.
In the example below we start off require what we need to set up a basic http server. We give it a port of 8080 and a we set a variable called server. this variable is us setting up the node server instance which we will need require Socket.Io because it must have a server connection

const express = require("express");
const app = express ();
const port = 8080;
const server = require("http").createServer();
const io = require("socket.io")(server);

io.on("connection", (socket) => {
/*
the socket param is the bridge that connects the user to the server so where data will be transferred through
*/
    console.log("Connected");
    socket.emit("homepage", "Server is connected to homepage");
});

server.listen(port, () => {
    console.log("Server Is Running on Port: " + port);
});

the next thing we see is us establishing the connection between the http server and the socket. The first param takes is an event. and in this case the event is a "connection" meaning once something connects to it, then it will activate a callback function that will first log that its connected. The next thing we do is to set up a custom event on the server using socket.emit. In this example whenever the homepage event is connected, we will have it send a message to the user or client "Server is connected to the homepage".

Client-side
We have established a server and have a way for the server and client to communicate. Now we need to set up the client to complete the connection. The first thing to do is to install the Socket.IO client library.

npm install socket.io-client

Next, we need to require the library and establish a socket variable which we be the connection to the server. Remember we have that socket param in the callback function on the sever side, so we need to keep the name the same. this is where the bridge between the client and server is set up.
The socket variable will be set to the host and port that our server will be listening on so they must be the same. Let us look at the example below to visualize this:

const io = require("socket.io-client");
const socket = io("http://localhost:8080");

socket.on("homepage", (data) => {
  */
  when the homepage event is triggered then we have a callback that will be triggered
  */
   console.log('we received data from the server', data);
});

The data param will hold the data that the server sends to us through the emit we saw on the server side. which in this case will be the "Server is connected to homepage" message. In this instance the data was a string but socket.IO can send all different types of data such as: images, videos, audios and JSON etc.

Conclusion
We have set up a basic socket connection between the client and server that can eventually be used to implement some real time communication such as chat features and even other real time features of communication. With Socket.Io we do not have to worry about the connection being interrupted due to different browsers or firewalls such as if we were to use strictly web sockets.