Subscribe via RSS Feed

Real-time Data update with Angular.js, Node.js and Express.io

May 18, 2015 0 Comments

We have posted Real-time Data update with Angular.js, Node.js and Socket.io previously.This article is a proof of concept towards make a real time web application with Javascript based Web Server Node.js and Express.IO with Angular.js.The application is same as the previous one ,but this time it is build up with Express.IO. We have simulated a situation with 4 Product with their Best Buy Price, Best Sell Price and Last Trade Price. Real-time Data update with Angular.js, Node.js and Express.io To make this possible, we have selected –

1> Angular.js for client side development – Application Front End

2> Node.js for server side development

3> Express.IO for Server and Client Communication.

4> Node.js Express.IO module extention.

We have created a Proof of Concept with Javascript based web server Node.js, where we have focused on dealing with Express.IO for real time application and angular.js on client side.

Architecture at a glance –

Angular.js NodeJS SocketIO So here are the steps –

Installation –

A> Download and install Node.js from here. B> To Develop the application we need to install express.io module for Node.js Command – npm install express.io (should be connected to internet)

Configuration Code –

Now, we will try to describe the code portion –

 var http = require('http'); var url = require('url'); var fs = require('fs'); // use express.io express = require('express.io'); var app = express().http().io(); 

Here we have initialised the http, url and filesystem object within javascript variables in respect of Node.js concept. Kanken 20L Also we have initialised express.io variable in the Node.js Environment. nike air max pas cher

 app.get('/angulartableRT.html',function(req,res){ var path = url.parse(req.url).pathname; fs.readFile(__dirname + path, function(err, data){ if (err){ return send404(res); } res.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'}); res.write(data, 'utf8'); res.end(); }); }); ....  cheap adidas shoes uk app.listen(8001); .... 

Here, we are giving access to the resources from the node.js server – “angulartableRT.html” for the client browser. Now the server is listening on port 8001 Reader will get the whole code in GITHUB, which is linked at the end of Post. Now the most important one is – express.io communication from Node.js. goedkoop schoenen adidas We have commented below the node.js express.io specific code.

 // define interactions with client app.io.route('ready', function(req){  //send data to client setInterval(function(){ for(i=0;i// A simulation of data from server instead of database calling { serverjson[i].BBP = Math.round((parseInt(serverjson[i].BBP) + Math.random())*100)/100; serverjson[i].BSP = Math.round((parseInt(serverjson[i].BSP) + Math.random())*100)/100; serverjson[i].LTP = Math.round((parseInt(serverjson[i].LTP) + Math.random())*100)/100; } var serverjsonstr = JSON.stringify(serverjson); req.io.emit('msg', {'msg': serverjsonstr});// Emitting Messages from Server req.io.emit('showMsg', {'msgWrite':msgWrite}); }, 1000); }); app.io.route('client_data', function (req) {//receiving what sent from client side console.log(req.data.text);//printing cliend data in console msgWrite = req.data.text; app.io.room(req.data.letter).broadcast('showMsg', {//sending back to client 'msgWrite':msgWrite, }); }); 

Now run node server.js from command shell. nike air max 90 pas cher This is our node.js specific code file. Our sample application will be – http://localhost:8001/ javascriptnosqlbook

Angular.js part –

Below is the code in Angular Controller and the Express.io related code is discussed.

 /* Controllers */ apps.controller('StockListCtrl', function($scope, express) { $scope.stocks = []; express.on('msg', function(data) {// Listening in Socket in Angular Controller $scope.stocks = JSON.parse(data.msg); //$scope.notes.push(data); }); }); //Getting value from server data change event apps.factory('express', function($rootScope) { var express = io.connect();// Connection to the server express.emit('ready'); return { on: function(eventName, callback) {// Return callback to the actual function to manipulate it. express.on(eventName, function() { var args = arguments; $rootScope.$apply(function() { callback.apply(express, args); }); }); } }; }); 

Angular HTML Binding

 <script src="http://localhost:8001/socket.io/socket.io.js"></script> // Important to know // Access socket.io.js from Angular.js .....

Below is the dynamic binding of Angular HTML with the Controller –

<body ng-controller="StockListCtrl"> <div> <table class="table"> ... <tbody> <tr ng-repeat="stock in stocks"> <!-- Dynamic Binding of Angular Template with Data --> <td>{{stock.Product}}</td> <td>{{stock.BBP}}</td> <td>{{stock.BSP}}</td> <td>{{stock.LTP}}</td> </tr> </tbody> </table> </div> </body>

Reader can download the complete source-code in GitHub. cheap nike air max If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

You must be logged in to post a comment.