Contents hide 1) WebSocket with socket.io 1.1) Project Stack 2) Socket Server 2.1) Installation 2.2) Initiate Socket Server 3) Socket Client 3.1) Installation 3.2) Receive Socket Data 4) Demo 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 bash mkdir socket-server cd socket-server npm init npm i express socket.io express --save Following is the created package.json 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. index.js 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. bash 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 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. src.app.app.component.ts 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 Get More tutorials on Angular 10 Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular 10, nodejs, Socket, WebSocket