東京Node学園 4時限目に参加してきました。

東京Node学園 4時限目に参加してきました。
内容は、最初にnode.jsでWebSocketを使うまでの説明があって、
その後は、主にハッカソン。ひとりでモクモク実装する感じでした。

使われてた資料

 

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

え?socket.ioでマウスカーソルの共有とかできんの!?まじかー!
「サーバには頻繁にアクセスして負荷かけちゃいけない」という既成概念に囚われていたため衝撃をうけました。
実際動かしてみたくなったので、コードを一部丸パクリしつつ動かします。

expressのテンプレートを生成

# express -t ejs -s sample

packageにsocket.ioを追加

# sample/package.json
{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.5"
    , "ejs": ">= 0.0.1"
    , "socket.io": "*"   ←追記
  }
}

npmで必要なモジュールをインストール

# npm install

sample/app.js に追記

var io = require('socket.io').listen(app);
io.sockets.on('connection', function(socket) {
  socket.on('mousemove',function (data) {
    var d = {};
    d.id = socket.id;
    d.x = data.x;
    d.y = data.y;
    socket.broadcast.emit('mousemovecb',JSON.stringify(d));
  });
});

sample/views/layout.ejs に追記

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>

sample/views/index.ejs に追記

<script type="text/javascript">
var socket = io.connect();
socket.on('mousemovecb', function(data) {
  var data = JSON.parse(data);
  var cursor = $('#' + data.id);
  if(!cursor.attr('id')) {
    cursor = $('<img>');
    cursor.attr('src', 'images/cursor.png');
    cursor.css('position','absolute');
    cursor.css('width','18px');
    cursor.css('height','24px');
    $('#wrapper').append(cursor);
  }
  console.log(data);
  cursor.css('left', data.x + 'px');
  cursor.css('top', data.y + 'px');
  cursor.show();
  setTimeout(function () {
    cursor.hide();
  }  ,1000);
});

$(function() {
  $('#wrapper').mousemove(function(e) {
    socket.emit('mousemove', {
      x: e.pageX,
      y: e.pageY
    });
  });
});
</script>
<div id="wrapper" style="height: 300px; width: 300px; background: #ddd;"></div>

以下になんか適当なPNGとかJPGとかのアイコンを配置する。

sample/public/images/cursor.png

起動

# node app.js

以下のURLを2つのブラウザで開く

http://localhost:3000/

片方のブラウザで表示された灰色のエリア上でマウスを動かすと、
もう片方のブラウザでcursor.pngアイコンが表示される。
このサイトをグローバルに立てれば、みんなでマウスを共有できる。 これは燃えるな~。

ハッカソンの成果発表

カメラキャプチャした動画をnodeでリアルタイムに画像処理して配信する発表や
iPhoneでWebSocketでセッションをはったブラウザに音を鳴らす発表など
おぉ!なるほど!と思わせる内容が盛りだくさん。

個人的には、PandaBoardにnodeを載せてもいい感じという話が
目から鱗でした。(サーバ以外にnode入れるんだ!みたいな)
良い刺激を受けた一日になりました。
次こそは成果物をあげたい。