新聞中心
前端一直是一塊充滿驚喜的土地,不僅是那些富有創(chuàng)造性的頁面,還有那些驚贊的效果及不斷推出的新技術(shù)。像node.js這樣的后端開拓者直接將前端人員的能力擴(kuò)大到了后端。瞬間就有了一統(tǒng)天下的感覺,來往穿梭于前后端之間代碼敲得飛起,從此由前端晉升為'前后端'。

正鑲白網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,正鑲白網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為正鑲白上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢,請找那個(gè)售后服務(wù)好的正鑲白做網(wǎng)站的公司定做!
圖片來自G+
本文將使用Node.js加web socket協(xié)議打造一個(gè)網(wǎng)頁即時(shí)聊天程序,取名為HiChat,中文翻過來就是'嗨聊',聽中文名有點(diǎn)像是專為寂寞單身男女打造的~
其中將會使用到express和socket.io兩個(gè)包模塊,下面會有介紹。
源碼&演示
在線演示 (heroku服務(wù)器網(wǎng)速略慢且免費(fèi)套餐是小水管,建議下載代碼本地運(yùn)行)
源碼可訪問項(xiàng)目的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,這里有一篇不錯(cuò)的入門教程
然后我們就可以開始創(chuàng)建一個(gè)簡單的HTTP服務(wù)器啦。
類似下面非常簡單的代碼,它創(chuàng)建了一個(gè)HTTP服務(wù)器并監(jiān)聽系統(tǒng)的80端口。
//node server example
- //引入http模塊
- var http = require('http'),
- //創(chuàng)建一個(gè)服務(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');
將其保存為一個(gè)js文件比如server.js,然后從命令行運(yùn)行node server或者node server.js,服務(wù)器便可啟動了,此刻我們可以在瀏覽器地址欄輸入localhost進(jìn)行訪問,也可以輸入本機(jī)IP127.0.0.1,都不用加端口,因?yàn)槲覀兎?wù)器監(jiān)聽的是默認(rèn)的80端口。當(dāng)然,如果你機(jī)子上面80端口被其他程序占用了,可以選擇其他端口比如8080,這樣訪問的時(shí)候需要顯示地加上端口號localhost:8080。
Express
首先通過npm進(jìn)行安裝
- 在我們的項(xiàng)目文件夾下打開命令行(tip: 按住Shift同時(shí)右擊,可以在右鍵菜單中找到'從此處打開命令行'選項(xiàng))
- 在命令行中輸入 npm install express 回車進(jìn)行安裝
- 然后在server.js中通過require('express')將其引入到項(xiàng)目中進(jìn)行使用
express是node.js中管理路由響應(yīng)請求的模塊,根據(jù)請求的URL返回相應(yīng)的HTML頁面。這里我們使用一個(gè)事先寫好的靜態(tài)頁面返回給客戶端,只需使用express指定要返回的頁面的路徑即可。如果不用這個(gè)包,我們需要將HTML代碼與后臺JavaScript代碼寫在一起進(jìn)行請求的響應(yīng),不太方便。
//返回一個(gè)簡單的HTML內(nèi)容
- server = http.createServer(function(req, res) {
- res.writeHead(200, {
- 'Content-Type': 'text/html' //將返回類型由text/plain改為text/html
- });
- res.write('
hello world!
'); //返回HTML標(biāo)簽- res.end();
- });
在存放上一步創(chuàng)建的server.js文件的地方,我們新建一個(gè)文件夾名字為www用來存放我們的網(wǎng)頁文件,包括圖片以及前端的js文件等。假設(shè)已經(jīng)在www文件夾下寫好了一個(gè)index.html文件(將在下一步介紹,這一步你可以放一個(gè)空的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);
其中有四個(gè)按鈕,分別是設(shè)置字體顏色,發(fā)送表情,發(fā)送圖片和清除記錄,將會在下面介紹其實(shí)現(xiàn)
socket.io
Node.js中使用socket的一個(gè)包。使用它可以很方便地建立服務(wù)器到客戶端的sockets連接,發(fā)送事件與接收特定事件。
同樣通過npm進(jìn)行安裝 npm install socket.io 。安裝后在node_modules文件夾下新生成了一個(gè)socket.io文件夾,其中我們可以找到一個(gè)socket.io.js文件。將它引入到HTML頁面,這樣我們就可以在前端使用socket.io與服務(wù)器進(jìn)行通信了。
同時(shí)服務(wù)器端的server.js里跟使用express一樣,也要通過require('socket.io')將其引入到項(xiàng)目中,這樣就可以在服務(wù)器端使用socket.io了。
使用socket.io,其前后端句法是一致的,即通過socket.emit()來激發(fā)一個(gè)事件,通過socket.on()來偵聽和處理對應(yīng)事件。這兩個(gè)事件通過傳遞的參數(shù)進(jìn)行通信。具體工作模式可以看下面這個(gè)示例。
比如我們在index.html里面有如下JavaScript代碼(假設(shè)你已經(jīng)在頁面放了一個(gè)ID為sendBtn的按鈕):
上述代碼首先建立與服務(wù)器的連接,然后得到一個(gè)socket實(shí)例。之后如果頁面上面一個(gè)ID為sendBtn的按鈕被點(diǎn)擊的話,我們就通過這個(gè)socket實(shí)例發(fā)起一個(gè)名為foo的事件,同時(shí)傳遞一個(gè)hello字符串信息到服務(wù)器。
與此同時(shí),我們需要在服務(wù)器端寫相應(yīng)的代碼來處理這個(gè)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)一步介紹。
#p#
基本頁面
有了上面一些基礎(chǔ)的了解,下面可以進(jìn)入聊天程序功能的開發(fā)了。
首先我們構(gòu)建主頁面。因?yàn)槭潜容^大眾化的應(yīng)用了,界面不用多想,腦海中已經(jīng)有大致的雛形,它有一個(gè)呈現(xiàn)消息的主窗體,還有一個(gè)輸入消息的文本框,同時(shí)需要一個(gè)發(fā)送消息的按鈕,這三個(gè)是必備的。
另外就是,這里還準(zhǔn)備實(shí)現(xiàn)以下四個(gè)功能,所以界面上還有設(shè)置字體顏色,發(fā)送表情,發(fā)送圖片和清除記錄四個(gè)按鈕。
***的頁面也就是先前截圖展示的那們,而代碼如下:
www/index.html
hichat HiChat :)
connecting to server...
樣式文件 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;
- }
為了讓項(xiàng)目有一個(gè)良好的目錄結(jié)構(gòu)便于管理,這里在www文件夾下又新建了一個(gè)styles文件夾存放樣式文件main.css,然后新建一個(gè)scripts文件夾存放前端需要使用的js文件比如hichat.js(我們前端所有的js代碼會放在這個(gè)文件中),而我們的服務(wù)器js文件server.js位置不變還是放在最外層。
同時(shí)再新建一個(gè)content文件夾用于存放其他資源比如圖片等,其中content文件夾里再建一個(gè)emoji文件夾用于存入表情gif圖,后面會用到。***我們項(xiàng)目的目錄結(jié)構(gòu)應(yīng)該是這樣的了:
- ├─node_modules
- └─www
- ├─content
- │ └─emoji
- ├─scripts
- └─styles
此刻打開頁面你看到的是一個(gè)淡黑色的遮罩層,而接下來我們要實(shí)現(xiàn)的是用戶昵稱的輸入與服務(wù)器登入。這個(gè)遮罩層用于顯示連接到服務(wù)器的狀態(tài)信息,而當(dāng)連接完成之后,會出現(xiàn)一個(gè)輸入框用于昵稱輸入。
上面HTML代碼里已經(jīng)看到,我們將www/scripts/hichat.js文件已經(jīng)引入到頁面了,下面開始寫一些基本的前端js開始實(shí)現(xiàn)連接功能。
定義一個(gè)全局變量用于我們整個(gè)程序的開發(fā)HiChat,同時(shí)使用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();
- });
- }
- };
上面的代碼定義了整個(gè)程序需要使用的類HiChat,之后我們處理消息顯示消息等所有業(yè)務(wù)邏輯均寫在這個(gè)類里面。
首先定義了一個(gè)程序的初始化方法,這里面初始化socket,監(jiān)聽連接事件,一旦連接到服務(wù)器,便顯示昵稱輸入框。當(dāng)用戶輸入昵稱后,便可以在服務(wù)器后臺接收到然后進(jìn)行下一步的處理了。
#p#
設(shè)置昵稱
我們要求連接的用戶需要首先設(shè)置一個(gè)昵稱,且這個(gè)昵稱還要唯一,也就是不能與別人同名。一是方便用戶區(qū)分,二是為了統(tǒng)計(jì)在線人數(shù),同時(shí)也方便維護(hù)一個(gè)保存所有用戶昵稱的數(shù)組。
為此在后臺server.js中,我們創(chuàng)建一個(gè)名叫users的全局?jǐn)?shù)組變量,當(dāng)一個(gè)用戶設(shè)置好昵稱發(fā)送到服務(wù)器的時(shí)候,將昵稱壓入users數(shù)組。同時(shí)注意,如果用戶斷線離開了,也要相應(yīng)地從users數(shù)組中移除以保證數(shù)據(jù)的正確性。
在前臺,輸入昵稱點(diǎn)擊OK提交后,我們需要發(fā)起一個(gè)設(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ā)起一個(gè)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ù)器的那個(gè)客戶端。所以代碼socket.emit('foo')則只有自己收得到這個(gè)事件,而socket.broadcast.emit('foo')則表示向除自己外的所有人發(fā)送該事件,另外,上面代碼中,io表示服務(wù)器整個(gè)socket連接,所以代碼io.sockets.emit('foo')表示所有人都可以收到該事件。
上面代碼先判斷接收到的昵稱是否已經(jīng)存在在users中,如果存在,則向自己發(fā)送一個(gè)nickExisted事件,在前端接收到這個(gè)事件后我們顯示一條信息通知用戶。
將下面代碼添加到hichat.js的inti方法中。
www/scripts/hichat.js
- this.socket.on('nickExisted', function() {
- document.getElementById('info').textContent = '!nickname is taken, choose another pls'; //顯示昵稱被占用的提示
- });
如果昵稱沒有被其他用戶占用,則將這個(gè)昵稱壓入users數(shù)組,同時(shí)將其作為一個(gè)屬性存到當(dāng)前socket變量中,并且將這個(gè)用戶在數(shù)組中的索引(因?yàn)槭菙?shù)組***一個(gè)元素,所以索引就是數(shù)組的長度users.length)也作為屬性保存到socket中,后面會用到。***向自己發(fā)送一個(gè)loginSuccess事件,通知前端登陸成功,前端接收到這個(gè)成功消息后將灰色遮罩層移除顯示聊天界面。
將下面代碼添加到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)計(jì)
這里實(shí)現(xiàn)顯示在線用戶數(shù)及在聊天主界面中以系統(tǒng)身份顯示用戶連接離開等信息。
上面server.js中除了loginSuccess事件,后面還有一句代碼,通過io.sockets.emit 向所有用戶發(fā)送了一個(gè)system事件,傳遞了剛登入用戶的昵稱,所有人接收到這個(gè)事件后,會在聊天窗口顯示一條系統(tǒng)消息'某某加入了聊天室'。同時(shí)考慮到在前端我們無法得知用戶是進(jìn)入還是離開,所以在這個(gè)system事件里我們多傳遞一個(gè)數(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');
- };
- });
較之前,多傳遞了一個(gè)login字符串。
同時(shí)再添加一個(gè)用戶離開的事件,這個(gè)可能通過socket.io自帶的disconnect事件完成,當(dāng)一個(gè)用戶斷開連接,disconnect事件就會觸發(fā)。在這個(gè)事件中,做兩件事情,一是將用戶從users數(shù)組中刪除,一是發(fā)送一個(gè)system事件通知所有人'某某離開了聊天室'。
將以下代碼添加到server.js中connection的回調(diào)函數(shù)中。
server.js
- //斷開連接的事件
- socket.on('disconnect', function() {
- //將斷開連接的用戶從users中刪除
- users.splice(socket.userIndex, 1);
- //通知除自己以外的所有人
- socket.broadcast.emit('system', socket.nickname, users.length, 'logout');
- });
上面代碼通過JavaScript數(shù)組的splice方法將當(dāng)前斷開連接的用戶從users數(shù)組中刪除,這里我們看到之前保存的用戶索引被使用了。同時(shí)發(fā)送和用戶連接時(shí)一樣的system事件通知所有人'某某離開了',為了讓前端知道是離開事件,所以發(fā)送了一個(gè)'logout'字符串。
下面開始前端的實(shí)現(xiàn),也就是接收system事件。
在hichat.js中,將以下代碼添加到init方法中。
www/scripts/hichat.js
- this.socket.on('system', function(nickName, userCount, type) {
- //判斷用戶是連接還是離開以顯示不同的信息
- var msg = nickName + (type == 'login' ? ' joined' : ' left');
- var p = document.createElement('p');
- p.textContent = msg;
- document.getElementById('historyMsg').appendChild(p);
- //將在線人數(shù)顯示到頁面頂部
- document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online';
- });
現(xiàn)在運(yùn)行程序,打開多個(gè)瀏覽器標(biāo)簽,然后登陸離開,你就可以看到相應(yīng)的系統(tǒng)提示消息了。
發(fā)送消息
用戶連接以及斷開我們需要顯示系統(tǒng)消息,用戶還要頻繁的發(fā)送聊天消息,所以可以考慮將消息顯示到頁面這個(gè)功能單獨(dú)寫一個(gè)函數(shù)方便我們調(diào)用。為此我們向HiChat類中添加一個(gè)_displayNewMsg的方法,它接收要顯示的消息,消息來自誰,以及一個(gè)顏色共三個(gè)參數(shù)。因?yàn)槲覀兿胂到y(tǒng)消息區(qū)別于普通用戶的消息,所以增加一個(gè)顏色參數(shù)。同時(shí)這個(gè)參數(shù)也方便我們之后實(shí)現(xiàn)讓用戶自定義文本顏色做準(zhǔn)備。
將以下代碼添加到的我的HiChat類當(dāng)中。
www/scripts/hichat.js
- //向原型添加業(yè)務(wù)方法
- HiChat.prototype = {
- init: function() { //此方法初始化程序
- //...
- },
- _displayNewMsg: function(user, msg, color) {
- var container = document.getElementById('historyMsg'),
- msgToDisplay = document.createElement('p'),
- date = new Date().toTimeString().substr(0, 8);
- msgToDisplay.style.color = color || '#000';
- msgToDisplay.innerHTML = user + '(' + date + '): ' + msg;
- container.appendChild(msgToDisplay);
- container.scrollTop = container.scrollHeight;
- }
- };
在_displayNewMsg方法中,我們還向消息添加了一個(gè)日期。我們也判斷了該方法在調(diào)用時(shí)有沒有傳遞顏色參數(shù),沒有傳遞顏色的話默認(rèn)使用#000即黑色。
同時(shí)修改我們在system事件中顯示系統(tǒng)消息的代碼,讓它調(diào)用這個(gè)_displayNewMsg方法。
www/scripts/hichat.js
- this.socket.on('system', function(nickName, userCount, type) {
- var msg = nickName + (type == 'login' ? ' joined' : ' left');
- //指定系統(tǒng)消息顯示為紅色
- that._displayNewMsg('system ', msg, 'red');
- document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online';
- });
現(xiàn)在的效果如下:
有了這個(gè)顯示消息的方法后,下面就開始實(shí)現(xiàn)用戶之間的聊天功能了。
做法也很簡單,如果你掌握了上面所描述的emit發(fā)送事件,on接收事件,那么用戶聊天消息的發(fā)送接收也就輕車熟路了。
首先為頁面的發(fā)送按鈕寫一個(gè)click事件處理程序,我們通過addEventListner來監(jiān)聽這個(gè)click事件,當(dāng)用戶點(diǎn)擊發(fā)送的時(shí)候,先檢查輸入框是否為空,如果不為空,則向服務(wù)器發(fā)送postMsg事件,將用戶輸入的聊天文本發(fā)送到服務(wù)器,由服務(wù)器接收并分發(fā)到除自己外的所有用戶。
將以下代碼添加到hichat.js的inti方法中。
www/scripts/hichat.js
- document.getElementById('sendBtn').addEventListener('click', function() {
- var messageInput = document.getElementById('messageInput'),
- msg = messageInput.value;
- messageInput.value = '';
- messageInput.focus();
- if (msg.tri
分享文章:Node.js + Web Socket 打造即時(shí)聊天程序嗨聊
文章來源:http://www.fisionsoft.com.cn/article/cdpodig.html


咨詢
建站咨詢
