最近接到一个需求品色堂永远免费，有两个页面辞别吞并了两个Websocket吞并，何况这两个页面不错通过Websocket去互相影响

为了浅近训练，以下会简化业务

这两个页面简化后如下

当点击页面1更新按钮后，页面1会+1，而 页面2 会形成 页面1 数值的10倍

当点击页面2清空按钮后，页面1和2的数值王人会形成0

页面2需要定时去获得数值，并展示出来

为止如下

最无为的作念法？

其实不难，只需要用 Nodejs新建两个 Websocket吞并，然后艳羡一个 count变量即可

npm i ws

至于奈何跨两个Websocket进行通讯呢？其实也粗造，无非即是界说两个全局变量，去存储两个Websocket实例呗

接着即是前端页面进行Websocket通讯，即可完成

Page1

Page2

即可完成为止

不太好艳羡吧？

其实这个需求独一的难点就在于奈何去跨两个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);}); 页面1 点击更新数据 现时数值：{{ count }}

结语

感谢您的不雅看阅读，如若对你有匡助的话，请点点柔顺呗