node.jsによるお手軽画像uploader実装

id:hakobe932

1

id:hakobe932

id:hakobe932❖ 普段やってること•エンジニア @はてな‣はてなブックマーク‣関西最速アニメ調査❖ 好きなプログラミング言語•Perl/Ruby/Scala•JavaScript ← new!!!

3

tray

tray❖ 画像アップローダ•お手軽D&Dアップロード•アップロード数の制限•リアルタイム❖ 少し遊んでみましょう!!•http://tray.douzemille.net:8080

5

簡単インストール

6

$ brew install node$ brew install redis

$ git clone https://github.com/hakobe/tray.git$ cd tray$ npm install$ node app.js

実装

trayの実装

8

Node

express socket.io

Redis

Server

Client

アップロード 更新通知画像リスト

API(app.js)❖ express でディスパッチ

9

1 app.get( // トップページ2 '/', routes.index.index);3 app.get( // パネル一覧4 '/api/panels.json', routes.api.panels);5 app.post( // パネル画像アップロード6 '/api/upload.json', routes.api.upload);

routes/api.js

10

// 画像一覧exports.panels = function(req, res) { var from = req.query.from; panelManager.retrievePanels(from, function( panels ) { res.json(200, panels); });};

// 画像アップロードexports.upload = function(req, res) { var file = req.files; if (file && file.imageFile) { // ... 省略中 ... }}

redisから画像リスト取得

次のスライドで説明

•expressがアップロードをハンドル‣ bodyParserのuploadDirを指定しとく•追加はPanelManagerが担当

画像の登録

11

panelManager.createId(function(id) { fs.rename( req.files.imageFile.path, path, function(err) { var panel = { id : id, imageName : path.basename(path), }; panelManager.addPanel( panel ); res.redirect('/'); });});

アップロードされたファイルを移動

panelManagerが登録

•Redisに画像の情報を追加PanelManager

12

PanelManager.prototype.addPanel = function(panel) { redisClient.zadd( redisKey('panels'), panel.id, JSON.stringify(panel), redis.print ); this.emit('add', panel);

return panel;},

add イベントをemit

Sorted Setにデータ追加

•オブジェクトがイベントを発行可能にEventEmitter

13

function PanelManager() { events.EventEmitter.call(this);}util.inherits(PanelManager, events.EventEmitter);

PanelManager.prototype.addPanel = function(panel) {

// ... いろんなメソッドの実装 ...

14

PanelManager.prototype.addPanel = function(panel) { redisClient.zadd( redisKey('panels'), panel.id, JSON.stringify(panel), redis.print ); this.emit('add', panel);

return panel;},

var panelManager = new PanelManager();panelManager.on('add', function() { // panelManager.emit('add') されたときの処理});

別のコンテキストで登録された処理を実行

socket.io (app.js)❖ パネル追加時クライアント全体に通知

15

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

var panelManager = new PanelManager();panelManager.on('add', function(panel) { io.sockets.emit('paneladd');}) クライアント全体に paneladd

イベントを通知

PanelManagerとsocket.ioの振舞いを分離しておける

socket.io(クライアント)❖ 通知が来たら再読み込み

16

var socket = io.connect(location.href);socket.on('paneladd', function () { showPanels();});

その他

•クライアントサイド‣Drag and Drop API‣FromData‣Zepto

17

まとめ❖ tray•お手軽画像アップローダ•node.jsっぽい技術つまみぐい•12枚のパネルをきれいにそろえよう

18

Fork me on GitHubhttps://github.com/hakobe/tray