• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Real Time App with Node.js
 

Real Time App with Node.js

on

  • 6,154 views

Slide for Seminar at JUS(Japan UNIX Society) 2011/07/22@sendagaya

Slide for Seminar at JUS(Japan UNIX Society) 2011/07/22@sendagaya
Tutorial about Real Time App by Express + Socket.io@0.7
and some tips.

Statistics

Views

Total Views
6,154
Views on SlideShare
4,570
Embed Views
1,584

Actions

Likes
6
Downloads
71
Comments
0

9 Embeds 1,584

http://d.hatena.ne.jp 1181
http://mochizblog.heroku.com 272
http://jxck.hatenablog.com 68
http://paper.li 27
http://paper.li 27
http://webcache.googleusercontent.com 5
http://www.twylah.com 2
http://translate.googleusercontent.com 1
http://blog.mochiz-lab.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Real Time App with Node.js Real Time App with Node.js Presentation Transcript

    • 2011 7 27
    • Jack2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • $ tree $ node app.js . node app.js !"" app.js Express server listening on !"" logs port 3000 in development mode !"" package.json !"" pids !"" public #   !"" images #   !"" javascripts #   $"" stylesheets #   $"" style.css $"" views !"" index.ejs $"" layout.ejs 7 directories, 5 files2011 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);2011 7 27
    • // Configuration app.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.js2011 7 27
    • // Routes app.get(/, function(req, res){ res.render(index, { title: Express }); }); <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel=stylesheet href=/stylesheets/style.css /> </head> <body> <h1><%= title %></h1> <%- body %> <p>Welcome to <%= title %></p> </body> </html>2011 7 27
    • // User Data var users = [{username: Jxck, email: sample@mail.com}]; app.get(/users, function(req, res) { app.get(/users/:id/edit, function(req, res) { res.render(users/index, { var id = req.param(id); title: index, res.render(users/edit, { users: users title: edit, id: id, }); users: users[id] }); }); }); app.get(/users/new, function(req, res) { res.render(users/new, { app.put(/users/:id, function(req, res) { title: new var id = req.param(id); }); var username = req.param(username); }); var email = req.param(email); users[id] = { app.post(/users, function(req, res) { username: username, email: email var username = req.param(username); }; var email = req.param(email); res.redirect(/users/); users.push({ }); username: username, email: email }); app.delete(/users/:id, function(req, res) { res.redirect(/users/); var id = req.param(id); }); users.splice(id, 1); 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] }); });2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • <!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> <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>2011 7 27
    • // 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); }); }); $(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()); }); });2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • 2011 7 27
    • Jack2011 7 27