36
“Real Time App” with 2011/07/22@jus id: Jxck 1 2011年7月27日水曜日
“Real Time App”with
2011/07/22@jusid: Jxck
1
2011年7月27日水曜日
Jack
•id: Jxck•group: #nodejs_jp•twitter: jxck_•blog: http://d.hatena.ne.jp/Jxck•tubmlr: http://jxck.tumblr.com/•commit: jsonengine•Writing Node.js Book(now)
2
2011年7月27日水曜日
Real Time App with Node.js• Node でリアル(タイムアプリ)を充実させる。• リアルタイムアプリ
✓ アプリを作る = Express✓ リアルタイムにする = Socket.IO
• Node でリアルタイムアプリってどうやって作るの？
• Node が生かせる場面とは？• and more
3
2011年7月27日水曜日
installing node
4
2011年7月27日水曜日
Node.js を始めるには言語 環境管理 パッケージ管理
Ruby rvm gem
Python Virtualenv PyPI
Perl Perlbrew CPAN
node nave/nvm npm• https://github.com/creationix/nvm• https://github.com/isaacs/nave
5
2011年7月27日水曜日
require(‘express’);
6
2011年7月27日水曜日
Express ?
•http://expressjs.com/•Web Application FW•Sinatra Inspired•TJ(http://twitter.com/tjholowaychuk)•Light & Fast•Built on Connect
7
2011年7月27日水曜日
Express Skeleton
> npm install express -g// now you can use express command> express -s -t ejs sample// sample using session and ejs template> cd sample && npm install// resolve dependencies
8
2011年7月27日水曜日
Skeleton$ tree
.!"" app.js!"" logs!"" package.json!"" pids!"" public# !"" images# !"" javascripts# $"" stylesheets# $"" style.css$"" views !"" index.ejs $"" layout.ejs
7 directories, 5 files
$ node app.js node app.js Express server listening on port 3000 in development mode
9
2011年7月27日水曜日
/** * Module dependencies. */var express = require('express');
var app = module.exports = express.createServer();
/** snip **/
app.listen(3000);console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
app.js10
2011年7月27日水曜日
// Configurationapp.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser()); app.use(express.session({ secret: 'your secret here' })); app.use(app.router); app.use(express.static(__dirname + '/public'));});
app.configure('development', function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); });
app.configure('production', function(){ app.use(express.errorHandler()); });
$ NODE_ENV=production node app.js$ NODE_ENV=development node app.js
app.js11
2011年7月27日水曜日
<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> </body></html>
<h1><%= title %></h1><p>Welcome to <%= title %></p>
// Routes
app.get('/', function(req, res){ res.render('index', { title: 'Express' });});
layout.ejs
index.ejs
app.js
12
2011年7月27日水曜日
app.get('/users', function(req, res) { res.render('users/index', { title: 'index', users: users });});
app.get('/users/new', function(req, res) { res.render('users/new', { title: 'new' });});
app.post('/users', function(req, res) { var username = req.param('username'); var email = req.param('email'); users.push({ username: username, email: email }); res.redirect('/users/');});
app.get('/users/:id', function(req, res) { var id = req.param('id'); res.render('users/show', { title: 'show', id: id, users: users[id] });});
app.get('/users/:id/edit', function(req, res) { var id = req.param('id'); res.render('users/edit', { title: 'edit', id: id, users: users[id] });});
app.put('/users/:id', function(req, res) { var id = req.param('id'); var username = req.param('username'); var email = req.param('email'); users[id] = { username: username, email: email }; res.redirect('/users/');});
app.delete('/users/:id', function(req, res) { var id = req.param('id'); users.splice(id, 1); res.redirect('/users/');});
// User Datavar users = [{username: 'Jxck', email: '[email protected]'}];
Sample Routinglike Rails Scaffold
13
2011年7月27日水曜日
WebSocket
14
2011年7月27日水曜日
WebSocket15
2011年7月27日水曜日
very easy chat16
2011年7月27日水曜日
require(‘socket.io’);
17
2011年7月27日水曜日
Socket.IOSupported transports• WebSocket• Adobe® Flash® Socket• AJAX long polling
• AJAX multipart streaming• Forever Iframe• JSONP Polling
Supported browsers• Internet Explorer 5.5+• Safari 3+•Google Chrome 4+
• Firefox 3+•Opera 10.61+• iPhone Safari• iPad Safari•Android WebKit•WebOs WebKit
18
2011年7月27日水曜日
<h1><%= title %></h1><p>Welcome to <%= title %></p>
<input id="msg" type="text"></input><input id="ok" type="button" value="ok"></input>
<ul id="display"></ul>
<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src='jquery-1.6.1.min.js'></script> <script src='/socket.io/socket.io.js'></script> <script src='/javascripts/sample.js'></script> </head> <body> <%- body %> </body></html>
layout.ejs
index.ejs
19
2011年7月27日水曜日
$(function() { var socket = io.connect('http://localhost'); var $msg = $('#msg') , $ok = $('#ok') , $display = $('#display') ;
socket.on('msg push', function (data) { var $li = $('<li>').text(data); $display.append($li); });
$ok.click(function() { socket.emit('msg send', $msg.val()); });});
// Socket.IO
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket) { socket.on('msg send', function (data) { socket.emit('msg push', data); socket.broadcast.emit('msg push', data); });});
app.js
sample.js
20
2011年7月27日水曜日
Use Case ?
21
2011年7月27日水曜日
I/O Heavy > CPU Heavy
22
2011年7月27日水曜日
I/O Heavy
•Network I/O✓ WebSocket✓ Ajax
•Disk I/O✓ File Uploader
23
2011年7月27日水曜日
Real Time Web ?
24
2011年7月27日水曜日
25
2011年7月27日水曜日
Scale
27
2011年7月27日水曜日
Multi Process / IPC
•node-webworker✓ websocket
•Cluster✓ JSON-RPC
28
2011年7月27日水曜日
Sharing WebSocket
•Redis Pub/Sub
http://bit.ly/node-ssp-scale
29
2011年7月27日水曜日
SocketStream !?
30
2011年7月27日水曜日
SocketStream• Single-page Application• Socket.IO• CoffeeScript• Jade & Stylus• Underscore.js• jQuery & jQuery templates• Auto minifies• Scale by Redis Pub/Sub• Authentication• etc
https://github.com/socketstream/socketstream
31
2011年7月27日水曜日
more
32
2011年7月27日水曜日
Test•Assertion✓Assert✓Should
•Testing FW✓Expresso✓Node-Unit✓Vows
•Utility✓Sinon.js✓node-jscoverage
http://bit.ly/tng1-node-test
33
2011年7月27日水曜日
Node Knock Out
•Node Knock Out
• 48-hour coding contest featuring node.js.
• Schedule✓ 7/13 - 8/20 : Registration
✓ 8/27 - 8/29 : Competition
✓ 8/29 - 9/5 : Judging
http://nodeknockout.com/
34
2011年7月27日水曜日
Question ?
35
2011年7月27日水曜日
Jack
Thank You ;-)
36
2011年7月27日水曜日
