1.先使用npm導入元件 npm i nodejs-websocket -S
2.在與node_modules同一檔案夾内建立webSocket-webSocket.js
在webSocket.js檔案夾内寫入：
const ws = require('nodejs-websocket');//引入websocket
const prot = 8082;
const server = ws.createServer(connection => {
connection.on("text", function (str) {
// connection.sendText(str);// !傳回給用戶端的資料!
server.connections.forEach(function (conn) {
console.log(JSON.parse(str)) //接收到前端傳來的資料，可以使用Parse轉回對象。
var myVar = setInterval(()=> {
conn.sendText(str+'伺服器傳回')//傳回給所有用戶端的資料(相當于公告、通知)
},3000)
setTimeout(() => {
clearInterval(myVar);//推送停止
},10000)
})
})
//監聽關閉
connection.on("close", function (code, reason) {
console.log("服務關閉")
//監聽異常
connection.on("error",(e) => {
console.log(e,'服務異常斷開...')
}).listen(prot)
3.可另開一個檔案夾，其中建一個testOne.html檔案。
其中代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="box">
<div class="msg" id="msg"></div>
<div class="bottom">
<button type="button" id="btn">開啟伺服器推送</button>
</div>
</div>
</body>
<script>
let ws = new WebSocket('ws://localhost:8082');//執行個體化websocket
let btn = document.getElementById('btn');//推送開啟
let msg = document.getElementById('msg');//推送資訊展示
//發消息
ws.onopen = function () {
//點選按鈕發送消息
btn.onclick = function () {
ws.send(JSON.stringify({id1:1,id2:2})); //發送給服務端資料 需轉為字元串
}
};
//ws.onmessage方法一經啟用，可被動接收由伺服器推送給前端的消息。伺服器一推送，便會主動觸發其中方法。
ws.onmessage = function (e) {
//e 服務端傳回資料
var received_msg = e.data;
console.log(e)
msg.innerHTML += received_msg += '<br>'
//連接配接斷開
ws.onclose = function () {
console.log("連接配接已關閉...");
//異常斷開
ws.onerror = function () {
console.log('連接配接異常斷開...')
}
function fun() {
console.log(fun)
fun()
</script>
</html>
4.開啟服務
5.運作html檔案在浏覽器打開，點選按鈕即可檢視。