東京Node学園 4時限目に参加してきました。
東京Node学園 4時限目に参加してきました。
内容は、最初にnode.jsでWebSocketを使うまでの説明があって、
その後は、主にハッカソン。ひとりでモクモク実装する感じでした。
使われてた資料
- Nodeとnpmのインストール
- Expressを使ったWebアプリケーション
- ExpressとSocket.IOを使ったカウンターのサンプル
- Socket.IOを用いたマウスカーソルの共有
- よく使われているパッケージ
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入れるんだ!みたいな)
良い刺激を受けた一日になりました。
次こそは成果物をあげたい。