Vue3 无所不能！我用 Vue3 写接口给前端用你们信吗？

最近接到一个需求，有两个页面分别连接了两个Websocket连接，并且这两个页面可以通过Websocket去相互影响1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

为了方便讲解，以下会简化业务。1wh28资讯网——每日最新资讯28at.com

这两个页面简化后如下：1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

• 当点击页面1更新按钮后，页面1会+1，而 页面2 会变成 页面1 数值的10倍。
• 当点击页面2清空按钮后，页面1和2的数值都会变成0。
• 页面2需要定时去获取数值，并展示出来。

效果如下：1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

最普通的做法？

其实不难，只需要用 Nodejs新建两个 Websocket连接，然后维护一个 count变量即可。1wh28资讯网——每日最新资讯28at.com

npm i ws

至于怎么跨两个Websocket进行通信呢？其实也简单，无非就是定义两个全局变了，去存储两个Websocket实例呗！1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

接着就是前端页面进行Websocket通信，即可完成。1wh28资讯网——每日最新资讯28at.com

Page1

图片1wh28资讯网——每日最新资讯28at.com

Page2

图片1wh28资讯网——每日最新资讯28at.com

即可完成效果。1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

不太好维护吧？

其实这个需求唯一的难点就在于怎么去跨两个Websocket进行通信，上面的做法是定义两个全局变量去存储1wh28资讯网——每日最新资讯28at.com

但是感觉这样不太妥，如果以后Websocket连接实例多了，那么维护起来会不会很费劲？1wh28资讯网——每日最新资讯28at.com

我有个想法：能不能让每一个 Websocket 连接各自管自己的事1wh28资讯网——每日最新资讯28at.com

但是其实想要做到各管各的，是有难处的，难就难在于：他们都依赖于count的变化，一个实例改变了 count之后，怎么通知另一个实例去做操作呢？1wh28资讯网——每日最新资讯28at.com

想到这里我就想到了 Vue3，当数据变化时，可以监听数据变化，并在监听函数中去做你想做的事情1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

那么能不能把Vue3的那一套响应式 API 拿到 Nodejs中去用呢？1wh28资讯网——每日最新资讯28at.com

答案是：可以！！！Vue3是真的牛，他把 API 都拆出来放在 @vue/reactivity这个包中了，就算你不在浏览器环境，也能用这个包去做响应式逻辑，这个包拥有了几乎所有 Vue 的响应式 API。1wh28资讯网——每日最新资讯28at.com

npm i @vue/reactivity

我们只需要用到ref、computed、watch，即可让每个 Websocket 实例各管各的。1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

图片1wh28资讯网——每日最新资讯28at.com

其实大家可以把@vue/reactivity当做一个工具库来看，不要绑定上 Vue，他就是一个响应式工具库！！！甚至在 React 项目中也可以用。1wh28资讯网——每日最新资讯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>

1wh28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-112787-0.htmlVue3 无所不能！我用 Vue3 写接口给前端用你们信吗？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： SpringBoot整合RabbitMQ实现邮件异步发送

下一篇： 系统设计 | Java 应用中的配置含义和避坑