最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想，真的不能怪我啊，因為最近的天氣實在是太！冷！了！好吧為了減少賴床的罪惡感，還是學(gǎo)點(diǎn)東(shì)西(qing)好了。不說廢話了，還是進入正題。

進入正題

這個丑陋無比的聊天室，暫時給他后面加個“v1.0”吧，畢竟也是沒有經過什么迭代，寫好就直接放出來了，當然也有很多可以再搞搞的地方，比如：

• ?支持發送圖片
• ?支持發送表情
• ?顯示在線用戶名單

其實這里還是有很多想象空間的，不是重點也就不展開說了。
在寫這個demo的時候，我是邊學邊寫的狀態，學習資料以劉哇勇大神的Node.js+Web Socket 打造即時聊天程序嗨聊為主，主流搜索引擎和我最喜歡的技術社區SegmentFault為輔。

源碼

源碼已經上傳至我的github, clone到本地以后在terminal中運行下面兩條命令：

npm install node server

然后打開瀏覽器，訪問localhost，就可以在不聯網的情況下看到這個demo啦。

預覽

輸入用戶名完成登陸

然后就可以開始和在線的人聊天了😏

準備工作

當然啦，Node.js是必不可少的，這里推薦兩個很棒的Node.js教程：

• Node入門
• Node.js包教不包會

Node.js可以實現用短短的幾行代碼就起一個服務器

var http = require('http'); http.createServer(function(request, response){response.writeHead(200, {'Content-type':'text/plain'});response.write('Hey you, my name is kyrieliu~');response.end(); }).listen(8080);

當你在Terminal執行這段代碼以后，訪問http://localhost/:8080，就可以看到一行字：Hey?you, my name is kyrieliu~
這就代表你的node服務已經架起來了，阿西，js寫后臺邏輯，用腳指頭想想都會覺得是一件很酷的事情呢😆

另外，還用到了兩個包模塊：

• express
• socket.io

express是node.js中管理路由響應請求的模塊，根據請求的URL返回相應的HTML頁面。這里我們使用一個事先寫好的靜態頁面返回給客戶端，只需使用express指定要返回的頁面的路徑即可。如果不用這個包，我們需要將HTML代碼與后臺JavaScript代碼寫在一起進行請求的響應，不太方便。

socket.io封裝了websocket，同時包含了其它的連接方式，比如Ajax。原因在于不是所有的瀏覽器都支持websocket，通過socket.io的封裝，你不用關心里面用了什么連接方式。你在任何瀏覽器里都可以使用socket.io來建立異步的連接。

UI

界面就像第一眼看到的那樣簡(chǒu)單(lòu)，不過“麻雀雖小，五臟俱全”，該有的東西還是得有，這里就直接貼DOM結構。

<div class="container chat-container"><!-- 標題展示信息 --><div class="row"></div><!-- 歷史消息 --><div class="row"><div class="col-md-6 col-md-offset-3 col-sm-12 historyMsg" id="historyMsg"></div></div><!-- 控制臺 --><div class="row"><div class="col-md-6 col-md-offset-3 col-sm-12 control"><div class="row control-row"></div></div></div><!-- 遮罩層 --><div id="loginWrapper" class="loginWrapper"></div></div>

直接看注釋，就能清晰的看到這只小麻雀的“心”、“肝”、“脾”、“肺”四個部分。（“腎”呢？哼，你以為我的新手機怎么來的？🙈）
至于那些辣眼睛的類名，是因為項目里用到了Bootstrap，也算是偷了個懶。

前端邏輯

UI搞定之后，思考一下這個聊天室的交互是怎么實現的。
“你前面不是說了，用websocket嘛。”
此話不假，不過這里我指的是交互，畢竟你寫一個程序的話，對程序內的邏輯必須做到“吹毛求疵”（我這個成語用對了沒😶）

• 與服務端建立連接
• 輸入昵稱完成登錄
• 發送消息
• 接受消息

仔細想想好像大概就這么多了，那就開始逐一攻破🚀

與服務端建立連接

這里要注意，因為是一個聊天系統，所以與服務端建立連接的方式不同于往常，這里用到的協議是HTTP?WebSocket，從而實現持久連接。
簡單的解釋一下，這里的“持久”，是相對于HTTP這種“非持久”的協議來說的（閣下的意思是，HTTP的夫人會很羨慕WebSocket的夫人咯）。
通過閱讀Ovear在知乎上的回答，大致說一下這兩個協議之間的區別。

