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
410
Node - Express - Socket.io
nctunba
May 09, 2012
Tweet
Share
More Decks by nctunba
See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
340
被 Qt 快樂的玩弄 part 1
nctunba
1
230
Python
nctunba
3
510
node
nctunba
9
49k
jQuery
nctunba
9
600
JS
nctunba
11
600
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building Applications with DynamoDB
mza
88
5.6k
Navigating Team Friction
lara
179
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
What's in a price? How to price your products and services
michaelherold
238
11k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
For a Future-Friendly Web
brad_frost
172
9k
Done Done
chrislema
178
15k
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