0
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              ...
/**        * Module dependencies.        */       var express = require(express);       var app = module.exports = express...
// Configuration       app.configure(function(){         app.set(views, __dirname + /views);         app.set(view engine, ...
// Routes  app.get(/, function(req, res){    res.render(index, {      title: Express    });  });   <!DOCTYPE html>   <html...
// User Data  var users = [{username: Jxck, email: sample@mail.com}];  app.get(/users, function(req, res) {       app.get(...
2011   7   27
2011   7   27
2011   7   27
2011   7   27
2011   7   27
<!DOCTYPE html>                <html>                  <head>                    <title><%= title %></title>              ...
// Socket.IO                var io = require(socket.io).listen(app);                io.sockets.on(connection, function (so...
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
Upcoming SlideShare
Loading in...5
×

Real Time App with Node.js

6,473

Published on

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.

Transcript of "Real Time App with Node.js"

  1. 1. 2011 7 27
  2. 2. Jack2011 7 27
  3. 3. 2011 7 27
  4. 4. 2011 7 27
  5. 5. 2011 7 27
  6. 6. 2011 7 27
  7. 7. 2011 7 27
  8. 8. 2011 7 27
  9. 9. $ 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
  10. 10. /** * 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
  11. 11. // 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
  12. 12. // 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
  13. 13. // 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
  14. 14. 2011 7 27
  15. 15. 2011 7 27
  16. 16. 2011 7 27
  17. 17. 2011 7 27
  18. 18. 2011 7 27
  19. 19. <!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
  20. 20. // 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
  21. 21. 2011 7 27
  22. 22. 2011 7 27
  23. 23. 2011 7 27
  24. 24. 2011 7 27
  25. 25. 2011 7 27
  26. 26. 2011 7 27
  27. 27. 2011 7 27
  28. 28. 2011 7 27
  29. 29. 2011 7 27
  30. 30. 2011 7 27
  31. 31. 2011 7 27
  32. 32. 2011 7 27
  33. 33. 2011 7 27
  34. 34. 2011 7 27
  35. 35. 2011 7 27
  36. 36. Jack2011 7 27
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×