Vue 團隊正式發(fā)布！未來 Vue 也能寫后端啦！
背景需求
最近，我遇到了一個需求：有兩個頁面，每個頁面各自連接到一個獨立的WebSocket。這兩個頁面能夠通過WebSocket相互影響。
圖片
為了更好地理解需求，以下是兩個頁面的簡化版本：
圖片
頁面1和頁面2的需求：
- 頁面1：當點擊更新按鈕時，頁面1的數(shù)值加1，同時頁面2的數(shù)值變?yōu)轫撁?數(shù)值的10倍。
- 頁面2：當點擊清空按鈕時，頁面1和頁面2的數(shù)值都會清零。
- 頁面2：定時獲取頁面1的數(shù)值，并展示出來。
效果演示：
圖片
簡單實現(xiàn)方案
實現(xiàn)這個需求并不復雜，核心思路是通過Node.js創(chuàng)建兩個WebSocket連接，并通過一個count變量來同步頁面的數(shù)據(jù)。
首先，安裝ws庫：
npm install ws如何實現(xiàn)兩個WebSocket之間的通信呢？其實就是維護兩個全局變量來存儲這兩個WebSocket實例。
圖片
然后，在前端頁面通過 WebSocket 通信來實現(xiàn)數(shù)據(jù)同步。
頁面1
圖片
頁面2
圖片
通過這種方式，基本實現(xiàn)了需求，效果如下：
圖片
優(yōu)化思路
上述方法雖能實現(xiàn)需求，但維護起來可能會很麻煩，尤其是當多個WebSocket連接實例增加時，代碼可能變得難以管理。
我有一個想法：能否讓每個WebSocket連接管理自己的狀態(tài)？
問題在于，盡管每個連接管理自己的狀態(tài)，它們?nèi)匀恍枰蕾囈粋€共同的變量（即count）。當某個實例更新了count，另一個實例如何被通知并作出反應呢？
想到這里，我就聯(lián)想到了 Vue3 的響應式機制。Vue3 提供了一套非常優(yōu)秀的響應式 API，當數(shù)據(jù)變化時，它能夠自動通知相關(guān)的組件進行更新。
圖片
能否將 Vue3 的響應式 API 移植到Node.js環(huán)境中呢？
答案是：可以！Vue3 將響應式 API 拆分成了一個獨立的庫@vue/reactivity，即使在 Node.js 環(huán)境下，也可以使用這個庫來實現(xiàn)響應式功能。
通過安裝這個包：
npm install @vue/reactivity我們可以使用ref、computed 和 watch來讓每個WebSocket 實例獨立管理自己的狀態(tài)。
圖片
最終的效果展示：
圖片
代碼實現(xiàn)（完整方案）
可以將@vue/reactivity作為一個響應式工具庫使用，它不僅可以在Node.js環(huán)境下使用，甚至可以在 React 項目中使用。
Node.js 端：index.js
// 引入 WebSocket 庫
const WebSocket = require('ws');
// 引入 Vue3 響應式 API
const reactivity = require('@vue/reactivity');
const { ref, computed, watch } = reactivity;
// 創(chuàng)建 WebSocket 服務器
const wss1 = new WebSocket.Server({ port: 8001 });
const wss2 = new WebSocket.Server({ port: 8002 });
// 記錄數(shù)字
const count = ref(0);
// 計算數(shù)值的 10 倍
const sum = computed(() =>10 * count.value);
// 處理連接1
wss1.on('connection', (ws) => {
ws.on('message', (message) => {
// 更新 count 的值
count.value = Number(message);
});
// 監(jiān)聽 count 變化，并發(fā)送到頁面1
watch(count, (newValue) => {
ws.send(newValue);
});
});
// 處理連接2
wss2.on('connection', (ws) => {
ws.on('message', () => {
// 清空 count 和 sum
count.value = 0;
});
// 監(jiān)聽 sum 變化，并發(fā)送到頁面2
watch(sum, (newValue) => {
ws.send(newValue);
});
// 模擬定時任務，定期發(fā)送 sum
setTimeout(() => {
ws.send(sum.value);
}, 3600 * 12); // 12小時后發(fā)送
});頁面1：Page1.vue
<template>
<div class="flex justify-center mb-3 text-4xl font-bold">頁面1</div>
<Button type="primary" @click="click">點擊更新數(shù)據(jù)</Button>
<div class="text-lg">當前數(shù)值：{{ count }}</div>
</template>
<script setup lang="ts">
import { Button } from'ant-design-vue';
import { ref } from'vue';
const count = ref(0);
// 創(chuàng)建 WebSocket 客戶端
const socket = new WebSocket('ws://localhost:8001');
const click = () => {
count.value++;
// 發(fā)送更新后的 count 到服務器
socket.send(`${count.value}`);
};
// 接收來自服務端的消息
socket.addEventListener('message', (e) => {
count.value = e.data;
});
</script>頁面2：Page2.vue
<template>
<div class="flex justify-center mb-3 text-4xl font-bold">頁面2</div>
<Button type="primary" @click="click">清空數(shù)據(jù)</Button>
<div class="text-lg">當前數(shù)值：{{ count }}</div>
</template>
<script setup lang="ts">
import { Button } from'ant-design-vue';
import { ref } from'vue';
const count = ref(0);
// 創(chuàng)建 WebSocket 客戶端
const socket = new WebSocket('ws://localhost:8002');
const click = () => {
// 向服務器發(fā)送清空命令
socket.send('Hello, server!');
};
// 接收來自服務端的消息
socket.addEventListener('message', (e) => {
count.value = e.data;
});
</script>最終效果
圖片
這樣，通過 Vue3 的響應式 API 和WebSocket的結(jié)合，我們可以輕松地實現(xiàn)兩個頁面間的實時數(shù)據(jù)同步，并使代碼更加易于維護和擴展。