HTTP

HTTP的生命周期大概是這樣的，一個request，一個response，這次請求就結束了；HTTP 1.1中進行了改進，增加了一個keep-alive，效果是在這次HTTP連接中，可以發送多個request，接受多個response，但本質上，request = response，也就是說，請求和響應永遠是一一對應的，沒有request時，服務端不能主動response。

WebSocket

當客戶端與服務端完成協議升級以后（HTTP -> WebSocket），就建立了一個持久連接，有多持久呢？這個連接可以持續存在知道客戶端或服務端某一方主動的關閉連接。與HTTP最大的不同是，此時的服務端可以主動推送消息給客戶端咯。在這個項目中，我們用socket.io這個包模塊來實現WebSocket，socket.io不僅實現了對WebSocket的封裝，還將連同Ajax輪詢和其他實時通信方式封裝成了通用的接口，這么做的原因是，當服務器不支持WebSocket時，可以轉換為其他的實現方式，嘖嘖嘖，堪稱縱享絲滑💋

接下來就是實現的部分，前端在引入了socket.io.js這個文件以后應該怎么做呢？
Talk is cheap, show you the CODE.

var socket = io.connect();

對，就是這么簡單，不信你去看官方文檔。

輸入昵稱完成登錄

這里的“登錄”，不是真正的登錄，當執行完io.connect()之后，這個連接就算已經建立了，這里是在處理一些交互上的行為。
在前端監聽一個connect事件，這個事件的觸發條件是：成功和服務端建立連接。

