title: How can I group users into sessions in a node.js draw application?
body: <p>I made a draw app in node.js and socket.io recently. It works fine but all things drawn by a user will be seen by all users. I want to add the concept of sessions so the things a user draws will only be seen by people in the same session. How can I do it?</p>
  
  <p>Here's the server code I use:</p>
  
  <pre><code>var express = require('express');
  var app = express();
  var server = http.createServer(app);
  var io = require('socket.io').listen(server);
  server.listen(8000);
  
  app.use(express.static(__dirname));
  app.use(express.logger());
  app.engine('html', require('ejs').__express);
  
  app.get('/',function(req,res){
      res.sendfile(__dirname+'/index.html');
  });
  
  io.sockets.on('connection',function(socket){
      socket.on('mousedown',function(data){
          socket.broadcast.emit('mousedown',data);
      });
      socket.on('mousemove',function(data){
          socket.broadcast.emit('mousedown',data);
      });
      socket.on('mouseup',function(data){
          socket.broadcast.emit('mousedown',data);
      });
      socket.on('tool',function(data){
          socket.broadcast.emit('mousedown',data);
      });
  });
  </code></pre>
  
  <p>Also, this is the code I used for the clinet side:</p>
  
  <pre><code>var socket = {};
  
  if(typeof io !== 'undefined' &amp;&amp; io){
      socket = io.connect('http://127.0.0.1:8000');
  }
  else
  {
      socket = {
          emit:function(){
              console.log(arguments);
          },
          on:function(){
              console.log(arguments);
          }
      };
  }
  
  $(function(){
    var canvas, context, canvaso, contexto;
  
    // The active tool instance.
    var tool;
    var tool_default = 'line';
  
    function init () {
      // Find the canvas element.
      canvaso = document.getElementById('imageView');
      canvaso.width = window.innerWidth * 0.9;
      canvaso.height = window.innerHeight/2;
      if (!canvaso) {
        console.log('Error: I cannot find the canvas element!');
        return;
      }
  
      if (!canvaso.getContext) {
        console.log('Error: no canvas.getContext!');
        return;
      }
  
      // Get the 2D canvas context.
      contexto = canvaso.getContext('2d');
      if (!contexto) {
        console.log('Error: failed to getContext!');
        return;
      }
  
      // Add the temporary canvas.
      var container = canvaso.parentNode;
      canvas = document.createElement('canvas');
      if (!canvas) {
        console.log('Error: I cannot create a new canvas element!');
        return;
      }
  
      canvas.id     = 'imageTemp';
      canvas.width  = canvaso.width;
      canvas.height = canvaso.height;
      container.appendChild(canvas);
  
      context = canvas.getContext('2d');
  
      // Get the tool select input.
      var tool_select = document.getElementById('dtool');
      if (!tool_select) {
        console.log('Error: failed to get the dtool element!');
        return;
      }
      tool_select.addEventListener('change', ev_tool_change, false);
  
      // Activate the default tool.
      if (tools[tool_default]) {
        tool = new tools[tool_default]();
        tool_select.value = tool_default;
      }
  
      // Attach the mousedown, mousemove and mouseup event listeners.
      $(canvas).on('mousedown',ev_canvas);
      $(canvas).on('mousemove',ev_canvas);
      $(canvas).on('mouseup',ev_canvas);
    }
  
    // The general-purpose event handler. This function just determines the mouse 
    // position relative to the canvas element.
    function ev_canvas (ev) {
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
  
      // Call the event handler of the tool.
      var func = tool[ev.type];
      socket.emit(ev.type,{x:ev._x,y:ev._y});
      if (func) {
        func(ev);
      }
    }
  
    socket.on('mousedown',function(data){
      ev_canvas({type:'mousedown',_x:data.x,_y:data.y});
    });
  
    socket.on('mousemove',function(data){
      ev_canvas({type:'mousemove',_x:data.x,_y:data.y});
    });
  
    socket.on('mouseup',function(data){
      ev_canvas({type:'mouseup',_x:data.x,_y:data.y});
    });
  
    // The event handler for any changes made to the tool selector.
    function ev_tool_change (ev) {
      if (tools[this.value]) {
        tool = new tools[this.value]();
        socket.emit('tool',this.value);
      }
    }
    socket.emit('tool',tool_default);
    socket.on('tool',function(stool){
      tool = new tools[stool]();
    });
  
    // This function draws the #imageTemp canvas on top of #imageView, after which 
    // #imageTemp is cleared. This function is called each time when the user 
    // completes a drawing operation.
    function img_update () {
          contexto.drawImage(canvas, 0, 0);
          context.clearRect(0, 0, canvas.width, canvas.height);
    }
  
    // This object holds the implementation of each drawing tool.
    var tools = {};
  
    // The drawing pencil.
    tools.pencil = function () {
      var tool = this;
      this.started = false;
  
      // This is called when you start holding down the mouse button.
      // This starts the pencil drawing.
      this.mousedown = function (ev) {
          context.beginPath();
          context.moveTo(ev._x, ev._y);
          tool.started = true;
      };
  
      // This function is called every time you move the mouse. Obviously, it only 
      // draws if the tool.started state is set to true (when you are holding down 
      // the mouse button).
      this.mousemove = function (ev) {
        if (tool.started) {
          context.lineTo(ev._x, ev._y);
          context.stroke();
        }
      };
  
      // This is called when you release the mouse button.
      this.mouseup = function (ev) {
        if (tool.started) {
          tool.mousemove(ev);
          tool.started = false;
          img_update();
        }
      };
    };
  
    // The rectangle tool.
    tools.rect = function () {
      var tool = this;
      this.started = false;
  
      this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = ev._x;
        tool.y0 = ev._y;
      };
  
      this.mousemove = function (ev) {
        if (!tool.started) {
          return;
        }
  
        var x = Math.min(ev._x,  tool.x0),
            y = Math.min(ev._y,  tool.y0),
            w = Math.abs(ev._x - tool.x0),
            h = Math.abs(ev._y - tool.y0);
  
        context.clearRect(0, 0, canvas.width, canvas.height);
  
        if (!w || !h) {
          return;
        }
  
        context.strokeRect(x, y, w, h);
      };
  
      this.mouseup = function (ev) {
        if (tool.started) {
          tool.mousemove(ev);
          tool.started = false;
          img_update();
        }
      };
    };
  
    // The line tool.
    tools.line = function () {
      var tool = this;
      this.started = false;
  
      this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = ev._x;
        tool.y0 = ev._y;
      };
  
      this.mousemove = function (ev) {
        if (!tool.started) {
          return;
        }
  
        context.clearRect(0, 0, canvas.width, canvas.height);
  
        context.beginPath();
        context.moveTo(tool.x0, tool.y0);
        context.lineTo(ev._x,   ev._y);
        context.stroke();
        context.closePath();
      };
  
      this.mouseup = function (ev) {
        if (tool.started) {
          tool.mousemove(ev);
          tool.started = false;
          img_update();
        }
      };
    };
  
    init();
  
  });
  </code></pre>
  
  <p>Any help will be appreciated.</p>