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

NodeJS API

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:

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.

data.js

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,

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

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.

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

Step by Step building Node.js based REST API to perform CRUD operations on MongoDB.

Download Source Code of this post from GitHub here

Node.js is one of the greatest platform to create backend of the application. Does not matter whether you are creating a mobile app for iOS or Single Page Web application using Angular, you will need a backend for the application. Usually you perform databases operations, authentications, authorizations, logging etc. in the backend. I am sure, you have heard about the term MEAN stack. If you have not, MEAN stands for MongoDB, Express JS, Angular, and Node.js.

image

In the MEAN stack, you create backend of the application using MongoDB, ExpressJS and NodeJS. In this article, you will learn to create a REST API to perform CRUD operations on MongoDB. You will use ExpressJS and NodeJS to create the REST API.

In this post, you are going to create a REST API to preform CRUD operations.

image

From the client, you will perform operations such as GET, POST, PUT, and DELETE to perform CRUD operations. Therefore, to create a record, you will perform HTTP POST operation and pass data to be inserted in the body of the HTTP request.

image

At the end of this post you will have a working API running which will perform CRUD operations.

Installation

To follow along this post, make sure you have following software installed on your machine.

To configure MongoDB , after installation make sure that you have in your primary drive where OS is installed(C drive in most of the cases on Windows) a folder called data\db. If you do not have create this folder. By default, MongoDB look for this folder to work with. Also, make sure to start MongoDB server by running Mongod.exe command as shown in the image below, to work with this post

image

After successful installation, create a blank folder in which you will create the project. Give whatever name you wish to give this folder. I am calling it as Project folder.

Step 1: Install dependencies

In the project folder, add a file with name package.json. We are going to use npm (Node Package Manager) to install all the dependencies. Node Package Manager (npm) reads package.json file to install the dependencies in the project. Add the below code in package.json.


{
    "name": "product-api",
    "main": "server.js",
    "dependencies": {
        "express": "~4.0.0",
        "body-parser": "~1.0.1",
        "cors": "2.8.1",
        "mongoose": "~3.6.13"
    }
}

In this, we are mentioning that, the project we are going to create will have following dependencies :

  • Express JS to create API routes.
  • Body parser to parse JSON data coming from the client.
  • CORS to enable the cross origin resource sharing support in your API.
  • Monogoose to work with MongoDB in NodeJS.

After updating package.json with above code, open the project in the command prompt and run the command npm install. I am assuming here that, you have already NodeJS installed on your system. If you haven’t installed it, click here and install.

Once you have successfully ran npm install command, you will find a node_modules folder which is created inside your project containing all the required dependencies to create REST API in NodeJS, performing CRUD operations on MongoDB.

Step 2: Create Model

When you work with RDBMS such as SQL Server or MySQL, you create model to perform CRUD operations on that particular table. MongoDB is a document-based database, and in this, you can insert, delete, update or read documents. MongoDB does not restrict you to create fixed model to perform database operations. However, to work with mongoose, you need a model. So, let us create a model of the document to perform CRUD operations.

In the project, add a file called product.js and create model with name Product as shown in the listing below :


var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var ProductSchema = new Schema({
    title: String,
    price: Number,
    instock: Boolean,
    photo: String,
});
module.exports = mongoose.model('Product', ProductSchema);

As you might have noticed, Product model contains four properties of different data types.

Step 3: Create Server

In this step, we will create server for REST API. For creating a server, add a file in the project called server.js. Go back and examine package.json file, you will find that the value of main is set as server.js. Therefore, node server will look for server.js to start the server. We are going to put all the starting codes in the file.

To start with, in server.js, add the following required statements at the top of the file.

var express = require('express');
var bodyParser = require('body-parser');
var cors = require('cors');
var app = express();
var mongoose = require('mongoose');
var product = require('./product');

After importing all the required modules, create route, assign port, and use body parser to parse incoming JSON data. To do these, after last require statement add the codes listed below in server.js file.


app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var port = process.env.PORT || 8090;
var router = express.Router();

In the above snippet, we are assigning port and creating the router. After this, at the end of the server.js file, add the code listed below :


app.use(cors());
app.use('/api', router);
app.listen(port);
console.log('REST API is runnning at ' + port);

In the above snippet, you are enabling CORS support, configuring port for the API, and also configuring that REST API would be created on baseurl/api/{routename}. At this point, you have configured server for various API settings and assigned port to work with that. Keeping everything together, at the end of this step, server.js file will look like below:

Server.js


var express = require('express');
var bodyParser = require('body-parser');
var cors = require('cors');
var app = express();
var mongoose = require('mongoose');
var product = require('./product');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var port = process.env.PORT || 8090;
var router = express.Router();

