Skip to content

Instantly share code, notes, and snippets.

@umidjons
Created January 18, 2016 07:11
Show Gist options
  • Save umidjons/a1300e542e3011d1ad57 to your computer and use it in GitHub Desktop.
Save umidjons/a1300e542e3011d1ad57 to your computer and use it in GitHub Desktop.
Socket.io example

Socket.io example

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment