文章目錄
🔥 1、前言
🔥 2、專案結構分析
🔥 3、操作步驟
🔥 4、查看效果
🔥 5、往期好文推薦
🔥 1、前言
大家好，我是紙飛機，倘若每天都是無盡的知識點，那這樣的學習想必會很枯燥無味吧，今天就給大家帶來個比較有成就感的玩意：Node.js+ws模塊來制作一個簡易聊天室！文末有代碼地址，
看了效果，好奇實作方式嗎？ 接下來就為您一一講解：
🔥 2、專案結構分析
專案目錄拆解：
- client檔案夾：客戶端配置
- server.js：給客戶端的靜態服務器
- WebSocketServer.js：服務端組態檔
整體結構有了，接下來，嘿嘿，
🔥 3、操作步驟
準備：
package.json需要執行以下命令才能得到：
npm init -y需要兩個依賴包：
npm install ws --save-dev
npm install express --save-dev步驟1：服務端構建（WebSocketServer.js)
const webSocket = require("ws"); //引入ws服務器模塊
const ws = new webSocket.Server({ port: 8000 }); //創建服務器,埠為8000
let clients = {};
let clientNum = 0;
ws.on("connection", (client) => {
//連接客戶端
//給客戶端編號,也就是參與聊天的用戶
client.name = ++clientNum;
clients[client.name] = client;
// 用戶的聊天資訊
client.on("message", (msg) => {
console.log("用戶" + client.name + "說:" + msg);
//廣播資料發送輸出
broadcast(client, msg);
});
//報錯資訊
client.on("error", (err) => {
if (err) {
console.log(err);
}
});
// 下線
client.on("close", () => {
delete clients[client.name];
console.log("用戶" + client.name + "下線了~~");
});
});
//廣播方法
function broadcast(client, msg) {
for (var key in clients) {
clients[key].send("用戶" + client.name + "說：" + msg);
}
}步驟2:客戶端靜態服務器構建（server.js）
const express = require("express"); //引入express模塊
const path = require("path"); //引入磁盤路徑模塊
const app = express();
const port = 3000; //埠
const host = "127.0.0.1"; //主機
app.use(express.static(path.resolve(__dirname, "./client"))); //設定要開啟服務的路徑
app.listen(port, host, () => {
//監聽服務
console.log(`客戶端服務器為:http://${host}:${port}`);
});步驟3:客戶端頁面構建（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>客戶端</title>
</head>
<body>
<h1>聊天室</h1>
<div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
<br />
<div>
<input type="text" id="msg" style="width: 200px;">
</div>
<button id="submit">提交</button>
<script src="WSClient.js" charset="utf-8"></script>
<script>
document.querySelector('#submit').addEventListener('click', function () {
var msg2 = msg.value
ws.send(msg2)
msg.value = ''
}, false)
</script>
</body>
</html>步驟4:客戶端連接到服務端配置（WSClient.js）
const ws = new WebSocket("ws://127.0.0.1:8000"); //連接到客戶端
//上線
ws.onopen = () => {
ws.send("我上線啦");
};
//發送資訊
ws.onmessage = (msg) => {
const content = document.getElementById("content");
content.innerHTML += msg.data + "<br>";
};
//報錯
ws.onerror = (err) => {
console.log(err);
};
//下線
ws.onclose = () => {
console.log("close");
};到這里就已經完成，
步驟5:分別啟動 WebSocketServer.js ,server.js
node WebSocketServer.js
node server.js
以上就代表啟動成功， 接下來我們本地測驗下，想線上玩的同學也可以自行上傳玩玩，
🔥 4、查看效果
用倆瀏覽器打開localhost:3000即可查看效果：
代碼下載地址：https://codechina.csdn.net/qq_32442973/websocket.git
小提問：websocket斷開該怎么辦呢（心跳）？（后面會出文章）
🔥 5、往期好文推薦
- npm install下來的包到底怎么來的？難怪npmjs上會有這么的庫！手把手教你做一個完全屬于你自己的npm組件庫！
- 怎么微信WeixinJSBridge.invoke支付成功居然不跳轉？還把我頁面給關了！這篇文章就告訴你What should I do！
- 一起談一談js中的宏任務和微任務！
- 2021前端面試js題目總結，不妨看看有沒有屬于你的那道題
- 前端異步解決方案大全最新版(2021版)_紙飛機博客
- 使用Docker部署前端專案實戰教程，該踩的坑我都幫你踩了！_紙飛機博客-CSDN博客
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300005.html
標籤：其他