// all other code will go here 

app.use(cors());
app.use('/api', router);
app.listen(port);
console.log('REST API is runnning at ' + port);

Step 3: Connect to MongoDB server

In this step, you will connect application to MongoDB database server. To do this, just after router creation code (or at the place where there is a comment “all codes goes here”), add the code mentioned below:


mongoose.connect('mongodb://localhost:27017/products');

You are connecting to product database of MongoDB server. By default, MongoDB runs on the port 27017.

Note:

At this point, make sure that your MongoDB server is running on this port, otherwise you will get an exception when running the API. On Windows, to run the server- navigate to c:\program files\mongodb\server\3.4\bin on the command prompt and run the command mongod.exe. This command will start the MongoDB server. Here I am assuming that, you already have MongoDB installed. If you do not have, you can download and install MongoDB from here

Step 4: Creating the middle route

Let us start with writing a route, which will be called before any route. In this route, you can perform various operations such as :

  • Authentication
  • Authorization
  • Logging

In Express JS, you can very easily create this route by adding a “use route” as shown in the listing below:


router.use(function (req, res, next) {
    // do logging 
    // do authentication 
    console.log('Logging of request will be done here');
    next(); // make sure we go to the next routes and don't stop here
});

Make sure to add above code in server.js, just after the code you created in step 3.

Step 5: Creating Record

To create the record or insert a new document, you need to create a route for the POST operation. In REST API, convention is that, whenever client will perform the POST operation, a new record will be created. So, let us start with creating a route for the POST operation. To create that, just below the “use route” line of code, add the code mentioned below :


router.route('/products').post(function (req, res) {

   
});

The above route will be called, whenever client will perform HTTP POST operation on baseurl/api/products

Next, you need to write the code to insert data in the database. For that, you need to perform two operations :

  1. Create model object using the request body. If you remember, we have created a model in the step 2.
  2. Call the save function on model object to save the record in the database.

To do the above tasks, you need to modify POST route as shown below:


router.route('/products').post(function (req, res) {
    var p = new product();
    p.title = req.body.title;
    p.price = req.body.price;
    p.instock = req.body.instock;
    p.photo = req.body.photo;
    p.save(function (err) {
        if (err) {
            res.send(err);
        }
        res.send({ message: 'Product Created !' })
    })
});

Run and Test

To test the Create API, run the command

image

Now your API is running on the port 8090. To test the API, open POSTMAN and perform a POST operation on URL baseurl/api/products.

image

Beside the above configuration, in Headers, a content-type is added as application/json. When you click on send, if everything happens as expected, you will be getting the response from the API as shown in the image below:

image

You might be wondering, in which database product it has been created? In the previous steps, you connected to database “products”. So all the operations will be performed with Products database. Also in step 2, while creating a model, since we have not provided any collection name, record will be created in products (plural of model name product) collection.

Step 6: Fetching Records

To fetch records, you need to perform GET operation. To do so, add a get route to the API. A GET route could be added as shown in the listing below:


router.route('/products').get(function (req, res) {
    product.find(function (err, products) {
        if (err) {
            res.send(err);
        }
        res.send(products);
    });
});

In above listing, you are using mongoose ‘find function’ to fetch all the records from the MongoDB collection.

The above route will be called, whenever client will perform HTTP GET operation on baseurl/api/products. To test API, open POSTMAN and perform a GET operation on URL baseurl/api/products.

image

In Postman, you will find that, HTTP GET operation returns all the records. To return to a particular record on basis of ‘product_id’, add a new route to the API such that, whenever you perform GET operation with product_id as query parameter on the same URL, you will fetch a particular record.


router.route('/products/:product_id').get(function (req, res) {

    product.findById(req.params.product_id, function (err, prod) {
        if (err)
            res.send(err);
        res.json(prod);
    });
});

To fetch a particular product, you are using mongoose findById() function which takes product_id as input parameter. To read input parameter from HTTP GET operation, we are using req.params property.

The above route will be called, whenever client will perform HTTP GET operation on baseurl/api/products/{product_id}. To test API, open POSTMAN and perform a GET operation on URL baseurl/api/products/{product_id}.

 

image

You will find that a particular product has been returned with matching product_id.

Step 7: Updating Record

To update a record, you need to perform HTTP PUT operation. While performing PUT operation,

  • Pass product_id need to be updated as query parameter.
  • Pass product object need to be updated as request body.

To perform PUT operation, create a PUT route as shown in the listing below:


