這篇文章主要介紹nodejs+express如何搭建多人聊天室項目，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
10年積累的網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有東洲免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
新建一個文件夾 chatroom
在終端輸入以下命令，按照步驟npm（沒裝過的去官網(wǎng)安裝下node和npm）會自動給你生成一個package.json文件
安裝express和socket.io
package.json文件如下：
重慶分公司
重慶分公司
//package.json
{
"name": "chatroom",
"version": "1.0.0",
"description": "A simple chatroom",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ddvdd008/chatroom.git"
},
"keywords": [
"chatroom",
"nodejs",
"express"
],
"author": "ddvdd",
"license": "ISC",
"bugs": {
"url": "https://github.com/ddvdd008/chatroom/issues"
},
"homepage": "https://github.com/ddvdd008/chatroom#readme"
}安裝express和socket.io
npm install express --save npm install socket.io --save
package.json自動新增依賴
"dependencies": {
"express": "^4.16.2",
"socket.io": "^2.0.4"
}因為我們使用express框架寫后端服務(wù)，用socket.io（Socket.io實(shí)際上是WebSocket的父集，Socket.io封裝了WebSocket和輪詢等方法，他會根據(jù)情況選擇方法來進(jìn)行通訊。）來對客戶端和服務(wù)端建立一個持久鏈接，便于通訊。
到這里準(zhǔn)備工作進(jìn)行的差不多了，下面我們開始一步步實(shí)現(xiàn)。
express創(chuàng)建服務(wù)
學(xué)過node同學(xué)應(yīng)該不陌生，利用http.createServer就能簡單的創(chuàng)建一個服務(wù)器，這次我們利用express來創(chuàng)建服務(wù)。在項目根目錄創(chuàng)建一個app.js。
/**
* Created by ddvdd on 2018-02-07.
*/
const express = require('express');
const app = express(); // 創(chuàng)建express實(shí)例，賦值給app。
const fs = require('fs'); // 這個是node的文件讀取模塊，用于讀取文件
const path = require('path'); // 這是node的路徑處理模塊，可以格式化路徑
app.listen(3000,()=>{
console.log("server running at 127.0.0.1:3000"); // 代表監(jiān)聽3000端口，然后執(zhí)行回調(diào)函數(shù)在控制臺輸出。
});
/**
* app.get(): express中的一個中間件，用于匹配get請求，說的簡單點(diǎn)就是node處理請求的路由，對于不同url請求，讓對應(yīng)的不同app.get()去處理
* '/': 它匹配get請求的根路由 '/'也就是 127.0.0.1:3000/就匹配到它了
* req帶表瀏覽器的請求對象，res代表服務(wù)器的返回對象
*/
app.get('/',(req,res)=>{
res.redirect('/chat.html'); // express的重定向函數(shù)。如果瀏覽器請求了根路由'/',瀏覽器就給他重定向到 '127.0.0.1:3000/chat.html'路由中
});
/**
* 這里匹配到的是/chat.html就是上面重定向到的路徑。
*/
app.get('/chat.html',(req,res)=>{
fs.readFile(path.join(__dirname,'./public/chat.html'),function(err,data){ //讀取文件，readFile里傳入的是文件路徑和回調(diào)函數(shù)，這里用path.join()格式化了路徑。
if(err){
console.error("讀取chat.html發(fā)生錯誤",err); //錯誤處理
res.send('4 0 4'); //如果發(fā)生錯誤，向瀏覽器返回404
} else {
res.end(data); //這里的data就是回調(diào)函數(shù)的參數(shù)，在readFile內(nèi)部已經(jīng)將讀取的數(shù)據(jù)傳遞給了回調(diào)函數(shù)的data變量。
} //我們將data傳到瀏覽器，就是把html文件傳給瀏覽器
})
});你們看了以后會說，這express框架看來也沒那么簡便啊，一個最簡單的發(fā)送單頁面的方法跟node自帶http.createServer沒太大區(qū)別餓，也挺麻煩的。從目前來看確實(shí)如此，我這不是為了讓你們?nèi)菀桌斫饴铩?express提供了一個非常強(qiáng)大的中間件，幫我們托管靜態(tài)資源文件，下面我們就來實(shí)現(xiàn)：
app.use('/',express.static(path.join(__dirname,'./public'))); //一句話就搞定。代替原來的：
app.get('/chat.html',(req,res)=>{
fs.readFile(path.join(__dirname,'./public/chat.html'),function(err,data){
if(err){
console.error("讀取chat.html發(fā)生錯誤",err);
res.send('4 0 4');
} else {
res.end(data);
}
})
});__dirname表示當(dāng)前文件所在的絕對路徑，所以我們使用path.join將app.js的絕對路徑和public加起來就得到了public的絕對路徑。用path.join是為了避免出現(xiàn) ././public 這種奇怪的路徑，express.static就幫我們托管了public文件夾中的靜態(tài)資源。只要有 127.0.0.1：3000/XXX/AAA 的路徑都會去public文件夾下找XXX文件夾下的AAA文件然后發(fā)送給瀏覽器。
現(xiàn)在再來看這段代碼是不是簡介了很多，具體了解app.use()干了什么的同學(xué)可以去這里
socket.io建立客戶端和服務(wù)端的鏈接
創(chuàng)建完上面的服務(wù)后，我們需要把socket.io引用進(jìn)來，讓客戶端和服務(wù)端建立長久鏈接。我們把a(bǔ)pp.js進(jìn)行如下改造：
/**
* Created by ddvdd on 2018-02-07.
*/
const express = require('express');
const app = express(); // 創(chuàng)建express實(shí)例，賦值給app。
const server = require('http').Server(app);
const io = require('socket.io')(server); //將socket的監(jiān)聽加到app設(shè)置的模塊里。這兩句理解不了的可以去socket.io官網(wǎng)去看
const path = require('path'); // 這是node的路徑處理模塊，可以格式化路徑
server.listen(3000,()=>{
console.log("server running at 127.0.0.1:3000"); // 代表監(jiān)聽3000端口，然后執(zhí)行回調(diào)函數(shù)在控制臺輸出。
});
...
...
app.use('/',express.static(path.join(__dirname,'./public'))); //一句話就搞定。
/*socket*/
io.on('connection',(socket)=>{ //監(jiān)聽客戶端的連接事件
});o.on表示監(jiān)聽某個事件，該事件一發(fā)生，就觸發(fā)回調(diào)函數(shù)。'connection‘就是一個事件名，它已經(jīng)定義好了，只要用戶連接上就會觸發(fā)?，F(xiàn)在app.js基本已經(jīng)完成，我們在根目錄執(zhí)行：
node app.js
>
現(xiàn)在訪問http://127.0.0.1:3000/static/chat.html:
哎？啥也沒有。。。那不廢話！我們都沒url請求對應(yīng)的靜態(tài)資源！
添加靜態(tài)html
我們在項目根目錄創(chuàng)建public文件夾，public文件夾里面新建chat.html文件：