從零開始nodejs系列文章，將介紹如何利Javascript作爲服務端腳本，經過Nodejs框架web開發。Nodejs框架是基於V8的引擎，是目前速度最快的Javascript引擎。chrome瀏覽器就基於V8，同時打開20-30個網頁都很流暢。Nodejs標準的web開發框架Express，能夠幫助咱們迅速創建web站點，比起PHP的開發效率更高，並且學習曲線更低。很是適合小型網站，個性化網站，咱們本身的Geek網站！！javascript
關於做者css
- 張丹(Conan), 程序員Java,R,PHP,Javascript
- weibo：@Conan_Z
- blog: http://blog.fens.me
- email: bsspirit@gmail.com
轉載請註明出處：
http://blog.fens.me/nodejs-socketio-chat/html
前言java
網絡聊天室在web1.0的時代就出現了，但當時技術支持比較有限，大都是經過瀏覽器插件BHO，JavaApplet，Flash實現的。現在HTML5技術風起雲涌，經過websocket實現的網絡聊天室，被定義爲websocket的第一個實驗，就像Hello World同樣的簡單。node
今天我也動手完成了這個實驗，感受真的很爽！jquery
目錄git
- socket.io介紹
- 服務器端和客戶端通訊設計
- 服務器端實現
- 客戶端實現
- 完整案例代碼
1. socket.io介紹
socket.io一個是基於Nodejs架構體系的，支持websocket的協議用於時時通訊的一個軟件包。socket.io 給跨瀏覽器構建實時應用提供了完整的封裝，socket.io徹底由javascript實現。程序員
基於Nodejs實現webscoket其餘的框架，請參考文章：Nodejs實現websocket的4種方式github
2. 服務器端和客戶端通訊設計
上圖中client1 和 server 描述通訊過程，client2描述對其餘的客戶端，經過廣播進行消息通訊。web
- client1向server發起鏈接請求
- server接受client的鏈接
- client1輸入登錄用戶名
- server返回歡迎語
- server經過廣播告訴其餘在線的用戶，client1已登錄
- client1發送聊天信息
- server返回聊天信息(可省略)
- server經過廣播告訴其餘在線的用戶，client1的聊天消息
- client1關閉鏈接，退出登錄
- server經過廣播告訴其餘在線的用戶，client1已退出
咱們看一下測試截圖：
- 左邊: aaa 登錄
- 右邊: bbb 登錄
- 左邊: aaa 收到 bbb登錄歡迎消息
- aaa 和 bbb 實現對話
- 右邊: bbb 刷新瀏覽自動退出
- 左邊: aaa 收到 bbb的退出消息
- 右邊: CCC 登錄
- 左邊: aaa 收到 CCC 登錄歡迎消息
- aaa 和 CCC 實現對話
3. 服務器端實現
咱們這裏使用socket.io和express3的混合模式，讓HTTP請求和WebSocket請求都使用3000端口。
服務器端實現，只有一個核心文件app.js。
//引入程序包
var express = require('express')
, path = require('path')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
//設置日誌級別
io.set('log level', 1);
//WebSocket鏈接監聽
io.on('connection', function (socket) {
socket.emit('open');//通知客戶端已鏈接
// 打印握手信息
// console.log(socket.handshake);
// 構造客戶端對象
var client = {
socket:socket,
name:false,
color:getColor()
}
// 對message事件的監聽
socket.on('message', function(msg){
var obj = {time:getTime(),color:client.color};
// 判斷是否是第一次鏈接，以第一條消息做爲用戶名
if(!client.name){
client.name = msg;
obj['text']=client.name;
obj['author']='System';
obj['type']='welcome';
console.log(client.name + ' login');
//返回歡迎語
socket.emit('system',obj);
//廣播新用戶已登錄
socket.broadcast.emit('system',obj);
}else{
//若是不是第一次的鏈接，正常的聊天消息
obj['text']=msg;
obj['author']=client.name;
obj['type']='message';
console.log(client.name + ' say: ' + msg);
// 返回消息（能夠省略）
socket.emit('message',obj);
// 廣播向其餘用戶發消息
socket.broadcast.emit('message',obj);
}
});
//監聽出退事件
socket.on('disconnect', function () {
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
};
// 廣播用戶已退出
socket.broadcast.emit('system',obj);
console.log(client.name + 'Disconnect');
});
});
//express基本配置
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
// 指定webscoket的客戶端的html文件
app.get('/', function(req, res){
res.sendfile('views/chat.html');
});
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var getTime=function(){
var date = new Date();
return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
var getColor=function(){
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
'orange','blue','blueviolet','brown','burlywood','cadetblue'];
return colors[Math.round(Math.random() * 10000 % colors.length)];
}
4. 客戶端實現
這裏咱們須要定義幾個文件：chat.html, chat.js, jquery.min.js, main.css
1). views/chat.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Socket.io - Simple chat</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="javascripts/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="javascripts/chat.js"></script> </head> <body> <h1>Socket.io - Simple chat room</h1> <div> <span id="status">Connecting...</span> <input type="text" id="input"/> </div> <div id="content"></div> </body> </html>
2). public/javascript/chat.js
$(function () {
var content = $('#content');
var status = $('#status');
var input = $('#input');
var myName = false;
//創建websocket鏈接
socket = io.connect('http://localhost:3000');
//收到server的鏈接確認
socket.on('open',function(){
status.text('Choose a name:');
});
//監聽system事件，判斷welcome或者disconnect，打印系統消息信息
socket.on('system',function(json){
var p = '';
if (json.type === 'welcome'){
if(myName==json.text) status.text(myName + ': ').css('color', json.color);
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Welcome ' + json.text +'</p>';
}else if(json.type == 'disconnect'){
p = '<p style="background:'+json.color+'">system @ '+ json.time+ ' : Bye ' + json.text +'</p>';
}
content.prepend(p);
});
//監聽message事件，打印消息信息
socket.on('message',function(json){
var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> @ '+ json.time+ ' : '+json.text+'</p>';
content.prepend(p);
});
//經過「回車」提交聊天信息
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
if (!msg) return;
socket.send(msg);
$(this).val('');
if (myName === false) {
myName = msg;
}
}
});
});
3). public/javascript/jquery.min.js
從jquery官方下載: http://jquery.com/
4). public/css/main.css
* {padding:0px; margin:0px;}
body{font-family:tahoma; font-size:12px;margin:10px;}
p {line-height:18px;padding:2px;}
div {width:500px;}
#content {
padding:5px;
background:#ddd;
border-radius:5px;
border:1px solid #CCC;
margin-top:10px;
}
#input {
border-radius:2px;
border:1px solid #ccc;
margin-top:10px;
padding:5px;
width:380px;
}
#status {
width:100px;
display:block;
float:left;
margin-top:15px;
}
5. 完整案例代碼
項目已經上傳到github: https://github.com/bsspirit/chat-websocket
下載，安裝，啓動服務器
git clone https://github.com/bsspirit/chat-websocket.git npm install node app.js
打開瀏覽器
能夠多打開幾個窗口，模擬不一樣用戶有的對話。
http://localhost:3000
作完實驗，感受棒極了。技術創新的革命！！