almost 9 years ago
In node.js Socket.io enables real time event based communication. What that means is that we can communicate to the server from the client and in return the server can talk back to the client. Socket.IO uses WebSockets when it can and has fail overs if the browser does not support it.
Step by Step implementation of socket.io using node.js.
Step 1:In first step I am assuming that you have already created the project using express.js and node.js. If you didn't do that then please read my previous blog and create the project. After that just install socket.io module.
Step 2: Now go to app.js there we will require socket.io and connect socket with our server.
var express = require('express');var app = express();var server = require('http').createServer(app);var io = require('socket.io')(server);app.use(express.static(__dirname + '/bower_components'));app.get('/', function(req, res,next) {res.sendFile(__dirname + '/index.html');});server.listen(4200);
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
app.use(express.static(__dirname + '/bower_components'));
app.get('/', function(req, res,next) {
res.sendFile(__dirname + '/index.html');
});
server.listen(4200);App.get routes http requests to the specified path with a specific call back function.
Step 3: Now we will create index.html.
<!doctype html><html lang="en"><head><script>var socket = io.connect('http://localhost:4200');socket.on('connect', function(data) {socket.emit('join', 'Hello World from client');});socket.on('broad', function(data) {$('#future').html(data);});$('form').submit(function(e){e.preventDefault();var message = $('#chat_input').val();socket.emit('messages', message);});</script></head><body><h1>Hello World!</h1><div id="future"></div><form id="form" id="chat_form"><input id="chat_input" type="text"><input type="submit" value="Send"></form><script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="/socket.io/socket.io.js"></script></body></html>
<!doctype html>
<html lang="en">
<head>
<script>
var socket = io.connect('http://localhost:4200');
socket.on('connect', function(data) {
socket.emit('join', 'Hello World from client');
});
socket.on('broad', function(data) {
$('#future').html(data);
});
$('form').submit(function(e){
e.preventDefault();
var message = $('#chat_input').val();
socket.emit('messages', message);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
<div id="future"></div>
<form id="form" id="chat_form">
<input id="chat_input" type="text">
<input type="submit" value="Send">
</form>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="/socket.io/socket.io.js"></script>
</body>
</html> Here we will connect to the socket and brodcast the message to all the connected user.
Step 4: Now again go to the app.js aand connect with the server.
io.on('connection', function(client) {console.log('Client connected...');client.on('join', function(data) {console.log(data);});client.on('messages', function(data) {client.emit('broad', data);client.broadcast.emit('broad',data);});});
io.on('connection', function(client) {
console.log('Client connected...');
client.on('join', function(data) {
console.log(data);
});
client.on('messages', function(data) {
client.emit('broad', data);
client.broadcast.emit('broad',data);
});
});
By this way we will use socket.io using node.js.
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)