5月iOS設備好評榜：iPhone 14僅排第43？
來到新的一月，安兔兔的各個榜單又重新匯總了數據，像安卓陣營的榜單都有著比較大的變動，不過iOS由于設備的更新換代并沒有那么快，所以相對來說變化并不大，特別是iOS好評榜，老款設
最近接到一個需求，有兩個頁面分別連接了兩個Websocket連接，并且這兩個頁面可以通過Websocket去相互影響
圖片
為了方便講解，以下會簡化業務。
這兩個頁面簡化后如下：
圖片
效果如下：
圖片
其實不難，只需要用 Nodejs新建兩個 Websocket連接，然后維護一個 count變量即可。
npm i ws至于怎么跨兩個Websocket進行通信呢？其實也簡單，無非就是定義兩個全局變了，去存儲兩個Websocket實例唄！
圖片
接著就是前端頁面進行Websocket通信，即可完成。
圖片
圖片
即可完成效果。
圖片
其實這個需求唯一的難點就在于怎么去跨兩個Websocket進行通信，上面的做法是定義兩個全局變量去存儲
但是感覺這樣不太妥，如果以后Websocket連接實例多了，那么維護起來會不會很費勁？
我有個想法：能不能讓每一個 Websocket 連接各自管自己的事
但是其實想要做到各管各的，是有難處的，難就難在于：他們都依賴于count的變化，一個實例改變了 count之后，怎么通知另一個實例去做操作呢？
想到這里我就想到了 Vue3，當數據變化時，可以監聽數據變化，并在監聽函數中去做你想做的事情
圖片
那么能不能把Vue3的那一套響應式 API 拿到 Nodejs中去用呢？
答案是：可以！！！Vue3是真的牛，他把 API 都拆出來放在 @vue/reactivity這個包中了，就算你不在瀏覽器環境，也能用這個包去做響應式邏輯，這個包擁有了幾乎所有 Vue 的響應式 API。
npm i @vue/reactivity我們只需要用到ref、computed、watch，即可讓每個 Websocket 實例各管各的。
圖片
圖片
其實大家可以把@vue/reactivity當做一個工具庫來看，不要綁定上 Vue，他就是一個響應式工具庫！！！甚至在 React 項目中也可以用。
// 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>本文鏈接：http://m.www897cc.com/showinfo-26-112787-0.htmlVue3 無所不能！我用 Vue3 寫接口給前端用你們信嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號