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

進(jìn)入正題

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

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

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

源碼

源碼已經(jīng)上傳至我的github, clone到本地以后在terminal中運(yùn)行下面兩條命令：

npm install node server

然后打開瀏覽器，訪問localhost，就可以在不聯(lián)網(wǎng)的情況下看到這個(gè)demo啦。

預(yù)覽

輸入用戶名完成登陸

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

準(zhǔn)備工作

當(dāng)然啦，Node.js是必不可少的，這里推薦兩個(gè)很棒的Node.js教程：

• Node入門
• Node.js包教不包會(huì)

Node.js可以實(shí)現(xiàn)用短短的幾行代碼就起一個(gè)服務(wù)器

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);

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

另外，還用到了兩個(gè)包模塊：

• express
• socket.io

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

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

UI

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

<div class="container chat-container"><!-- 標(biāo)題展示信息 --><div class="row"></div><!-- 歷史消息 --><div class="row"><div class="col-md-6 col-md-offset-3 col-sm-12 historyMsg" id="historyMsg"></div></div><!-- 控制臺(tái) --><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>

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

前端邏輯

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

• 與服務(wù)端建立連接
• 輸入昵稱完成登錄
• 發(fā)送消息
• 接受消息

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

與服務(wù)端建立連接

這里要注意，因?yàn)槭且粋€(gè)聊天系統(tǒng)，所以與服務(wù)端建立連接的方式不同于往常，這里用到的協(xié)議是HTTP?WebSocket，從而實(shí)現(xiàn)持久連接。
簡(jiǎn)單的解釋一下，這里的“持久”，是相對(duì)于HTTP這種“非持久”的協(xié)議來說的（閣下的意思是，HTTP的夫人會(huì)很羨慕WebSocket的夫人咯）。
通過閱讀Ovear在知乎上的回答，大致說一下這兩個(gè)協(xié)議之間的區(qū)別。

HTTP

HTTP的生命周期大概是這樣的，一個(gè)request，一個(gè)response，這次請(qǐng)求就結(jié)束了；HTTP 1.1中進(jìn)行了改進(jìn)，增加了一個(gè)keep-alive，效果是在這次HTTP連接中，可以發(fā)送多個(gè)request，接受多個(gè)response，但本質(zhì)上，request = response，也就是說，請(qǐng)求和響應(yīng)永遠(yuǎn)是一一對(duì)應(yīng)的，沒有request時(shí)，服務(wù)端不能主動(dòng)response。

WebSocket

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

接下來就是實(shí)現(xiàn)的部分，前端在引入了socket.io.js這個(gè)文件以后應(yīng)該怎么做呢？
Talk is cheap, show you the CODE.

var socket = io.connect();

對(duì)，就是這么簡(jiǎn)單，不信你去看官方文檔。

輸入昵稱完成登錄

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

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

回調(diào)里面是此時(shí)要完成的DOM操作，比如：

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

顯示遮蓋層

聚焦文本框

當(dāng)用戶輸入自己的昵稱點(diǎn)擊登錄按鈕后，當(dāng)前socket觸發(fā)一個(gè)login事件到服務(wù)端：

socket.emit('login',nickname);

攜帶一個(gè)參數(shù)，這個(gè)參數(shù)就是用戶輸入的昵稱。
當(dāng)服務(wù)端對(duì)這個(gè)昵稱進(jìn)行合法性檢測(cè)，通過時(shí)觸發(fā)：

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

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

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

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

發(fā)送消息

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

socket.emit('msgSend',msg);

攜帶一個(gè)參數(shù)，即用戶的輸入。

接受消息

接受消息這個(gè)邏輯有三種情況

自己發(fā)送的消息

別人發(fā)送的消息

系統(tǒng)的提示信息

莫慌，一個(gè)一個(gè)來看。

自己發(fā)送的消息

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

別人發(fā)送的消息

現(xiàn)在就需要在前端建立一個(gè)響應(yīng)服務(wù)端“有新消息”的監(jiān)聽事件了。

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

回調(diào)函數(shù)里面有兩個(gè)參數(shù)，nickname和msg，分別是消息發(fā)送者的昵稱和消息內(nèi)容，這倆是怎么來的呢？不要急，后面會(huì)在服務(wù)端邏輯里面講到，這里你只需要知道，在前端接受新消息的時(shí)候，因?yàn)闋砍兜秸故拘孪?#xff0c;所以需要這兩個(gè)參數(shù)。

系統(tǒng)的提示信息

關(guān)于系統(tǒng)的提示信息，主要分為兩個(gè)：

提示新加入和退出的用戶

展示當(dāng)前在線的用戶數(shù)

大概是這個(gè)樣子，所以需要在前端對(duì)系統(tǒng)事件進(jìn)行監(jiān)聽

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

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

后臺(tái)邏輯

與前端對(duì)應(yīng)，后臺(tái)的邏輯主要分為以下幾個(gè)部分

起服務(wù)

建立連接

用戶登錄

接受用戶發(fā)送的消息并廣播之

系統(tǒng)消息的處理

起服務(wù)

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);

因?yàn)槲野亚岸宋募?html/js/css)放到了www這個(gè)文件夾內(nèi)，所以用express指定返回給瀏覽器的頁面路徑現(xiàn)在這樣。 當(dāng)然，除了express以外，也要引入socket.io模塊并綁定到服務(wù)器。

建立連接

服務(wù)起好了，怎么建立連接呢？

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

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

你沒有看錯(cuò)，我也沒有寫錯(cuò)，這里對(duì)應(yīng)前端邏輯的：

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

連接建立了以后，所有關(guān)于socket活動(dòng)的邏輯就可以開始寫了。（FYI：當(dāng)然，是寫在這個(gè)connection事件的回調(diào)里面）

用戶登錄

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

socket.emit('login', nickname);

叫l(wèi)ogin，而且還攜帶了一個(gè)參數(shù)——用戶想給自己起的昵稱nickname。好，我們來寫對(duì)應(yīng)的后臺(tái)邏輯

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

這里的do something要做什么呢？即對(duì)用戶輸入的昵稱進(jìn)行合法性校驗(yàn)，比如是否已經(jīng)存在、長(zhǎng)度限制、符號(hào)限制等。
球都麻袋，好像有哪里不對(duì)...

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

所以要在全局維護(hù)一個(gè)數(shù)組，保存當(dāng)前在線用戶的昵稱

var users = [];

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

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

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

socket.emit('loginFailed');

接收用戶發(fā)送的消息并

按照約定好的事件名來寫服務(wù)端的監(jiān)聽程序

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

這里調(diào)用的api是socket的廣播事件，效果是廣播消息到除了當(dāng)前socket以外的所有socket。

系統(tǒng)消息的處理

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

• 提示用戶加入
• 提示用戶離開
• 更新在線用戶數(shù)

當(dāng)用戶輸入的昵稱通過合法性校驗(yàn)以后，系統(tǒng)提示新加入的用戶

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

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

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

但是要寫在哪里呢？這時(shí)候，就需要在服務(wù)端額外的監(jiān)聽一個(gè)斷開事件

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

總結(jié)

至此，一個(gè)基于Node.js的聊天室就算擼成了，當(dāng)然還有許多可以優(yōu)化的地方，不過核心功能也就這些，能看到這里的都是好漢，因?yàn)樽约簩懲昕戳艘槐?#xff0c;感覺真像是老太太的裹腳布——又臭又長(zhǎng)🌚

轉(zhuǎn)自https://github.com/KKKyrie/kchat

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。