High Performance Angular Grid with Web Sockets


Read full article on the Infragistics blog

You may have come across the requirement to push data in real time to an Angular Grid. To push data to the browser, you need a technology called WebSocket. You can implement that using NodeJS or ASP.NET SignalR. For the purpose of this article, we will use Web Sockets with NodeJS.

In the first half of this article, we will create an API which will use Web Sockets to push data to the client, and, in second half of the article, we will create an Angular application to consume that. In the Angular application, we will use Ignite UI for Angular Grid.  However, you can also use a simple HTML table to consume data in real time from web socket. In this article, we will learn to consume data in real time from NodeJS Web Socket in a HTML table as well as Ignite UI Angular Data Grid. We will witness difference in performance in these two approaches.

You can learn more about Ignite UI for Angular: here


Let us start with creating NodeJS API. Create a blank folder and add a file called package.json. In package.json, add dependencies of

  • Core-js
  • Express
  • io

More or less your package.json file should look like below:

"name": "demo1",
"version": "1.0.0",
"description": "nodejs web socket demo",
"main": "server.js",
"dependencies": {
"core-js": "^2.4.1",
"express": "^4.16.2",
"socket.io": "^2.0.4"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"author": "Dhananjay Kumar",
"license": "ISC"

view raw


hosted with ❤ by GitHub

You can pull data from any type of database such as relational data base, No SQL database, etc. However, for purpose of this post, I am going to keep it simple and have hardcoded data in the data.js file. This file will export a JSON array, which we will push using web socket and timer.

Add a file in folder called data.js and add the following code in it.


module.exports= {
data : TradeBlotterCDS()
function TradeBlotterCDS(){
return [
"TradeId": "1",
"TradeDate": "11/02/2016",
"BuySell": "Sell",
"Notional": "50000000",
"Coupon": "500",
"Currency": "EUR",
"ReferenceEntity": "Linde Aktiengesellschaft",
"Ticker": "LINDE",
"ShortName": "Linde AG",
"Counterparty": "MUFJ",
"MaturityDate": "20/03/2023",
"EffectiveDate": "12/02/2016",
"Tenor": "7",
"RedEntityCode": "DI537C",
"EntityCusip": "D50348",
"EntityType": "Corp",
"Jurisdiction": "Germany",
"Sector": "Basic Materials",
"Trader": "Yael Rich",
"Status": "Pending"
// … other rows of data

view raw


hosted with ❤ by GitHub

You can find data with 1200 rows here.


From data.js file, we are returning TradeBlotter data. Now in your project folder, you should have two files: package.json and data.js

At this point in time, run the command, npm install, to install all dependencies mentioned in package.json file. After running command, you will have the node_modules folder in your project folder.  Also, add server.js file in the project.  After all these steps, your project structure should have following files and folders.

  • data dot js
  • server dot js
  • Node_modules folder

In server.js, we will start with first importing required modules,

const express = require('express'),
app = express(),
server = require('http').createServer(app);
io = require('socket.io')(server);
let timerId = null,
sockets = new Set();
var tradedata = require('./data');

view raw


hosted with ❤ by GitHub

Once required modules are imported, add route-using express as below:

app.use(express.static(__dirname + ‘/dist’));

On connecting the socket, we are performing following tasks:

  1. Fetching data
  2. Starting timer(We will talk about this function later in the post)
  3. On disconnect event deleting the socket

io.on('connection', socket => {
console.log(`Socket ${socket.id} added`);
localdata = tradedata.data;
if (!timerId) {
socket.on('clientdata', data => {
socket.on('disconnect', () => {
console.log(`Deleting socket: ${socket.id}`);
console.log(`Remaining sockets: ${sockets.size}`);

view raw


hosted with ❤ by GitHub

Next we have to implement, startTimer() function. In this function, we are using JavaScript setInterval() function and emitting data in each 10 millisecond time frame.

function startTimer() {
timerId = setInterval(() => {
if (!sockets.size) {
timerId = null;
console.log(`Timer stopped`);
for (const s of sockets) {
s.emit('data', { data: localdata });
}, 10);

view raw


hosted with ❤ by GitHub

We are calling a function updateData() which will update data. In this function, we are looping through local data and updating two properties, Coupon and Notional, with random number between ranges.

Read full article on the Infragistics blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com