Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Node - Express - Socket.io
Search
nctunba
May 09, 2012
1
420
Node - Express - Socket.io
nctunba
May 09, 2012
Tweet
Share
More Decks by nctunba
See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
380
被 Qt 快樂的玩弄 part 1
nctunba
1
270
Python
nctunba
3
520
node
nctunba
9
50k
jQuery
nctunba
9
610
JS
nctunba
11
640
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Designing Experiences People Love
moore
139
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Scaling GitHub
holman
459
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
302
45k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Transcript
Node.js 實戰 即時網頁聊天室
聊天室 網頁介面 即時
聊天室 網頁介面 即時 架網站 全雙工
聊天室 Express Socket.io 架網站 全雙工
Express http://expressjs.com
小範例 var express = require('express'); var app = express.createServer(); app.get('/',
function(req, res){ res.send('Hello World'); }); app.listen(3000);
安裝 + 懶人專案生成 npm install -g express express chatroom
閹割 public/ routes/ views/ app.js Package.json
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);
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>
Socket.io http://socket.io
小範例 瀏覽器端 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); });
安裝 npm install socket.io
app.js var app = module.exports = express.createServer(), io = require('socket.io').listen(app);
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>
None
app.js // 當有客戶端連線進來 ... io.sockets.on('connection', function (socket) { socket.emit('hello', 'hello
client'); socket.on('hey', function (data) { console.log(data); }); });
public/javascripts/main.js // 連線到伺服器 var socket = io.connect(); socket.on('hello', function (data)
{ console.log(data); socket.emit('hey', 'hey server'); })
結果 瀏覽器端 hello client 伺服器端 hey server
恭喜你剛 成功試驗 Node–Express–Socket.io 殺手組合
剩下的靠你自己 :p