Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node - Express - Socket.io

Avatar for nctunba nctunba
May 09, 2012
1
420

Node - Express - Socket.io

Avatar for nctunba

nctunba

May 09, 2012
Tweet

More Decks by nctunba

See All by nctunba
被 Qt 快樂的玩弄
Avatar for nctunba nctunba
2
400
被 Qt 快樂的玩弄 part 1
Avatar for nctunba nctunba
1
290
Python
Avatar for nctunba nctunba
3
520
node
Avatar for nctunba nctunba
9
50k
jQuery
Avatar for nctunba nctunba
9
610
JS
Avatar for nctunba nctunba
11
640

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Done Done
Avatar for chrislema chrislema
185
16k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.8k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k

Transcript

  1. Node.js 實戰 即時網頁聊天室

  2. 聊天室 網頁介面 即時

  3. 聊天室 網頁介面 即時 架網站 全雙工

  4. 聊天室 Express Socket.io 架網站 全雙工

  5. Express http://expressjs.com

  6. 小範例 var express = require('express'); var app = express.createServer(); app.get('/',

    function(req, res){ res.send('Hello World'); }); app.listen(3000);

  7. 安裝 + 懶人專案生成 npm install -g express express chatroom

  8. 閹割 public/ routes/ views/ app.js Package.json

  9. app.js var express = require('express'); , routes = require('./routes'); app.configure(function(){

    app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + '/public')); }); app.get('/', routes.index);

  10. public/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chatroom</title> <link href="stylesheets/style.css"

    rel="stylesheet" type="text/css"> <script src="javascripts/jquery-1.7.2.min.js"></script> </head> <body> </body> </html>

  11. Socket.io http://socket.io

  12. 小範例 瀏覽器端 socket.on('hello', function (data) { console.log(data); socket.emit('hey', 'hey server');

    }); 伺服器端 socket.emit('hello', 'hello client'); socket.on('hey', function (data) { console.log(data); });

  13. 安裝 npm install socket.io

  14. app.js var app = module.exports = express.createServer(), io = require('socket.io').listen(app);

  15. public/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chatroom</title> <link href="stylesheets/style.css"

    rel="stylesheet" type="text/css"> <script src="javascripts/jquery-1.7.2.min.js"></script> <script src="/socket.io/socket.io.js"></script> </head> <body> </body> </html>
  16. None

  17. app.js // 當有客戶端連線進來 ... io.sockets.on('connection', function (socket) { socket.emit('hello', 'hello

    client'); socket.on('hey', function (data) { console.log(data); }); });

  18. public/javascripts/main.js // 連線到伺服器 var socket = io.connect(); socket.on('hello', function (data)

    { console.log(data); socket.emit('hey', 'hey server'); })

  19. 結果 瀏覽器端 hello client 伺服器端 hey server

  20. 恭喜你剛 成功試驗 Node–Express–Socket.io 殺手組合

  21. 剩下的靠你自己 :p