Real Time App with Node.js

  • 5,975 views
Uploaded on

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,975
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
80
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 2011 7 27
  • 2. Jack2011 7 27
  • 3. 2011 7 27
  • 4. 2011 7 27
  • 5. 2011 7 27
  • 6. 2011 7 27
  • 7. 2011 7 27
  • 8. 2011 7 27
  • 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. /** * 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. // 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. // 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. // 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. 2011 7 27
  • 15. 2011 7 27
  • 16. 2011 7 27
  • 17. 2011 7 27
  • 18. 2011 7 27
  • 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. // 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. 2011 7 27
  • 22. 2011 7 27
  • 23. 2011 7 27
  • 24. 2011 7 27
  • 25. 2011 7 27
  • 26. 2011 7 27
  • 27. 2011 7 27
  • 28. 2011 7 27
  • 29. 2011 7 27
  • 30. 2011 7 27
  • 31. 2011 7 27
  • 32. 2011 7 27
  • 33. 2011 7 27
  • 34. 2011 7 27
  • 35. 2011 7 27
  • 36. Jack2011 7 27