Question

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?

Here’s the server code I use:

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);
    });
});

Also, this is the code I used for the clinet side:

var socket = {};

if(typeof io !== 'undefined' && 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();

});

Any help will be appreciated.

Answer 1

It sounds to me like you want to be using Rooms

You can add users to rooms as they connect just within io.sockets.on(‘connection’)

For example:

io.sockets.on('connection', function (socket) {
  socket.join('room');
  socket.broadcast.to('room').send("I'm in this room now");
});

You can then use this to broadcast new drawings within just the room of where it originated.