最近接到一個需求，有兩個頁面分別連接了兩個Websocket連接，并且這兩個頁面可以通過Websocket去相互影響J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

為了方便講解，以下會簡化業務。J9b28資訊網——每日最新資訊28at.com

這兩個頁面簡化后如下：J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

• 當點擊頁面1更新按鈕后，頁面1會+1，而 頁面2 會變成 頁面1 數值的10倍。
• 當點擊頁面2清空按鈕后，頁面1和2的數值都會變成0。
• 頁面2需要定時去獲取數值，并展示出來。

效果如下：J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

最普通的做法？

其實不難，只需要用 Nodejs新建兩個 Websocket連接，然后維護一個 count變量即可。J9b28資訊網——每日最新資訊28at.com

npm i ws

至于怎么跨兩個Websocket進行通信呢？其實也簡單，無非就是定義兩個全局變了，去存儲兩個Websocket實例唄！J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

接著就是前端頁面進行Websocket通信，即可完成。J9b28資訊網——每日最新資訊28at.com

Page1

圖片J9b28資訊網——每日最新資訊28at.com

Page2

圖片J9b28資訊網——每日最新資訊28at.com

即可完成效果。J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

不太好維護吧？

其實這個需求唯一的難點就在于怎么去跨兩個Websocket進行通信，上面的做法是定義兩個全局變量去存儲J9b28資訊網——每日最新資訊28at.com

但是感覺這樣不太妥，如果以后Websocket連接實例多了，那么維護起來會不會很費勁？J9b28資訊網——每日最新資訊28at.com

我有個想法：能不能讓每一個 Websocket 連接各自管自己的事J9b28資訊網——每日最新資訊28at.com

但是其實想要做到各管各的，是有難處的，難就難在于：他們都依賴于count的變化，一個實例改變了 count之后，怎么通知另一個實例去做操作呢？J9b28資訊網——每日最新資訊28at.com

想到這里我就想到了 Vue3，當數據變化時，可以監聽數據變化，并在監聽函數中去做你想做的事情J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

那么能不能把Vue3的那一套響應式 API 拿到 Nodejs中去用呢？J9b28資訊網——每日最新資訊28at.com

答案是：可以！！！Vue3是真的牛，他把 API 都拆出來放在 @vue/reactivity這個包中了，就算你不在瀏覽器環境，也能用這個包去做響應式邏輯，這個包擁有了幾乎所有 Vue 的響應式 API。J9b28資訊網——每日最新資訊28at.com

npm i @vue/reactivity

我們只需要用到ref、computed、watch，即可讓每個 Websocket 實例各管各的。J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

圖片J9b28資訊網——每日最新資訊28at.com

其實大家可以把@vue/reactivity當做一個工具庫來看，不要綁定上 Vue，他就是一個響應式工具庫！！！甚至在 React 項目中也可以用。J9b28資訊網——每日最新資訊28at.com

// Nodejs 端 index.js// 引入 WebSocket 庫const WebSocket = require('ws');// 引入 Vue 響應式 APIconst reactivity = require('@vue/reactivity')const {    ref,    computed,    watch} = reactivity// 創建 WebSocket 服務器const wss1 = new WebSocket.Server({    port: 8001});const wss2 = new WebSocket.Server({    port: 8002});// 記錄數字const count = ref(0)// 計算出 10 倍const sum = computed(() => 10 * count.value)// 連接1wss1.on('connection', (ws) => {    // 處理來自客戶端的消息    ws.on('message', (message) => {        // count 變化        count.value = Number(String(message))    });    // 監聽 count，并通知頁面2    watch(count, v => {        ws.send(v)    })});// 連接2wss2.on('connection', (ws) => {    // 處理來自客戶端的消息    ws.on('message', () => {        // 執行清空命令        count.value = 0    });    // 監聽 sum，并通知頁面2    watch(sum, v => {        ws.send(v)    })    // 模擬定時任務    setTimeout(() => {        ws.send(sum.value)    }, 3600 * 12);});<!-- Page1.vue --><template>  <div class="flex justify-center mb-3 text-4xl font-bold">頁面1</div>  <Button type="primary" @click="click">點擊更新數據</Button>  <div class="text-lg">當前數值：{{ count }}</div></template><script setup lang="ts">import { Button } from 'ant-design-vue';import { ref } from 'vue';const count = ref(0);// 創建 WebSocket 客戶端const socket = new WebSocket('ws://localhost:8001');const click = () => {  count.value++;  // 發送消息到服務器  socket.send(`${count.value}`);};// 接受服務端的消息socket.addEventListener('message', e => {  count.value = e.data;});</script><!-- Page2.vue --><template>  <div class="flex justify-center mb-3 text-4xl font-bold">頁面2</div>  <Button type="primary" @click="click">清空數據</Button>  <div class="text-lg">當前數值：{{ count }}</div></template><script setup lang="ts">import { Button } from 'ant-design-vue';import { ref } from 'vue';const count = ref(0);// 創建 WebSocket 客戶端const socket = new WebSocket('ws://localhost:8002');const click = () => {  // 發送消息到服務器  socket.send('Hello, server!');};// 接受服務端的消息socket.addEventListener('message', e => {  count.value = e.data;});</script>

J9b28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-112787-0.htmlVue3 無所不能！我用 Vue3 寫接口給前端用你們信嗎？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： SpringBoot整合RabbitMQ實現郵件異步發送

下一篇： 系統設計 | Java 應用中的配置含義和避坑