源碼&演示
在線演示 (heroku服務(wù)器網(wǎng)速略慢且免費(fèi)套餐是小水管瘾带，建議下載代碼本地運(yùn)行)
源碼可訪問項目的GitHub頁面下載
本地運(yùn)行方法：
命令行運(yùn)行npm install

模塊下載成功后姚淆，運(yùn)行node server啟動服務(wù)器

打開瀏覽器訪問localhost

下圖為效果預(yù)覽：

準(zhǔn)備工作
本文示例環(huán)境為Windows楞遏，Linux也就Node的安裝與命令行稍有區(qū)別寒匙，程序?qū)崿F(xiàn)部分基本與平臺無關(guān)零如。
Node相關(guān)
你需要在本機(jī)安裝Node.js（廢話）

多少需要一點(diǎn)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肖卧，然后從命令行運(yùn)行node server或者node server.js，服務(wù)器便可啟動了掸鹅，此刻我們可以在瀏覽器地址欄輸入localhost進(jìn)行訪問塞帐，也可以輸入本機(jī)IP127.0.0.1拦赠，都不用加端口，因為我們服務(wù)器監(jiān)聽的是默認(rèn)的80端口葵姥。當(dāng)然荷鼠，如果你機(jī)子上面80端口被其他程序占用了，可以選擇其他端口比如8080榔幸，這樣訪問的時候需要顯示地加上端口號localhost:8080允乐。

Express
首先通過npm進(jìn)行安裝
在我們的項目文件夾下打開命令行（tip: 按住Shift同時右擊，可以在右鍵菜單中找到’從此處打開命令行’選項）

在命令行中輸入 npm install express 回車進(jìn)行安裝

然后在server.js中通過require(‘express’)將其引入到項目中進(jìn)行使用

express是node.js中管理路由響應(yīng)請求的模塊削咆，根據(jù)請求的URL返回相應(yīng)的HTML頁面牍疏。這里我們使用一個事先寫好的靜態(tài)頁面返回給客戶端，只需使用express指定要返回的頁面的路徑即可态辛。如果不用這個包麸澜，我們需要將HTML代碼與后臺JavaScript代碼寫在一起進(jìn)行請求的響應(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標(biāo)簽
    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ā)送圖片和清除記錄计雌，將會在下面介紹其實(shí)現(xiàn)
socket.io
Node.js中使用socket的一個包。使用它可以很方便地建立服務(wù)器到客戶端的sockets連接玫霎，發(fā)送事件與接收特定事件凿滤。
同樣通過npm進(jìn)行安裝 npm install socket.io 。安裝后在node_modules文件夾下新生成了一個socket.io文件夾庶近，其中我們可以找到一個socket.io.js文件翁脆。將它引入到HTML頁面，這樣我們就可以在前端使用socket.io與服務(wù)器進(jìn)行通信了鼻种。

<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ù)進(jìn)行通信。具體工作模式可以看下面這個示例蛾洛。
比如我們在index.html里面有如下JavaScript代碼（假設(shè)你已經(jīng)在頁面放了一個ID為sendBtn的按鈕）：

<script type="text/javascript">
 var socket=io.connect(),//與服務(wù)器進(jìn)行連接
 button=document.getElementById('sendBtn');
 button.onclick=function(){
 socket.emit('foo', 'hello');//發(fā)送一個名為foo的事件养铸，并且傳遞一個字符串?dāng)?shù)據(jù)‘hello’
 }
</script>

上述代碼首先建立與服務(wù)器的連接，然后得到一個socket實(shí)例轧膘。之后如果頁面上面一個ID為sendBtn的按鈕被點(diǎn)擊的話钞螟，我們就通過這個socket實(shí)例發(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ù)器運(yùn)行新代碼查看效果，一切正常的話你會在點(diǎn)擊了頁面的按扭后熔任，在命令行窗口里看到輸出的’hello’字符串褒链。

