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