Real-time apps are becoming more and more widespread in gaming, social media, various tools, services, and news.
The main factor contributing to this trend is that technologies have become much better. They allow for a greater
bandwidth to transmit data, and for more calculations to process and retrieve the data.
HTML5 pioneered the new standard of real-time connections called WebSocket.
What is WebSocket?
WebSocket is a special communication “channel” between browsers (clients) and servers. It’s an HTML5 protocol. WebSocket’s connection is constant, in contrast to traditional HTTP requests, with the latter usually initiated by the client. Therefore, there’s no way for a server to notify the client if there are updates. By maintaining a duplex open connection between the client and the server, updates can be pushed in a timely fashion without clients needing to poll at certain intervals.
The main factor contributing to this trend is that technologies have become much better. They allow for a greater
bandwidth to transmit data, and for more calculations to process and retrieve the data.
HTML5 pioneered the new standard of real-time connections called WebSocket.
What is WebSocket?
WebSocket is a special communication “channel” between browsers (clients) and servers. It’s an HTML5 protocol. WebSocket’s connection is constant, in contrast to traditional HTTP requests, with the latter usually initiated by the client. Therefore, there’s no way for a server to notify the client if there are updates. By maintaining a duplex open connection between the client and the server, updates can be pushed in a timely fashion without clients needing to poll at certain intervals.
Browser WebSocket Implementation
We start with typical
HTML tags:
<html>
<head>
</head>
<body>
The main code lives in the script tag, where we instantiate an object from global WebSocket:
<script type="text/javascript">
var ws = new WebSocket('ws://localhost:3000');
As soon as the connection is established, we send a message to the server:
ws.onopen = function(event) {
ws.send('front-end message: ABC');
};
Usually, messages are sent in response to user actions, such as mouse clicks. When we get any message from the
WebSocket location, the following handler is executed:
ws.onmessage = function(event) {
console.log('server message: ', event.data);
};
A good practice is to have an onerror event handler:
ws.onerror = function(event) {
console.log('server error message: ', event.data);
};
We then close the tags and save the file:
</script>
</body>
</html>
To install WebSocket module component.
$ npm install ws@0.4.31
=====sample app for WebSocket==========
1.create new folder named 'nodejs_real_time_apps'
2.run $npm init //to create package.json file
3. package.json add below code in generated package.json
{
"name": "websocket",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"ws": "^0.4.31"
}
}
5. create below files under this folder:
websocket.html
<html>
<head>
</head>
<body>
<!-- Websocket code -->
<script type="text/javascript">
var ws = new WebSocket('ws://localhost:3000');
ws.onopen = function(event) {
ws.send('Message from websocket.html:Hi');
};
ws.onmessage = function(event) {
console.log('app.js server message: ', event.data);
};
</script>
</body>
</html>
app.js
=====sample app for WebSocket==========
1.create new folder named 'nodejs_real_time_apps'
2.run $npm init //to create package.json file
3. package.json add below code in generated package.json
{
"name": "websocket",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"ws": "^0.4.31"
}
}
4. run $npm install to install modules given in package.json
5. create below files under this folder:
websocket.html
<html>
<head>
</head>
<body>
<!-- Websocket code -->
<script type="text/javascript">
var ws = new WebSocket('ws://localhost:3000');
ws.onopen = function(event) {
ws.send('Message from websocket.html:Hi');
};
ws.onmessage = function(event) {
console.log('app.js server message: ', event.data);
};
</script>
</body>
</html>
app.js
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({port: 3000});
wss.on('connection', function(ws) {
var i=0;
setInterval(function() {
ws.send('Message from server:Hello'+i);
console.log('sent from server: %s', i);
i++;
}, 2000);
ws.send('Message from server:Hello');
ws.on('message', function(message) {
console.log('received: %s', message);
});
});
6. Run app.js with command $nodemon app.js
7. go to browser and run give path of created above html file and check console of browser and node.
Its done. you can see, real time data sent from server to browser and browser catching it in real time.
wss = new WebSocketServer({port: 3000});
wss.on('connection', function(ws) {
var i=0;
setInterval(function() {
ws.send('Message from server:Hello'+i);
console.log('sent from server: %s', i);
i++;
}, 2000);
ws.send('Message from server:Hello');
ws.on('message', function(message) {
console.log('received: %s', message);
});
});
6. Run app.js with command $nodemon app.js
7. go to browser and run give path of created above html file and check console of browser and node.
Its done. you can see, real time data sent from server to browser and browser catching it in real time.
No comments:
Post a Comment