源碼&演示
在線演示 (heroku服務(wù)器網(wǎng)速略慢且免費套餐是小水管，建議下載代碼本地運行)
源碼可訪問項目的GitHub頁面下載
本地運行方法：
命令行運行npm install
模塊下載成功后，運行node server啟動服務(wù)器
打開瀏覽器訪問localhost
下圖為效果預覽：
準備工作
本文示例環(huán)境為Windows，Linux也就Node的安裝與命令行稍有區(qū)別，程序?qū)崿F(xiàn)部分基本與平臺無關(guān)。
Node相關(guān)
你需要在本機安裝Node.js（廢話）
多少需要一點Node.js的基礎(chǔ)知識，如果還未曾了解過Node.js，這里有一篇不錯的入門教程
然后我們就可以開始創(chuàng)建一個簡單的HTTP服務(wù)器啦。
類似下面非常簡單的代碼，它創(chuàng)建了一個HTTP服務(wù)器并監(jiān)聽系統(tǒng)的80端口。
//node server example
//引入http模塊
var http = require('http'),
//創(chuàng)建一個服務(wù)器
server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.write('hello world!');
res.end();
});
//監(jiān)聽80端口
server.listen(80);
console.log('server started');
將其保存為一個js文件比如server.js，然后從命令行運行node server或者node server.js，服務(wù)器便可啟動了，此刻我們可以在瀏覽器地址欄輸入localhost進行訪問，也可以輸入本機IP127.0.0.1，都不用加端口，因為我們服務(wù)器監(jiān)聽的是默認的80端口。當然，如果你機子上面80端口被其他程序占用了，可以選擇其他端口比如8080，這樣訪問的時候需要顯示地加上端口號localhost:8080。
Express
首先通過npm進行安裝
在我們的項目文件夾下打開命令行（tip: 按住Shift同時右擊，可以在右鍵菜單中找到’從此處打開命令行’選項）
在命令行中輸入 npm install express 回車進行安裝
然后在server.js中通過require(‘express’)將其引入到項目中進行使用
express是node.js中管理路由響應(yīng)請求的模塊，根據(jù)請求的URL返回相應(yīng)的HTML頁面。這里我們使用一個事先寫好的靜態(tài)頁面返回給客戶端，只需使用express指定要返回的頁面的路徑即可。如果不用這個包，我們需要將HTML代碼與后臺JavaScript代碼寫在一起進行請求的響應(yīng)，不太方便。
//返回一個簡單的HTML內(nèi)容
server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/html' //將返回類型由text/plain改為text/html
});
res.write('<h1>hello world!</h1>'); //返回HTML標簽
res.end();
});
在存放上一步創(chuàng)建的server.js文件的地方，我們新建一個文件夾名字為www用來存放我們的網(wǎng)頁文件，包括圖片以及前端的js文件等。假設(shè)已經(jīng)在www文件夾下寫好了一個index.html文件（將在下一步介紹，這一步你可以放一個空的HTML文件），則可以通過以下方式使用express將該頁面返回到瀏覽器。可以看到較最開始，我們的服務(wù)器代碼簡潔了不少。
//使用express模塊返回靜態(tài)頁面
var express = require('express'), //引入express模塊
app = express(),
server = require('http').createServer(app);
app.use('/', express.static(__dirname + '/www')); //指定靜態(tài)HTML文件的位置
server.listen(80);
其中有四個按鈕，分別是設(shè)置字體顏色，發(fā)送表情，發(fā)送圖片和清除記錄，將會在下面介紹其實現(xiàn)
socket.io
Node.js中使用socket的一個包。使用它可以很方便地建立服務(wù)器到客戶端的sockets連接，發(fā)送事件與接收特定事件。
同樣通過npm進行安裝 npm install socket.io 。安裝后在node_modules文件夾下新生成了一個socket.io文件夾，其中我們可以找到一個socket.io.js文件。將它引入到HTML頁面，這樣我們就可以在前端使用socket.io與服務(wù)器進行通信了。
<script src="/socket.io/socket.io.js"></script>
同時服務(wù)器端的server.js里跟使用express一樣，也要通過require(‘socket.io’)將其引入到項目中，這樣就可以在服務(wù)器端使用socket.io了。
使用socket.io，其前后端句法是一致的，即通過socket.emit()來激發(fā)一個事件，通過socket.on()來偵聽和處理對應(yīng)事件。這兩個事件通過傳遞的參數(shù)進行通信。具體工作模式可以看下面這個示例。
比如我們在index.html里面有如下JavaScript代碼（假設(shè)你已經(jīng)在頁面放了一個ID為sendBtn的按鈕）：
<script type="text/javascript">
var socket=io.connect(),//與服務(wù)器進行連接
button=document.getElementById('sendBtn');
button.onclick=function(){
socket.emit('foo', 'hello');//發(fā)送一個名為foo的事件，并且傳遞一個字符串數(shù)據(jù)‘hello’
}
</script>
上述代碼首先建立與服務(wù)器的連接，然后得到一個socket實例。之后如果頁面上面一個ID為sendBtn的按鈕被點擊的話，我們就通過這個socket實例發(fā)起一個名為foo的事件，同時傳遞一個hello字符串信息到服務(wù)器。
與此同時，我們需要在服務(wù)器端寫相應(yīng)的代碼來處理這個foo事件并接收傳遞來的數(shù)據(jù)。為此，我們在server.js中可以這樣寫：
//服務(wù)器及頁面響應(yīng)部分
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server); //引入socket.io模塊并綁定到服務(wù)器
app.use('/', express.static(__dirname + '/www'));
server.listen(80);
//socket部分
io.on('connection', function(socket) {
//接收并處理客戶端發(fā)送的foo事件
socket.on('foo', function(data) {
//將消息輸出到控制臺
console.log(data);
})
});
現(xiàn)在Ctrl+C關(guān)閉之前啟動的服務(wù)器，再次輸入node server啟動服務(wù)器運行新代碼查看效果，一切正常的話你會在點擊了頁面的按扭后，在命令行窗口里看到輸出的’hello’字符串。
一如之前所說，socket.io在前后端的句法是一致的，所以相反地，從服務(wù)器發(fā)送事件到客戶端，在客戶端接收并處理消息也是顯而易見的事件了。這里只是簡單介紹，具體下面會通過發(fā)送聊天消息進一步介紹。
基本頁面
有了上面一些基礎(chǔ)的了解，下面可以進入聊天程序功能的開發(fā)了。
首先我們構(gòu)建主頁面。因為是比較大眾化的應(yīng)用了，界面不用多想，腦海中已經(jīng)有大致的雛形，它有一個呈現(xiàn)消息的主窗體，還有一個輸入消息的文本框，同時需要一個發(fā)送消息的按鈕，這三個是必備的。
另外就是，這里還準備實現(xiàn)以下四個功能，所以界面上還有設(shè)置字體顏色，發(fā)送表情，發(fā)送圖片和清除記錄四個按鈕。
最后的頁面也就是先前截圖展示的那們，而代碼如下：
www/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Wayou">
<meta name="description" content="hichat | a simple chat application built with node.js and websocket">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hichat</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div class="banner">
<h1>HiChat :)</h1>
<span id="status"></span>
</div>
<div id="historyMsg">
</div>
<div class="controls" >
<div class="items">
<input id="colorStyle" type="color" placeHolder='#000' title="font color" />
<input id="emoji" type="button" value="emoji" title="emoji" />
<label for="sendImage" class="imageLable">
<input type="button" value="image" />
<input id="sendImage" type="file" value="image"/>
</label>
<input id="clearBtn" type="button" value="clear" title="clear screen" />
</div>
<textarea id="messageInput" placeHolder="enter to send"></textarea>
<input id="sendBtn" type="button" value="SEND">
<div id="emojiWrapper">
</div>
</div>
</div>
<div id="loginWrapper">
<p id="info">connecting to server...</p>
<div id="nickWrapper">
<input type="text" placeHolder="nickname" id="nicknameInput" />
<input type="button" value="OK" id="loginBtn" />
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="scripts/hichat.js"></script>
</body>
</html>
樣式文件 www/styles/main.css
html, body {
margin: 0;
background-color: #efefef;
font-family: sans-serif;
}
.wrapper {
width: 500px;
height: 640px;
padding: 5px;
margin: 0 auto;
background-color: #ddd;
}
#loginWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(5, 5, 5, .6);
text-align: center;
color: #fff;
display: block;
padding-top: 200px;
}
#nickWrapper {
display: none;
}
.banner {
height: 80px;
width: 100%;
}
.banner p {
float: left;
display: inline-block;
}
.controls {
height: 100px;
margin: 5px 0px;
position: relative;
}
#historyMsg {
height: 400px;
background-color: #fff;
overflow: auto;
padding: 2px;
}
#historyMsg img {
max-width: 99%;
}
.timespan {
color: #ddd;
}
.items {
height: 30px;
}
#colorStyle {
width: 50px;
border: none;
padding: 0;
}
/*custom the file input*/
.imageLable {
position: relative;
}
#sendImage {
position: absolute;
width: 52px;
left: 0;
opacity: 0;
overflow: hidden;
}
/*end custom file input*/
#messageInput {
width: 440px;
max-width: 440px;
height: 90px;
max-height: 90px;
}
#sendBtn {
width: 50px;
height: 96px;
float: right;
}
#emojiWrapper {
display: none;
width: 500px;
bottom: 105px;
position: absolute;
background-color: #aaa;
box-shadow: 0 0 10px #555;
}
#emojiWrapper img {
margin: 2px;
padding: 2px;
width: 25px;
height: 25px;
}
#emojiWrapper img:hover {
background-color: blue;
}
.emoji{
display: inline;
}
footer {
text-align: center;
}
為了讓項目有一個良好的目錄結(jié)構(gòu)便于管理，這里在www文件夾下又新建了一個styles文件夾存放樣式文件main.css，然后新建一個scripts文件夾存放前端需要使用的js文件比如hichat.js（我們前端所有的js代碼會放在這個文件中），而我們的服務(wù)器js文件server.js位置不變還是放在最外層。
同時再新建一個content文件夾用于存放其他資源比如圖片等，其中content文件夾里再建一個emoji文件夾用于存入表情gif圖，后面會用到。最后我們項目的目錄結(jié)構(gòu)應(yīng)該是這樣的了：
├─node_modules
└─www
├─content
│ └─emoji
├─scripts
└─styles
此刻打開頁面你看到的是一個淡黑色的遮罩層，而接下來我們要實現(xiàn)的是用戶昵稱的輸入與服務(wù)器登入。這個遮罩層用于顯示連接到服務(wù)器的狀態(tài)信息，而當連接完成之后，會出現(xiàn)一個輸入框用于昵稱輸入。
上面HTML代碼里已經(jīng)看到，我們將www/scripts/hichat.js文件已經(jīng)引入到頁面了，下面開始寫一些基本的前端js開始實現(xiàn)連接功能。
定義一個全局變量用于我們整個程序的開發(fā)HiChat，同時使用window.onload在頁面準備好之后實例化HiChat，調(diào)用其init方法運行我們的程序。
www/scripts/Hichat.js
window.onload = function() {
//實例并初始化我們的hichat程序
var hichat = new HiChat();
hichat.init();
};
//定義我們的hichat類
var HiChat = function() {
this.socket = null;
};
//向原型添加業(yè)務(wù)方法
HiChat.prototype = {
init: function() {//此方法初始化程序
var that = this;
//建立到服務(wù)器的socket連接
this.socket = io.connect();
//監(jiān)聽socket的connect事件，此事件表示連接已經(jīng)建立
this.socket.on('connect', function() {
//連接到服務(wù)器后，顯示昵稱輸入框
document.getElementById('info').textContent = 'get yourself a nickname :)';
document.getElementById('nickWrapper').style.display = 'block';
document.getElementById('nicknameInput').focus();
});
}
};
上面的代碼定義了整個程序需要使用的類HiChat，之后我們處理消息顯示消息等所有業(yè)務(wù)邏輯均寫在這個類里面。
首先定義了一個程序的初始化方法，這里面初始化socket，監(jiān)聽連接事件，一旦連接到服務(wù)器，便顯示昵稱輸入框。當用戶輸入昵稱后，便可以在服務(wù)器后臺接收到然后進行下一步的處理了。
設(shè)置昵稱
我們要求連接的用戶需要首先設(shè)置一個昵稱，且這個昵稱還要唯一，也就是不能與別人同名。一是方便用戶區(qū)分，二是為了統(tǒng)計在線人數(shù)，同時也方便維護一個保存所有用戶昵稱的數(shù)組。
為此在后臺server.js中，我們創(chuàng)建一個名叫users的全局數(shù)組變量，當一個用戶設(shè)置好昵稱發(fā)送到服務(wù)器的時候，將昵稱壓入users數(shù)組。同時注意，如果用戶斷線離開了，也要相應(yīng)地從users數(shù)組中移除以保證數(shù)據(jù)的正確性。
在前臺，輸入昵稱點擊OK提交后，我們需要發(fā)起一個設(shè)置昵稱的事件以便服務(wù)器偵聽到。將以下代碼添加到之前的init方法中。
www/scripts/hichat.js
//昵稱設(shè)置的確定按鈕
document.getElementById('loginBtn').addEventListener('click', function() {
var nickName = document.getElementById('nicknameInput').value;
//檢查昵稱輸入框是否為空
if (nickName.trim().length != 0) {
//不為空，則發(fā)起一個login事件并將輸入的昵稱發(fā)送到服務(wù)器
that.socket.emit('login', nickName);
} else {
//否則輸入框獲得焦點
document.getElementById('nicknameInput').focus();
};
}, false);
server.js
//服務(wù)器及頁面部分
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
users=[];//保存所有在線用戶的昵稱
app.use('/', express.static(__dirname + '/www'));
server.listen(80);
//socket部分
io.on('connection', function(socket) {
//昵稱設(shè)置
socket.on('login', function(nickname) {
if (users.indexOf(nickname) > -1) {
socket.emit('nickExisted');
} else {
socket.userIndex = users.length;
socket.nickname = nickname;
users.push(nickname);
socket.emit('loginSuccess');
io.sockets.emit('system', nickname); //向所有連接到服務(wù)器的客戶端發(fā)送當前登陸用戶的昵稱
};
});
});
需要解釋一下的是，在connection事件的回調(diào)函數(shù)中，socket表示的是當前連接到服務(wù)器的那個客戶端。所以代碼socket.emit(‘foo’)則只有自己收得到這個事件，而socket.broadcast.emit(‘foo’)則表示向除自己外的所有人發(fā)送該事件，另外，上面代碼中，io表示服務(wù)器整個socket連接，所以代碼io.sockets.emit(‘foo’)表示所有人都可以收到該事件。
上面代碼先判斷接收到的昵稱是否已經(jīng)存在在users中，如果存在，則向自己發(fā)送一個nickExisted事件，在前端接收到這個事件后我們顯示一條信息通知用戶。
將下面代碼添加到hichat.js的inti方法中。
www/scripts/hichat.js
this.socket.on('nickExisted', function() {
document.getElementById('info').textContent = '!nickname is taken, choose another pls'; //顯示昵稱被占用的提示
});
如果昵稱沒有被其他用戶占用，則將這個昵稱壓入users數(shù)組，同時將其作為一個屬性存到當前socket變量中，并且將這個用戶在數(shù)組中的索引（因為是數(shù)組最后一個元素，所以索引就是數(shù)組的長度users.length）也作為屬性保存到socket中，后面會用到。最后向自己發(fā)送一個loginSuccess事件，通知前端登陸成功，前端接收到這個成功消息后將灰色遮罩層移除顯示聊天界面。
將下面代碼添加到hichat.js的inti方法中。
www/scripts/hichat.js
this.socket.on('loginSuccess', function() {
document.title = 'hichat | ' + document.getElementById('nicknameInput').value;
document.getElementById('loginWrapper').style.display = 'none';//隱藏遮罩層顯聊天界面
document.getElementById('messageInput').focus();//讓消息輸入框獲得焦點
});
在線統(tǒng)計
這里實現(xiàn)顯示在線用戶數(shù)及在聊天主界面中以系統(tǒng)身份顯示用戶連接離開等信息。
上面server.js中除了loginSuccess事件，后面還有一句代碼，通過io.sockets.emit 向所有用戶發(fā)送了一個system事件，傳遞了剛登入用戶的昵稱，所有人接收到這個事件后，會在聊天窗口顯示一條系統(tǒng)消息’某某加入了聊天室’。同時考慮到在前端我們無法得知用戶是進入還是離開，所以在這個system事件里我們多傳遞一個數(shù)據(jù)來表明用戶是進入還是離開。
將server.js中l(wèi)ogin事件更改如下：
server.js
socket.on('login', function(nickname) {
if (users.indexOf(nickname) > -1) {
socket.emit('nickExisted');
} else {
socket.userIndex = users.length;
socket.nickname = nickname;
users.push(nickname);
socket.emit('loginSuccess');
io.sockets.emit('system', nickname, users.length, 'login');
};
});
較之前，多傳遞了一個login字符串。
