Your SlideShare is downloading. ×
Real Time App with Node.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Real Time App with Node.js

6,301
views

Published 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.


0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,301
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
85
Comments
0
Likes
8
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

×