SlideShare ist ein Scribd-Unternehmen logo
1 von 36
Downloaden Sie, um offline zu lesen
2011   7   27
Jack
2011   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 files



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);




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

2011   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
Jack
2011   7   27

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
 
jQuery
jQueryjQuery
jQuery
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
 
Drupal, meet Assetic
Drupal, meet AsseticDrupal, meet Assetic
Drupal, meet Assetic
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
JQuery plugin development fundamentals
JQuery plugin development fundamentalsJQuery plugin development fundamentals
JQuery plugin development fundamentals
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuery
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development Toolkit
 
PhoneGap: Local Storage
PhoneGap: Local StoragePhoneGap: Local Storage
PhoneGap: Local Storage
 
Binary Studio Academy 2016: Laravel Controllers
Binary Studio Academy 2016: Laravel ControllersBinary Studio Academy 2016: Laravel Controllers
Binary Studio Academy 2016: Laravel Controllers
 
Matters of State
Matters of StateMatters of State
Matters of State
 
BEAR DI
BEAR DIBEAR DI
BEAR DI
 
Javascript session june 2013 (iii) jquery json
Javascript session june 2013 (iii) jquery   jsonJavascript session june 2013 (iii) jquery   json
Javascript session june 2013 (iii) jquery json
 
Jquery plugin development
Jquery plugin developmentJquery plugin development
Jquery plugin development
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
 
Pemrograman Web 8 - MySQL
Pemrograman Web 8 - MySQLPemrograman Web 8 - MySQL
Pemrograman Web 8 - MySQL
 
Coding website
Coding websiteCoding website
Coding website
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
J query training
J query trainingJ query training
J query training
 

Ähnlich wie Real Time App with Node.js

node.js practical guide to serverside javascript
node.js practical guide to serverside javascriptnode.js practical guide to serverside javascript
node.js practical guide to serverside javascriptEldar Djafarov
 
Make WordPress realtime.
Make WordPress realtime.Make WordPress realtime.
Make WordPress realtime.Josh Hillier
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015Fernando Daciuk
 
Silex meets SOAP & REST
Silex meets SOAP & RESTSilex meets SOAP & REST
Silex meets SOAP & RESTHugo Hamon
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For BeginnersJonathan Wage
 
Build Web Apps using Node.js
Build Web Apps using Node.jsBuild Web Apps using Node.js
Build Web Apps using Node.jsdavidchubbs
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ EtsyNishan Subedi
 
Nodejs do teste de unidade ao de integração
Nodejs  do teste de unidade ao de integraçãoNodejs  do teste de unidade ao de integração
Nodejs do teste de unidade ao de integraçãoVinícius Pretto da Silva
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentationnishasowdri
 
Build web application by express
Build web application by expressBuild web application by express
Build web application by expressShawn Meng
 
Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsFrancois Zaninotto
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说Ting Lv
 
node.js workshop- node.js middleware
node.js workshop- node.js middlewarenode.js workshop- node.js middleware
node.js workshop- node.js middlewareQiong Wu
 
Building Web Apps with Express
Building Web Apps with ExpressBuilding Web Apps with Express
Building Web Apps with ExpressAaron Stannard
 
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017Codemotion
 
Server side data sync for mobile apps with silex
Server side data sync for mobile apps with silexServer side data sync for mobile apps with silex
Server side data sync for mobile apps with silexMichele Orselli
 

Ähnlich wie Real Time App with Node.js (20)

node.js practical guide to serverside javascript
node.js practical guide to serverside javascriptnode.js practical guide to serverside javascript
node.js practical guide to serverside javascript
 
Express JS
Express JSExpress JS
Express JS
 
Make WordPress realtime.
Make WordPress realtime.Make WordPress realtime.
Make WordPress realtime.
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
 
Silex meets SOAP & REST
Silex meets SOAP & RESTSilex meets SOAP & REST
Silex meets SOAP & REST
 
Pengenalan blaast platform sdk
Pengenalan blaast platform sdkPengenalan blaast platform sdk
Pengenalan blaast platform sdk
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
 
Build Web Apps using Node.js
Build Web Apps using Node.jsBuild Web Apps using Node.js
Build Web Apps using Node.js
 
Rails is not just Ruby
Rails is not just RubyRails is not just Ruby
Rails is not just Ruby
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
Nodejs do teste de unidade ao de integração
Nodejs  do teste de unidade ao de integraçãoNodejs  do teste de unidade ao de integração
Nodejs do teste de unidade ao de integração
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
 
Build web application by express
Build web application by expressBuild web application by express
Build web application by express
 
Backbone js
Backbone jsBackbone js
Backbone js
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
 
前端MVC 豆瓣说
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
 
node.js workshop- node.js middleware
node.js workshop- node.js middlewarenode.js workshop- node.js middleware
node.js workshop- node.js middleware
 
Building Web Apps with Express
Building Web Apps with ExpressBuilding Web Apps with Express
Building Web Apps with Express
 
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
 
Server side data sync for mobile apps with silex
Server side data sync for mobile apps with silexServer side data sync for mobile apps with silex
Server side data sync for mobile apps with silex
 

Mehr von Jxck Jxck

Http2 on go1.6rc2
Http2 on go1.6rc2Http2 on go1.6rc2
Http2 on go1.6rc2Jxck Jxck
 
ORTC SVC SimulCast
ORTC SVC SimulCastORTC SVC SimulCast
ORTC SVC SimulCastJxck Jxck
 
HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2Jxck Jxck
 
