Node.js實戰即時網頁聊天室

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>

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

Node.js實戰即時網頁聊天室

Node.js實戰即時網頁聊天室

xieren58

More Decks by xieren58

Other Decks in Programming

Featured

Transcript