Real-Time Notification With Socket.io, Angular 10 And NodeJS

In this tutorial, we will see how can we achieve Real-Time Notification With Socket.io, Angular 10, and NodeJS. With WebSocket, we are allowed for full-duplex communication between a server and clients.

WebSocket with socket.io

The WebSocket goes beyond the typical HTTP request/response paradigm. With WebSockets, the server and client can send data without initiating a request.
In this article, we will explain a simple example which is we can update notification to all live users on the web app like one too many in short where ever the web app is open we can send the notification without making a request from the client end.

Project Stack

For this example, we will be using backend as NodeJS, ExpressJS and Socket.io, and for the frontend (Client-Side) we will be using Angular 10 and Socket.io-client.

Socket Server

So let’s start with server-side code by initiating the npm package.json file and will install the required dependencies which are express and socket.

Installation

mkdir socket-server
cd socket-server
npm init
npm i express socket.io express --save

Following is the created package.json

{
  "name": "socketio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^2.3.0"
  }
}

Initiate Socket Server

Now will create the main entry file which is index.js and at the top, we will need our require statements for Express and Socket.IO.

const express = require('express');
const app = express();
const port = 3000;

// Send Notification API
app.post('/send-notification', (req, res) => {
    const notify = {data: req.body};
    socket.emit('notification', notify); // Updates Live Notification
    res.send(notify);
});

const server = app.listen(port, () => {
  console.log(`Server connection on  http://127.0.0.1:${port}`);  // Server Connnected
});
// Socket Layer over Http Server
const socket = require('socket.io')(server);
// On every Client Connection
socket.on('connection', socket => {
    console.log('Socket: client connected');
});

On top of the HTTP server, we have also created the WebSocket using socket.io library require('socket.io')(server) after that using socket’s on the method ( socket.on('connection', () => {}) ) which will be initiated on every new client connection which will be the angular client port in this case.
After That on Route call, we have used the emit method of the socket which will update the data to the client end without hitting request on the server.
for example, the admin wants to send a notification to all live users so the admin will hit the http://127.0.0.1:3000/send-notification which will emit the notification to the client ends.

what is socket.emit()?
socket.emit('notification', {}) will create a channel named with `notification` form which we can identify which channel to be used where on client end and the next parameter is the data over that channel.

Socket Client

As we have just created the socket server, now the next part will be the socket client in which we will receive the live updates.

Installation

So let’s create a new Angular project using CLI and will install the required package which is socket.io-client and @types/socket.io-client.

ng new socket-client --routing=false --style=CSS
cd socket-client
npm i socket.io-client @types/socket.io-client --save  ## This is an Angular wrapper over socket.io client libraries

Following is the created package.json

...
"dependencies": {
  "@angular/animations": "~10.1.0",
  "@angular/common": "~10.1.0",
  "@angular/compiler": "~10.1.0",
  "@angular/core": "~10.1.0",
  "@angular/forms": "~10.1.0",
  "@angular/platform-browser": "~10.1.0",
  "@angular/platform-browser-dynamic": "~10.1.0",
  "@angular/router": "~10.1.0",
  "@types/socket.io-client": "^1.4.34",
  "rxjs": "~6.6.0",
  "socket.io-client": "^2.3.1",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.2"
}
...

Receive Socket Data

After the installation, we can use the package which is socket.io-client into our component.

import * as io from 'socket.io-client';
...
export class AppComponent implements OnInit {
  private socket: any;
  public data: any;

  constructor() {
    // Connect Socket with server URL
    this.socket = io('http://127.0.0.1:3000');
  }
  public ngOnInit(): void {
    this.socket.on('notification', data => {
      this.data = data;
    });
  }
}

Inside the constructor, we have initiated the socket with the server URL so whenever the application starts it initiates the socket also before the ngOninit
And through the <b>notification</b> channel we can receive the live data on the client-side without making the request and manage in out component instance.

Demo