Socket.IO

Socket.io is a JavaScript library. It is a way to communicate between a client and a server. It allows real-time data flow. It is bi-directional communication, means we can flow data in both directions:

• Client to Server
• Server to Client

Socket.io has two parts: client-side and server-side. Both parts have an identical API.

• The server-side library runs in node.js.
• The client-side library runs in the browser.

Socket.IO is quite popular and companies like Trello, Yammer, Amazon, Zendesk, and several others use it to develop robust real-time applications. Socket.io is a very popular JavaScript framework on GitHub and is heavily dependent on the NPM plugin. It runs on every browser or platform and focuses equally on speed and reliability.

Why Socket.IO?

It is very easy to do bi-directional communication between browser and server. Whenever an incident occurs, the server automatically sends the message to the client. It does not require any tracking on the timestamp.

It is easy to create a chat server with more sockets.IO than the traditional PHP way. If you want to create a chat server, you have to write more lines of code in PHP.

Prerequisites of the socket.io

The user should have the basic knowledge of Node.JS, Javascript (JS), and HTML. If the user is unfamiliar with these languages, we would suggest them to go through these languages first. If the user has knowledge of the sublime text, the user can benefit from writing code.

Installation

The latest Socket.IO release is the npm version (3.1.1). Before installing a socket, you need to ensure whether Node.js and npm are installed in your system or not. If the node.js and npm are not installed in your system, you need to install them first.

Follow these steps to install socket.io:

Step 1: Open the terminal and create a directory that name is socketio

Step 2: Initialize the npm package manager in that directory.

Step 3: Type this command to install the socket and save it.

If the user installs a specific version of the socket.io, use this command.

Real-time applications of the Socket.io

1. Instant messengers: Instant messengers are those applications in which you do not need to refresh your application and website to receive new messages, such as WhatsApp, Facebook Messenger, etc.
2. Push Notifications: Push notifications are those applications in which you will be notified when anyone tags you in a picture and story on Instagram and Facebook.
3. Collaboration Applications: Collaboration applications are those applications that allow updates to the same document at the same time by different users, such as Google Docs.
4. Online Gaming: Online gaming applications are those applications that help to establish bi-direction communication between multiple users. Examples of real-time online games are Pubg, Call of Duty, Among Us, Fortnite, etc.

Features of Socket.IO

1. Reliability: It relies on Engine.IO, which establishes a long-running polling connection before attempting to upgrade to better "testing" transports, such as WebSocket.
2. Auto-reconnection support: The disconnected client keeps trying to reconnect until the server is available again.
3. Disconnection detection: The heartbeat mechanism of the socket.io is engine.io. It lets both the server and the client know when no one else is responding.
4. Binary support: Any serializable data structures can be emitted, including:
5. ArrayBuffer and Blob in the browser
6. ArrayBuffer and Buffer in Node.js
7. Multiplexing support: Socket.IO allows you to create multiple namespaces to separate concerns within your application, which will act as separate communication channels but share the same underlying connection.

Event Handling

Socket.io serves based on some events. The socket object can be used to access some reserved events on the server-side as well as the offline side.

These are the following server-side events:

• Join
• Message
• Reconnect
• Disconnect
• Leave
• Connect
• Ping

These are the following client-side events:

• Connect
• Connect_error
• Connect_timeout
• Reconnect

Example

In this example, we have used connection and disconnection events to log-in when a user has connected and disconnected.

After Four seconds when the client connects, the server will send the client an event called a message.

Now, we have to handle this event on behalf of our client, so modify the index.html script tag to include the following code:

When the server sends the message event to the client after 4 seconds, the client will handle it and produce the output. This output is shown in the screenshot below.