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
280
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
320
Python as numbe rcrunching glue
xieren58
1
88
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
440
Goで作る、開発・CI環境
sin392
0
130
CursorはMCPを使った方が良いぞ
taigakono
1
190
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
VS Code Update for GitHub Copilot
74th
1
460
GoのGenericsによるslice操作との付き合い方
syumai
3
690
GraphRAGの仕組みまるわかり
tosuri13
8
500
XSLTで作るBrainfuck処理系
makki_d
0
210
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making Projects Easy
brettharned
116
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Scaling GitHub
holman
459
140k
Practical Orchestrator
shlominoach
188
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Building an army of robots
kneath
306
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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