In older days real-time data updates was achieved by having a timer to refresh a page or sending an Ajax request to the server to get the new data. Sometimes it makes requests unnecessarily to server even though no data updates. This concept is called polling.
Alternatively, Real-time data update is when data is updated on server, clients get notified for a refresh or data will be pushed to clients from server. It avoids unnecessary hits to the server.
In this section, we are going to build a very simple app which will have real-time data update capability.
Requirements
Nodejs
AngularJs
Download and install NodeJs. if it is already installed, then we can go for next step.
After nodejs is installed, open command prompt and create a app directory called 'realtime-app', navigate to the directory and run the following command.
The npm init command will create an empty project with a package.json file.
We need to install Express, Socket.io and socket.io-client libraries
-save will save package information in package.json and download everything to node_modeules folder.
Now, Install Jquery
Now, we are ready to code. First code server side portion.
Create a new file called app.js in realtime-app folder.
So the server is ready to listen on port 4200.
Now we add publish and subscribe events on server. Add below code in app.js just before server.listen(4200);
io.on listening connections.
client.on listening broadcast / emit event from client. Here, server subscribes to 'message' event from client.
client.emit will broadcast an event to client. Here, when server receives 'message' event from client it broadcast 'broad' event to clients which are subscribed to 'broad' event.
so the server code is like
Now the server portion is ready.
Lets move to client portions.
First part is index.html which is the actual client to display data. Other one is a web API which will broadcast / publish the data to client when the data is updated on data source.
Create index.html file.
Inlude Angularjs, jquery and socket.io client libraries in script part. socket.io.js is client library for socket.io.
In javascript part, a factory module is created to publish (broadcast) / subscribe (recieve) the events from and to server.
socket.on('broad', function(data){..}) will listen 'broad' event from server. when 'broad' event is published from server, client will listen and get the data to display / pocess.
When data needs to be updated in client, invoke the server 'message' event will emit the 'broad' event and client index.html will receive the 'broad' event.
Assume lets have a watcher which keep on watching the data changes in data source /database. When it finds a change in data needs to be pushed to client or client needs to be notified for new data availability. We can go either way. but i prefer the second one.
So the watcher required to have a way to invoke the Server to push the notification to client that there is data refresh required. the Second part will do invoke the server.
Before starting code, install socket.io-client
We need to modify the app.js as below
Here the idea is create a rest API, will be called from the watcher when it finds new data is available.
Create socket.io-client object to emit (boradcast) 'message' event to server. ioClient is connected to server and ready to listen and emit the events.
So final app.js will be like below
Thats it ready to run.
Step 1
Above will up the server and available for clients on localhost and port 4200
Step 2.
Open a browser and run the index.html as 'http://localhost:4200/index.html"
It displays the default message 'Welcome Hello world'
Now open other browser window and call the api to notify new data availability to the index.html.
'http://localhost:4200/api'.
Now, the index.html will be updated with 'New data available for update'.
Calling 'http://localhost:4200/api' is emitting the 'message' event.
and server
Index.html is subscribed to 'broad' event,
So when index.html receives the flag for new data availability from data watcher, client can request the data refresh.
Alternatively, Real-time data update is when data is updated on server, clients get notified for a refresh or data will be pushed to clients from server. It avoids unnecessary hits to the server.
In this section, we are going to build a very simple app which will have real-time data update capability.
Requirements
Nodejs
AngularJs
Download and install NodeJs. if it is already installed, then we can go for next step.
After nodejs is installed, open command prompt and create a app directory called 'realtime-app', navigate to the directory and run the following command.
$ npm init
The npm init command will create an empty project with a package.json file.
We need to install Express, Socket.io and socket.io-client libraries
$ npm install socket.io express --save
-save will save package information in package.json and download everything to node_modeules folder.
Now, Install Jquery
$ npm install jquery --save
Now, we are ready to code. First code server side portion.
Create a new file called app.js in realtime-app folder.
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
app.use(express.static(__dirname + '/node_modules'));
app.get('/', function(req, res,next) {
res.sendFile(__dirname + '/index.html');
});
server.listen(4200);
So the server is ready to listen on port 4200.
Now we add publish and subscribe events on server. Add below code in app.js just before server.listen(4200);
io.on('connection', function(client) {
console.log('Client connected...');
client.on('messages', function(data) {
client.emit('broad', data);
});
});
io.on listening connections.
client.on listening broadcast / emit event from client. Here, server subscribes to 'message' event from client.
client.emit will broadcast an event to client. Here, when server receives 'message' event from client it broadcast 'broad' event to clients which are subscribed to 'broad' event.
so the server code is like
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
app.use(express.static(__dirname + '/node_modules'));
app.get('/', function(req, res,next) {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(client) {
console.log('Client connected...');
client.on('messages', function(data) {
client.emit('broad', data);
});
});
server.listen(4200);
Now the server portion is ready.
Lets move to client portions.
First part is index.html which is the actual client to display data. Other one is a web API which will broadcast / publish the data to client when the data is updated on data source.
Create index.html file.
<!doctype html5>
<html lang="en" ng-app="realtimeapp">
<head>
</head>
<body ng-controller="appCtrl as appc">
<h1>{{appc.msg}}</h1>
<div >{{appc.data}}</div>
<script src="/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var app1 = angular.module('realtimeapp', []);
app1.controller('appCtrl', function AppController($scope,socket) {
self = this;
self.msg="Welcome Hello world";
socket.on('broad', function(data) {
self.data = data;
});
});
app1.factory('socket', function ($rootScope) {
var socket = io.connect('http://uscgspare:4200');
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});
</script>
</body>
</html>
Inlude Angularjs, jquery and socket.io client libraries in script part. socket.io.js is client library for socket.io.
In javascript part, a factory module is created to publish (broadcast) / subscribe (recieve) the events from and to server.
socket.on('broad', function(data){..}) will listen 'broad' event from server. when 'broad' event is published from server, client will listen and get the data to display / pocess.
When data needs to be updated in client, invoke the server 'message' event will emit the 'broad' event and client index.html will receive the 'broad' event.
Assume lets have a watcher which keep on watching the data changes in data source /database. When it finds a change in data needs to be pushed to client or client needs to be notified for new data availability. We can go either way. but i prefer the second one.
So the watcher required to have a way to invoke the Server to push the notification to client that there is data refresh required. the Second part will do invoke the server.
Before starting code, install socket.io-client
$ npm install socket.io-client --save
We need to modify the app.js as below
var ioClient = require('socket.io-client');
var router = express.Router();
var socket = ioClient.connect('http://localhost:4200');
router.get('/', function(req, res) {
//logic for finding data changes
socket.emit('messages', 'New data available for update');
res.json({ message: 'hooray! welcome to our api!' });
});
app.use('/api', router);
Here the idea is create a rest API, will be called from the watcher when it finds new data is available.
Create socket.io-client object to emit (boradcast) 'message' event to server. ioClient is connected to server and ready to listen and emit the events.
So final app.js will be like below
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var ioClient = require('socket.io-client');
app.use(express.static(__dirname + '/node_modules'));
app.get('/', function(req, res,next) {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(client) {
console.log('Client connected...');
client.on('messages', function(data) {
client.emit('broad', data);
});
});
var router = express.Router();
var socket = ioClient.connect('http://localhost:4200');
router.get('/', function(req, res) {
//logic for finding data changes
socket.emit('messages', 'New data available for update');
res.json({ message: 'hooray! welcome to our api!' });
});
app.use('/api', router);
server.listen(4200);
Thats it ready to run.
Step 1
$ node app.js
Above will up the server and available for clients on localhost and port 4200
Step 2.
Open a browser and run the index.html as 'http://localhost:4200/index.html"
It displays the default message 'Welcome Hello world'
Now open other browser window and call the api to notify new data availability to the index.html.
'http://localhost:4200/api'.
Now, the index.html will be updated with 'New data available for update'.
Calling 'http://localhost:4200/api' is emitting the 'message' event.
socket.emit('messages', 'New data available for update');
and server
client.on('messages', function(data) {
client.emit('broad', data);
});
Index.html is subscribed to 'broad' event,
socket.on('broad', function(data) {
self.data = data;
});
So when index.html receives the flag for new data availability from data watcher, client can request the data refresh.
