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.js實戰 即時網頁聊天室
Search
xieren58
November 19, 2012
Programming
1
270
Node.js實戰 即時網頁聊天室
Node.js實戰
即時網頁聊天室
xieren58
November 19, 2012
Tweet
Share
More Decks by xieren58
See All by xieren58
Python programming text and web mining
xieren58
2
310
Python as numbe rcrunching glue
xieren58
1
82
Other Decks in Programming
See All in Programming
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
WebDriver BiDiとは何なのか
yotahada3
1
140
Spring gRPC について / About Spring gRPC
mackey0225
0
220
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Software Architecture
hschwentner
6
2.1k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Why Our Code Smells
bkeepers
PRO
335
57k
KATA
mclloyd
29
14k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
RailsConf 2023
tenderlove
29
1k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Adopting Sorbet at Scale
ufuk
74
9.2k
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