一如之前所說，socket.io在前后端的句法是一致的疑苔，所以相反地甫匹，從服務(wù)器發(fā)送事件到客戶端，在客戶端接收并處理消息也是顯而易見的事件了惦费。這里只是簡單介紹兵迅，具體下面會通過發(fā)送聊天消息進(jìn)一步介紹。
基本頁面
有了上面一些基礎(chǔ)的了解薪贫，下面可以進(jìn)入聊天程序功能的開發(fā)了恍箭。
首先我們構(gòu)建主頁面。因為是比較大眾化的應(yīng)用了后雷，界面不用多想季惯，腦海中已經(jīng)有大致的雛形，它有一個呈現(xiàn)消息的主窗體臀突，還有一個輸入消息的文本框勉抓，同時需要一個發(fā)送消息的按鈕，這三個是必備的候学。
另外就是藕筋，這里還準(zhǔn)備實(shí)現(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

此刻打開頁面你看到的是一個淡黑色的遮罩層县好，而接下來我們要實(shí)現(xiàn)的是用戶昵稱的輸入與服務(wù)器登入。這個遮罩層用于顯示連接到服務(wù)器的狀態(tài)信息暖混，而當(dāng)連接完成之后缕贡，會出現(xiàn)一個輸入框用于昵稱輸入。

上面HTML代碼里已經(jīng)看到拣播，我們將www/scripts/hichat.js文件已經(jīng)引入到頁面了晾咪，下面開始寫一些基本的前端js開始實(shí)現(xiàn)連接功能。
定義一個全局變量用于我們整個程序的開發(fā)HiChat诫尽，同時使用window.onload在頁面準(zhǔn)備好之后實(shí)例化HiChat禀酱，調(diào)用其init方法運(yùn)行我們的程序。

www/scripts/Hichat.js
window.onload = function() {
    //實(shí)例并初始化我們的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ù)器送淆，便顯示昵稱輸入框。當(dāng)用戶輸入昵稱后怕轿，便可以在服務(wù)器后臺接收到然后進(jìn)行下一步的處理了偷崩。

設(shè)置昵稱
我們要求連接的用戶需要首先設(shè)置一個昵稱，且這個昵稱還要唯一撞羽，也就是不能與別人同名阐斜。一是方便用戶區(qū)分，二是為了統(tǒng)計在線人數(shù)诀紊，同時也方便維護(hù)一個保存所有用戶昵稱的數(shù)組谒出。
為此在后臺server.js中，我們創(chuàng)建一個名叫users的全局?jǐn)?shù)組變量，當(dāng)一個用戶設(shè)置好昵稱發(fā)送到服務(wù)器的時候笤喳，將昵稱壓入users數(shù)組为居。同時注意，如果用戶斷線離開了杀狡，也要相應(yīng)地從users數(shù)組中移除以保證數(shù)據(jù)的正確性蒙畴。
在前臺，輸入昵稱點(diǎn)擊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 {
        //否則輸入框獲得焦點(diǎn)
        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ā)送當(dāng)前登陸用戶的昵稱 
        };
    });
});

需要解釋一下的是，在connection事件的回調(diào)函數(shù)中干跛，socket表示的是當(dāng)前連接到服務(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ù)組，同時將其作為一個屬性存到當(dāng)前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();//讓消息輸入框獲得焦點(diǎn)
 });

在線統(tǒng)計
這里實(shí)現(xiàn)顯示在線用戶數(shù)及在聊天主界面中以系統(tǒng)身份顯示用戶連接離開等信息。
上面server.js中除了loginSuccess事件秆撮，后面還有一句代碼四濒，通過io.sockets.emit 向所有用戶發(fā)送了一個system事件，傳遞了剛登入用戶的昵稱，所有人接收到這個事件后盗蟆，會在聊天窗口顯示一條系統(tǒng)消息’某某加入了聊天室’戈二。同時考慮到在前端我們無法得知用戶是進(jìn)入還是離開，所以在這個system事件里我們多傳遞一個數(shù)據(jù)來表明用戶是進(jìn)入還是離開喳资。
將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字符串。