router.route('/products/:product_id').put(function (req, res) {

    product.findById(req.params.product_id, function (err, prod) {
        if (err) {
            res.send(err);
        }
        prod.title = req.body.title;
        prod.price = req.body.price;
        prod.instock = req.body.instock;
        prod.photo = req.body.photo;
        prod.save(function (err) {
            if (err)
                res.send(err);

            res.json({ message: 'Product updated!' });
        });

    });
});

So, what is going on in above code listing? These are the operations that need to be done to perform the updated operation.

  • Fetch product to be updated from the collection.
  • Update fetched product properties with the request body object properties.
  • Save the product to the collection using save method.

The above route will be called to update a particular product, whenever the client will perform HTTP PUT operation on baseurl/api/products/{product_id}. To test API, open POSTMAN and perform a PUT operation on URL baseurl/api/products/{product_id}. You need to pass product object to be updated in the body of the request as shown in the image below:

image

Step 8: Deleting Record

To delete a particular record, client needs to perform HTTP DELETE operation. To do this, create a route for delete operation.


router.route('/products/:product_id').delete(function (req, res) {

    product.remove({ _id: req.param.product_id }, function (err, prod) {
        if (err) {
            res.send(err);
        }
        res.json({ message: 'Successfully deleted' });
    })

});

Client will pass product_id to be deleted in the query parameter. Note : Product remove method is used to remove a product from the collection.

The above route will be called to delete a particular product, whenever client will perform HTTP DELETE operation on baseurl/api/products/{product_id}. To test API, open POSTMAN and perform a DELETE operation on URL baseurl/api/products/{product_id} as shown in the image below:

image

You just created a full working REST API to perform CRUD operations on MongoDB using NodeJS. In next post, we will use this API with Angular application to complete an application using MEAN stack. Thanks for reading.

Download Source Code of this post from GitHub here

How to use NodeJS, Express, and Bower to Create AngularJS apps

Read full article on the Infragistics blog

Recently I heard – “IDE makes you ignorant, so do not over rely on the IDE”. Being a .NET developer, we cannot think our lives beyond Visual Studio and hence somewhere we become ignorant. We really don’t care about the behind the scene complexities. We create a project by selecting a specific project template and mange different required packages using the NuGet package manager. Super simple? Isn’t it?

This article may help a .NET developer to use JavaScript at the server and at the client to create an application. NodeJS will run at the server and Angular to create application for the client.

image

Note: Image taken from the web. A special thanks to original image creator.

We will start with creating an angular application in the Visual Studio and then proceed to create the same angular application using few components of the MEAN stack. We will use NodeJS, Express, Bower to create the angular application.

We will cover the following topics,

  • AngularJS application in Visual Studio
  • Installing the NodeJS on Windows
  • Setting up the sublime text for JavaScript development
  • Installing Bower
  • Installing angular dependencies using the bower
  • Creating angular application
  • Installing Express
  • Creating web server using the express to serve the angular app

Read full article on the Infragistics blog

Understanding routing of expressJS in Node.JS

For further advanced reading you may want to prefer REST API using express .

I have started learning Node.JS and for web apps most popular ExpressJS framework. Well few call it big library as well. As learner does not matter whether big library or framework, let’s start exploring.

While exploring express realised that one of the most vital concept of express is Routing. In this post I will try to share my learning on express Routing with you. If you are starting with Express feel free to have a look on Setup Express and run first application in Node.js .

Let us assume that you have created first site using express. In root folder you will find App.js file. Go ahead and open App.js. In top you will find two modules express and http are imported along with other modules.

clip_image001

 

Express uses HTTP verbs to perform routings hence HTTP module is imported and of course to work with express framework express module is imported. Since express routes are based on HTTP verbs so method names are also matched. Refer following table for same.

clip_image003

You can create a route as below,

 

clip_image004

 

Above route will be accessed using HTTP GET on application being accessed on base address. As shown below you can see that plain text is sent in response object from express application.

clip_image005

In Express if you have two route paths with same address rather throwing error it will pick route path defined first in App.js

Assume you want to pass parameter while doing HTTP GET operation in above route then you have two choices. Either create two routes as shown below.

clip_image007

Second route will be accessed when a parameter will be passed while performing HTTP GET. So if you access application as below you will get served from second route path.

clip_image008

You may want to create only one route path making id as optional. Id can be make optional by putting it inside : id? This can be done as below,

clip_image010

Route path created above can handle both types of request either with parameter or without parameter. We are checking for the parameter and on basis of that different response being delivered. So bottom line is combination of 😕 makes parameter optional.

Express converts a route to regular expression internally. Input parameter can be parsed using req.params.id where is name of the parameter.

You can pass more than one parameters as shown below. We are making op as optional by placing it inside : ?

clip_image012

With second optional parameter application can be fetched as below. As you see we are passing id and op both while doing HTTP GET.

