npm init
npm install --save express body-parser socket.io morgan consolidate nunjucks
mkdir -p public/views
File app.js
var express=require('express'),
app=express(),
consolidate=require('consolidate'),
logger=require('morgan'),
path=require('path'),
bodyParser=require('body-parser'),
socketIO=require('socket.io'),
http=require('http');
// configure template engine
app.engine('html',consolidate.nunjucks);
app.set('view engine','html');
app.set('views',path.join(__dirname,'public','views'));
app.use(logger('dev'));
app.use(express.static(path.join(__dirname,'public')));
app.use(bodyParser.urlencoded({extended:false}));
app.get('/',function(req,res){
res.render('index');
});
var server=http.createServer(app);
var io=socketIO.listen(server);
io.sockets.on('connection',function(socket){
// listen test1 event from client
socket.on('test1',function(data){
console.log('Received ',data);
// trigger test2 event to client
socket.emit('test2', data.time+' from server');
});
});
server.listen(3000,function(){
console.log('Listening on http://localhost:3000');
});
File public\views\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Socket.io example</title>
</head>
<body>
<h1>Socket.io example</h1>
<p>Here we sending <em>test1</em> event to the server and listening for <em>test2</em> event from the server.</p>
<button onclick="sendTest1()">Emit 'test1'</button>
Received Message: <pre id="received-message">(empty)</pre>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io.connect('http://localhost:3000');
// listen for 'test2'
socket.on('test2',function(data){
console.log('received %s',data);
document.querySelector('#received-message').innerText=data;
});
var sendTest1=function(){
var data=new Date();
// emit 'test1'
socket.emit('test1',{time:data});
}
</script>
</body>
</html>