node.js创建WebSocket服务，并使用原生js ES6完成对WebSocket数据交互
生活随笔
收集整理的這篇文章主要介紹了
node.js创建WebSocket服务，并使用原生js ES6完成对WebSocket数据交互
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
注意，前情提示：
本代碼基于《Node.js（nodejs）對本地JSON文件進(jìn)行增、刪、改、查操作（輕車熟路）》
傳送門Node.js（nodejs）對本地JSON文件進(jìn)行增、刪、改、查操作（輕車熟路）_你摯愛的強(qiáng)哥?給你發(fā)來1條消息?-CSDN博客
首先安裝
cnpm i nodejs-websocket在/api/demo/文件夾下面創(chuàng)建websocket.js??
代碼內(nèi)容
const $g = global.SG.$g, fs = global.SG.fs, router = global.SG.router, ws = global.SG.websocket;
module.exports = global.SG.router;//創(chuàng)建websocket----------------------------------------------------------------
console.log("開始建立連接...");
const port = 10000;//設(shè)置websocket占用的端口號，強(qiáng)哥酷愛一萬號！
let server = ws.createServer(socket => {socket.on("text", str => {console.log($g.date.nowtime() + "收到客戶端的信息：" + str);//socket.sendText("收到客戶端的信息：" + str);//只推送給當(dāng)前連接的一個(gè)終端server.connections.forEach(conn => conn.sendText("收到客戶端的信息：" + str));//全局廣播});socket.on("close", (code, reason) => {console.log($g.date.nowtime() + "關(guān)閉連接");});socket.on("error", (code, reason) => {console.log($g.date.nowtime() + "異常關(guān)閉");});
}).listen(port);
console.log(`WebSocket建立完畢，地址為：ws://localhost:${port}`);在index.js最后一行加入
app.use(API_PATH, require(`.${API_PATH}/demo/websocket`));//websocket運(yùn)行
node index
接下來打開創(chuàng)建客戶端訪問的模擬頁面，隨便新建一個(gè)index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>WebSocket</title>
</head>
<body>
<button>正在連接…</button>
<div class="msg"></div>
</body>
<script>var button = document.querySelector("button");var msg = document.querySelector(".msg");if (window.WebSocket) {var ws = new WebSocket("ws://localhost:10000");ws.onopen = function (e) {button.innerHTML = "連接服務(wù)器成功";};ws.onclose = function (e) {button.innerHTML = "服務(wù)器關(guān)閉";};ws.onerror = function () {button.innerHTML = "連接出錯(cuò)";};ws.onmessage = function (e) {console.log(e.data);button.innerHTML = "連接成功，點(diǎn)擊發(fā)送信息給服務(wù)器";msg.innerHTML += `<p><b>[服務(wù)器發(fā)來信息]</b>${e.data}</p>`;};document.querySelector("button").onclick = function (e) {ws.send(new Date().toLocaleString("zh-Hans-CN", {hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false}));};}
</script>
</html>運(yùn)行該index.html
多次點(diǎn)擊按鈕你會看到網(wǎng)頁里面出現(xiàn)了
同時(shí)去看下服務(wù)端的控制臺
會了嗎？理解了WebSocket的原理了嗎，歡迎給我留言喲~
總結(jié)
以上是生活随笔為你收集整理的node.js创建WebSocket服务，并使用原生js ES6完成对WebSocket数据交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pptxgenjs一个月深度使用感受（未
- 下一篇： 【对接】《前后端对接联调数据、调试接口过