socket.on('connect',function(){//do something });

回調里面是此時要完成的DOM操作，比如：

改變提示文字（初始是“Connecting to server......”）

顯示遮蓋層

聚焦文本框

當用戶輸入自己的昵稱點擊登錄按鈕后，當前socket觸發一個login事件到服務端：

socket.emit('login',nickname);

攜帶一個參數，這個參數就是用戶輸入的昵稱。
當服務端對這個昵稱進行合法性檢測，通過時觸發：

socket.on('loginSuccess', function(){//1. 隱藏登錄層//2. 用戶可以愉快和別人聊天了~ });

如果用戶輸入的昵稱不合法，則觸發：

socket.on('loginFailed', function(){//1. 提示用戶昵稱哪里出問題了//2. 等待用戶重新輸入 });

注意這里的事件名稱，如login、loginSuccess、loginFailed都是自定義的，只要保證和服務端的一致就ok了。

發送消息

想像一下用戶發送消息這個動作，分解一下：輸入文本 -> 點擊發送。也就是這倆了，ok，這里需要給發送按鈕掛上一個事件，告訴服務端，“服務端服務端，這里是socket XXX，我給你發了一個消息哦，注意查收，over。”

socket.emit('msgSend',msg);

攜帶一個參數，即用戶的輸入。

接受消息

接受消息這個邏輯有三種情況

自己發送的消息

別人發送的消息

系統的提示信息

莫慌，一個一個來看。

自己發送的消息

自己發送的消息直接顯示在聊天消息的面板，接收自己發送的消息不用和后臺交互，只需要告訴后臺我給大家發了這條消息即可。當然啦，你也可以仿照微信對自己發送的消息進行處理：發送的瞬間將自己的消息添加聊天面板 -> 給旁邊放個小菊花或者loading的字樣 -> 與后臺進行交互 -> 成功則隱藏小菊花；失敗則將小菊花變成紅色感嘆號暗示用戶發送失敗。

別人發送的消息

現在就需要在前端建立一個響應服務端“有新消息”的監聽事件了。

socket.on('newMsg', function(nickname, msg){//顯示這條新消息 });

回調函數里面有兩個參數，nickname和msg，分別是消息發送者的昵稱和消息內容，這倆是怎么來的呢？不要急，后面會在服務端邏輯里面講到，這里你只需要知道，在前端接受新消息的時候，因為牽扯到展示新消息，所以需要這兩個參數。

系統的提示信息

關于系統的提示信息，主要分為兩個：

提示新加入和退出的用戶

展示當前在線的用戶數

大概是這個樣子，所以需要在前端對系統事件進行監聽

socket.on('system', function(nickname, count, type){//1.根據系統事件類型（新加入或離開）來提示用戶//2.修改在線用戶數量 });

這里的三個參數也都是必不可少的，nickname代表觸發系統事件的用戶的昵稱，count表示當前在線的用戶數量，type表示事件類型（加入/離開）。同樣，這三個參數也都是服務端傳過來的。

后臺邏輯

與前端對應，后臺的邏輯主要分為以下幾個部分

起服務

建立連接

用戶登錄

接受用戶發送的消息并廣播之

系統消息的處理

起服務

var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(server);app.use('/',express.static(__dirname + "/www")); server.listen(8080);

因為我把前端文件(html/js/css)放到了www這個文件夾內，所以用express指定返回給瀏覽器的頁面路徑現在這樣。 當然，除了express以外，也要引入socket.io模塊并綁定到服務器。

建立連接

服務起好了，怎么建立連接呢？

io.on('connection', function(socket){//do something });

就...這樣...?
昂。

你沒有看錯，我也沒有寫錯，這里對應前端邏輯的：

var socket = io.connect(); socket.on('connect', function(){//do something });

連接建立了以后，所有關于socket活動的邏輯就可以開始寫了。（FYI：當然，是寫在這個connection事件的回調里面）

用戶登錄

還記得前端觸發的登錄事件叫什么嘛

socket.emit('login', nickname);

叫login，而且還攜帶了一個參數——用戶想給自己起的昵稱nickname。好，我們來寫對應的后臺邏輯

socket.on('login', function(nickname){//do something });

這里的do something要做什么呢？即對用戶輸入的昵稱進行合法性校驗，比如是否已經存在、長度限制、符號限制等。
球都麻袋，好像有哪里不對...

長度限制和符號限制？這倆哥們根本就不用放在服務器上做嘛，直接在前端就搞了。所以我們的問題只剩一個了——昵稱的唯一性。
既然要檢測昵稱是否唯一，首先得有一個當前在線用戶昵稱的總集，不然去哪里檢測昵稱是否存在嘞？

所以要在全局維護一個數組，保存當前在線用戶的昵稱

var users = [];

在這個數組里找用戶通過login事件傳過來的nickname，如果不存在，說明當前昵稱合法，用戶可以叫這個名字，那么

socket.nickname = nickname;//記錄下當前socket的nickname users.push(nickname); socket.emit('loginSuccess');//觸發loginSuccess事件

如果昵稱已經存在了，就觸發一登錄失敗事件，前端再做相應的交互即可。

socket.emit('loginFailed');

接收用戶發送的消息并

按照約定好的事件名來寫服務端的監聽程序

socket.on('msgSend', function(msg){socket.broadcast.emit('newMsg', socket.nickname, msg); });

這里調用的api是socket的廣播事件，效果是廣播消息到除了當前socket以外的所有socket。

系統消息的處理

剩下的工作就是處理系統消息了，首先要明確有哪些系統消息

• 提示用戶加入
• 提示用戶離開
• 更新在線用戶數

當用戶輸入的昵稱通過合法性校驗以后，系統提示新加入的用戶

io.sockets.emit('system',nickname, users.length, 'login');

io.sockets.emit()?的作用是向當前所有socket觸發一個事件，這里要區別于socket.broadcast.emit()。
仿照上面的代碼，寫出當用戶離開時的廣播事件：

io.sockets.emit('system', nickname, users.length, 'logout');

但是要寫在哪里呢？這時候，就需要在服務端額外的監聽一個斷開事件

socket.on('disconnect', function(){var index = users.indexOf(socket.nickname);users.splice(index, 1);//將斷開用戶的昵稱從全局數組users中刪除io.sockets.emit('system', socket.nickname, users.length, 'logout'); });

總結

至此，一個基于Node.js的聊天室就算擼成了，當然還有許多可以優化的地方，不過核心功能也就這些，能看到這里的都是好漢，因為自己寫完看了一遍，感覺真像是老太太的裹腳布——又臭又長🌚

轉自https://github.com/KKKyrie/kchat

?

總結

以上是生活随笔為你收集整理的教你撸一个网页聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。