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
390
被 Qt 快樂的玩弄 part 1
nctunba
1
280
Python
nctunba
3
520
node
nctunba
9
50k
jQuery
nctunba
9
610
JS
nctunba
11
640
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Automating Front-end Workflow
addyosmani
1370
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Designing for Performance
lara
609
69k
KATA
mclloyd
30
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Being A Developer After 40
akosma
90
590k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Music & Morning Musume
bryan
46
6.6k
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