今天我來實作一個簡單的聊天室,後台用nodejs, 客戶端與服務端通訊用socket.io,這是一個比較成熟的websocket框架.
初始工作
1.安裝express, 用這個來託管socket.io,以及靜態頁面,命令npm install express --save,--save可以使套件添加到package.json檔案裡.
2.安裝socket.io,指令npm install socket.io --save.
寫服務端程式碼
首先我們透過express來託管網站,並附加到socket.io實例裡,因為socket.io初次連線需要http協定
var express = require('express'),
io = require('socket.io');
var app = express();
app.use(express.static(__dirname));
var server = app.listen(8888);
var ws = io.listen(server);
添加伺服器連接事件,當客戶端連接成功之後,發送公告告訴所有在線用戶,並且,當用戶發送訊息時,發送廣播通知其它用戶.
ws.on('connection', function(client){
console.log('
client.on('join', function(msg){
// 檢查是否有重複
if(checkNickname(msg)){
client.emit('nickname', '暱稱有重複!');
}else{
client.nickname = msg;
ws.sockets.emit('announcement', '系統', msg ' 加入了聊天室!');
}
});
// 監聽傳送訊息
client.on('send.message', function(msg){
client.broadcast.emit('send.message',client.nickname, msg);
});
// 斷開連線時,通知其它使用者
client.on('disconnect', function(){
if(client.nickname){
client.broadcast.emit('send.message','系統', client.nickname '離開聊天室!');
}
})
})
由於客戶端是透過暱稱來識別的,所以服務端需要一個偵測暱稱重複的函數
// 檢查暱稱是否重複
var checkNickname = function(name){
for(var k in ws.sockets.sockets){
if(ws.sockets.sockets.hasOwnProperty(k)){
if(ws.sockets.sockets[k] && ws.sockets.sockets[k].nickname == name){
return true;
}
}
}
return false;
}
寫客服端程式碼
由於服務端採用第三方websokcet框架,所以前端頁面需要單獨引用socket.io客戶端程式碼,原始檔可以從socket.io模組裡找,windows下路徑為node_modulessocket.ionode_modulessocket.io-clientdist,這裡有開發版和壓縮版的,預設引用開發版就行.
前端主要處理輸入暱稱檢查,訊息處理,完整程式碼如下: