Node - Express - Socket.io

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