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
最近のVS Codeで気になるニュース 2025/01
74th
1
250
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Domain-Driven Transformation
hschwentner
2
1.9k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Grafana Cloudとソラカメ
devoc
0
140
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
It's Worth the Effort
3n
184
28k
Automating Front-end Workflow
addyosmani
1367
200k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
KATA
mclloyd
29
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Applications with DynamoDB
mza
93
6.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