Vue3使用Websocket进行跨页面通信

安装

npm i ws

安装vue3响应式库

npm i @vue/reactivity

服务端创建连接--nodejs

// Nodejs 端 index.js// 引入 WebSocket 库
const WebSocket = require('ws');
// 引入 Vue 响应式 API
const 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)// 连接1
wss1.on('connection', (ws) => {// 处理来自客户端的消息ws.on('message', (message) => {// count 变化count.value = Number(String(message))});// 监听 count，并通知页面2watch(count, v => {ws.send(v)})
});// 连接2
wss2.on('connection', (ws) => {// 处理来自客户端的消息ws.on('message', () => {// 执行清空命令count.value = 0});// 监听 sum，并通知页面2watch(sum, v => {ws.send(v)})// 模拟定时任务setTimeout(() => {ws.send(sum.value)}, 3600 * 12);
});

第一个页面连接8081--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>

第二个页面连接8082--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>