読者です 読者をやめる 読者になる 読者になる

Socket.IOを用いたマウスカーソルの共有

node.js event tutorial

このエントリは、「東京Node学園 4時限目」の資料その4です。

app.js

var io = require('socket.io').listen(80);

io.of('/index').on('connection', function(socket) {
  socket.on('location', function(data) {
    data.id = socket.id;
    socket.broadcast.emit('location', data);
  });
});

io.of('/speakers').on('connection', function(socket) {
  socket.on('location', function(data) {
    data.id = socket.id;
    socket.broadcast.emit('location', data);
  });
});

io.of('/session').on('connection', function(socket) {
  socket.on('location', function(data) {
    data.id = socket.id;
    socket.broadcast.emit('location', data);
  });
});

io.of('/sponsors').on('connection', function(socket) {
  socket.on('location', function(data) {
    data.id = socket.id;
    socket.broadcast.emit('location', data);
  });
});

io.of('/ticket').on('connection', function(socket) {
  socket.on('location', function(data) {
    data.id = socket.id;
    socket.broadcast.emit('location', data);
  });
});

client.js

function cursorShare(ns) {
  var socket = io.connect('http://example.com/' + ns);
  socket.on('location', function(data) {
    var cursor = $('#' + data.id);
    if (!cursor.attr('id')) {
      cursor = $('<img>');
      cursor.attr('class', 'cursor');
      cursor.attr('id', data.id);
      cursor.attr('src', 'images/cursor.png');
      cursor.css('position', 'absolute');
      cursor.css('width', '18px');
      cursor.css('height', '24px');
      $('#wrapper').append(cursor);
    }
    cursor.css('left', data.x + 'px');
    cursor.css('top', data.y + 'px');
    cursor.show();
    setTimeout(function() {
      cursor.hide();
    }, 10000);
  });
  $('#wrapper').mousemove(function(e) {
    socket.emit('location', {
      x: e.pageX,
      y: e.pageY
    });
  });
}

各ページ

  <script type="text/javascript">
    $(function() {
      cursorShare('session');
    });
  </script>

見たらだいたい分かるべ