Isomorphic Architecture & Interface
Isomorphic Architecture & InterfaceIsomorphic Architecture & Interface
Isomorphic Architecture & InterfaceJxck Jxck
 
HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会Jxck Jxck
 
Extensible web #html5j
Extensible web #html5jExtensible web #html5j
Extensible web #html5jJxck Jxck
 
Extensible web
Extensible webExtensible web
Extensible webJxck Jxck
 
HTTP2Study chronicle #http2conf
HTTP2Study chronicle #http2confHTTP2Study chronicle #http2conf
HTTP2Study chronicle #http2confJxck Jxck
 
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-divermozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diverJxck Jxck
 
Updates of socket.io@1.0
Updates of socket.io@1.0Updates of socket.io@1.0
Updates of socket.io@1.0Jxck Jxck
 
Why HTML Form dose not support PUT & DELETE ?
Why HTML Form dose not support PUT & DELETE ?Why HTML Form dose not support PUT & DELETE ?
Why HTML Form dose not support PUT & DELETE ?Jxck Jxck
 
Next generation web talk @cross2014
Next generation web talk @cross2014Next generation web talk @cross2014
Next generation web talk @cross2014Jxck Jxck
 
HTTP2 & HPACK #pyfes 2013-11-30
HTTP2 & HPACK #pyfes 2013-11-30HTTP2 & HPACK #pyfes 2013-11-30
HTTP2 & HPACK #pyfes 2013-11-30Jxck Jxck
 
Network server in go #gocon 2013-11-14
Network server in go  #gocon 2013-11-14Network server in go  #gocon 2013-11-14
Network server in go #gocon 2013-11-14Jxck Jxck
 
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28Jxck Jxck
 
Http2.0 Guide 2013-08-14 #http2study
Http2.0 Guide 2013-08-14 #http2studyHttp2.0 Guide 2013-08-14 #http2study
Http2.0 Guide 2013-08-14 #http2studyJxck Jxck
 
Gtug girls meetup web socket handson
Gtug girls meetup   web socket handsonGtug girls meetup   web socket handson
Gtug girls meetup web socket handsonJxck Jxck
 
Next generation web talk @cross2013
Next generation web talk @cross2013Next generation web talk @cross2013
Next generation web talk @cross2013Jxck Jxck
 
Nodefest2011-Live
Nodefest2011-LiveNodefest2011-Live
Nodefest2011-LiveJxck Jxck
 
Test it in Node.js
Test it in Node.jsTest it in Node.js
Test it in Node.jsJxck Jxck
 

Mehr von Jxck Jxck (20)

Http2 on go1.6rc2
Http2 on go1.6rc2Http2 on go1.6rc2
Http2 on go1.6rc2
 
ORTC SVC SimulCast
ORTC SVC SimulCastORTC SVC SimulCast
ORTC SVC SimulCast
 
HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2HTTP2 時代の Web - web over http2
HTTP2 時代の Web - web over http2
 
Isomorphic Architecture & Interface
Isomorphic Architecture & InterfaceIsomorphic Architecture & Interface
Isomorphic Architecture & Interface
 
HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会HTTP2 RFC 発行記念祝賀会
HTTP2 RFC 発行記念祝賀会
 
Extensible web #html5j
Extensible web #html5jExtensible web #html5j
Extensible web #html5j
 
Extensible web
Extensible webExtensible web
Extensible web
 
HTTP2Study chronicle #http2conf
HTTP2Study chronicle #http2confHTTP2Study chronicle #http2conf
HTTP2Study chronicle #http2conf
 
mozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-divermozaicfm-ep8 #altJS @ll-diver
mozaicfm-ep8 #altJS @ll-diver
 
Updates of socket.io@1.0
Updates of socket.io@1.0Updates of socket.io@1.0
Updates of socket.io@1.0
 
Why HTML Form dose not support PUT & DELETE ?
Why HTML Form dose not support PUT & DELETE ?Why HTML Form dose not support PUT & DELETE ?
Why HTML Form dose not support PUT & DELETE ?
 
Next generation web talk @cross2014
Next generation web talk @cross2014Next generation web talk @cross2014
Next generation web talk @cross2014
 
HTTP2 & HPACK #pyfes 2013-11-30
HTTP2 & HPACK #pyfes 2013-11-30HTTP2 & HPACK #pyfes 2013-11-30
HTTP2 & HPACK #pyfes 2013-11-30
 
Network server in go #gocon 2013-11-14
Network server in go  #gocon 2013-11-14Network server in go  #gocon 2013-11-14
Network server in go #gocon 2013-11-14
 
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
SPDY & HTTP2.0 & QUIC - #bpstudy 2013-08-28
 
Http2.0 Guide 2013-08-14 #http2study
Http2.0 Guide 2013-08-14 #http2studyHttp2.0 Guide 2013-08-14 #http2study
Http2.0 Guide 2013-08-14 #http2study
 
Gtug girls meetup web socket handson
Gtug girls meetup   web socket handsonGtug girls meetup   web socket handson
Gtug girls meetup web socket handson
 
Next generation web talk @cross2013
Next generation web talk @cross2013Next generation web talk @cross2013
Next generation web talk @cross2013
 
Nodefest2011-Live
Nodefest2011-LiveNodefest2011-Live
Nodefest2011-Live
 
Test it in Node.js
Test it in Node.jsTest it in Node.js
Test it in Node.js
 

Real Time App with Node.js

  • 1. 2011 7 27
  • 2. Jack 2011 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 files 2011 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.js 2011 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. Jack 2011 7 27