vue+websocket demo：
<!-- vue + websocket連接demo -->
<template>
<div>
<h1>vue + websocket連接demo</h1>
<Button @click="test">test</Button>
</div>
</template>
<script>
let socket;
// 給服務器發送一個字符串:
export default {
data() {
return {
// 連接標志位
lockReconnect: false,
wsCfg: {
// websocket地址
url: "ws://127.0.0.1:8081"
}
};
},
methods: {
createWebSocket() {
try {
// 創建Web Socket 連接
socket = new WebSocket(this.wsCfg.url);
// 初始化事件
this.initEventHandle(socket);
} catch (e) {
// 出錯時重新連接
this.reconnect(this.wsCfg.url);
}
},
initEventHandle(socket) {
// 連接關閉時觸發
socket.onclose = () => {
console.log("連接關閉");
};
// 通信發生錯誤時觸發
socket.onerror = () => {
// 重新創建長連接
this.reconnect();
};
// 連接建立時觸發
socket.onopen = () => {
console.log("連接成功");
};
// 客戶端接收服務端數據時觸發
socket.onmessage = msg => {
// 業務邏輯處理
console.log(msg.data, "ws:data");
};
},
reconnect() {
if (this.lockReconnect) {
return;
}
this.lockReconnect = true;
// 沒連接上會一直重連，設置延遲避免請求過多
setTimeout(() => {
this.lockReconnect = false;
this.createWebSocket(this.wsCfg.url);
}, 2000);
},
test() {
// 給服務器發送一個字符串:
// ws.send("Hello!");
socket.send("Hello!");
}
},
mounted() {
this.createWebSocket();
}
};
</script>
node 服務端啟websocket服務：
// 導入WebSocket模塊:
const WebSocket = require('ws'); // 引用Server類:
const WebSocketServer = WebSocket.Server; // 實例化:
const wss = new WebSocketServer({ port: 8081 }); wss.on('connection', function (ws) { console.log(`[SERVER] connection()`); ws.on('message', function (message) { console.log(`[SERVER] Received: ${message}`); ws.send(`ECHO: ${message}`, (err) => { if (err) { console.log(`[SERVER] error: ${err}`); } }); }) });
運行前后端代碼：
前端頁面可以看到發送websocket數據后，接收到了后端的數據，實現了雙向通信。