clip_image013

Express allow you to created REST based route path using *. So if I want to pass any number of parameters doing HTTP GET that can be done appending *

clip_image014

You can pass any number of parameters to access above created route path now.

clip_image015

If you try to access route which is not created then you will get error message as below. loo route is not there in rout paths so express is throwing error as below,

clip_image016

You can create routes with other HTTP VERBS . Method names are matched with HTTP verbs as discussed in beginning of this post.

clip_image017

You can test other operations like PUT , DELETE , POST in fiddler. This is how you can work with routing in express. For further advanced reading you may want to prefer REST API using express . Do not get overwhelmed with Visual Studio there in this post and follow the post to create REST API in any of your favourite code editor. I hope this post is useful to you.

If you want to create routes using crossroads then this post may help you

Create a Router in Node.js using crossroads

Setup Express and run first application in Node.js

In this post we will take a step by step look in setting up Express and creating first application. I assume that you have already installed Node. If not then go ahead and install from here

Once node.js is successfully installed, you can install Express framework by running npm install express on command prompt.

clip_image001

After installing express, I will recommend to create a new folder and change directory to newly created folder. I have created a folder expressjs and going to create a site named mysite using express framework. To create site run command express mysite . mysite is name of the site.

image

On successful execution of above command you will get suggestion as below that several files has been created.

clip_image003

Next to install dependency. To install that navigate to site directory. You can navigate to site directory using cd mysite. In mysite directory

clip_image004

It will install all dependency in mysite directory.

clip_image005

After successful installation of dependency you should get npm info ok message as shown in above figure. Now you can run created website by express using node.

clip_image006

In browser navigate to server on port 3000 and you will get basic site created using express up and running.

clip_image007

This is how you can set up express to create sites running on node.js. In further posts we will look into routing, app.js, routing path, http verbs. I hope you like this post. Thanks for reading.

Working with OS Module in Node.JS

In this post we will take a quick look on OS module in Node.js. OS module is to work with OS component. It provides some functionality to work with Operating System. Using this module you can get following information like below,

  • OS target version
  • Host name
  • OS temp folder
  • Total memory in system
  • Free memory in system
  • Load on system etc.

To work with os module you need to load the module first. You can load module as given below,

clip_image001

After loading os module you can use it to display operating system temp directory as below,

clip_image002

You can access host name as following,

clip_image003

You can access total memory and free memory as below,

clip_image004

You can access OS type and platform as below,

clip_image005

You can fetch CPU information as below,

clip_image006

Node will return output as below,

clip_image008

We saw that os module is very important to fetch information about operating system. Putting all together you can get various os information as below,


var os = require('os');
console.log(os.hostname());
console.log(os.totalmem());
console.log(os.freemem());
console.log(os.tmpdir());
console.log(os.uptime());
console.log(os.type());
console.log(os.platform());
console.log(os.cpus());

I hope you find this quick post on Node os module useful. Thanks for reading.

Events in NodeJS : Write your first event

Setup Environment on Windows machine for Node.js Development: Part 1

Let us simplify “Hello World” Node.js Example and EventLoop : Part 2

Each objects in NodeJS emit an asynchronous event. That event is handled by an object EventEmitter. EventEmitter is underneath every object.

EventEmitter object,

  1. Takes care of event being emitted by Node object
  2. Handles events emitted by Node object

EventEmitter object provides asynchronous event handling to Node object.

Now let us use how we can create a simple event. To create and event you need to follow following steps to create an Event in Node

Load events module. You can load that as follows,

image

After loading events module you need to create instance of EventEmitter. This can be done as follows,

clip_image001

Now you can attach an event using on eventhandler and emit an event using emit eventhandler. There are two steps involved in creating an event.

  1. Attach
  2. Emit

You can attach an event using on event handler. You can emit an event using emit event handler.

clip_image001[6]

To attach an event you need to call on method. This takes two parameter.

  1. Name of the event
  2. Functions to be called when event will be emitted.

You can add an event as follows. As you see there are two parameters. ‘error’ is name of the event and errorFunction is function called when error function emits on myLogger.

clip_image001[8]

In last step you can emit an event as follows. You need to pass event name and message(if any) to function.

image

Putting all together you can create an object and add error event to that as follows,

 


var events = require('events');

var myEvents = events.EventEmitter;
var myLogger= new myEvents();

myLogger.on('error',errorfunction);
function errorfunction(message)
{
 console.log(message);
}

myLogger.emit('error','hey I am an Error');
myLogger.emit('error','hey I am not an error but still');

 

Expected output is as follows,

clip_image001[10]

In further posts we will get into details of events in NodeJS. I hope you find this post useful. Thanks for reading.