Vue3利用Websocket举行跨页面通讯

安装

2. npm i ws

复制代码

安装vue3相应式库

2. npm i @vue/reactivity

复制代码

服务端创建毗连--nodejs

2. // Nodejs 端 index.js
4. // 引入 WebSocket 库
5. const WebSocket = require('ws');
6. // 引入 Vue 响应式 API
7. const reactivity = require('@vue/reactivity')
9. const {
10.     ref,
11.     computed,
12.     watch
13. } = reactivity
15. // 创建 WebSocket 服务器
16. const wss1 = new WebSocket.Server({
17.     port: 8001
18. });
19. const wss2 = new WebSocket.Server({
20.     port: 8002
21. });
24. // 记录数字
25. const count = ref(0)
26. // 计算出 10 倍
27. const sum = computed(() => 10 * count.value)
29. // 连接1
30. wss1.on('connection', (ws) => {
31.     // 处理来自客户端的消息
32.     ws.on('message', (message) => {
33.         // count 变化
34.         count.value = Number(String(message))
35.     });
36.     // 监听 count，并通知页面2
37.     watch(count, v => {
38.         ws.send(v)
39.     })
40. });
42. // 连接2
43. wss2.on('connection', (ws) => {
44.     // 处理来自客户端的消息
45.     ws.on('message', () => {
46.         // 执行清空命令
47.         count.value = 0
48.     });
49.     // 监听 sum，并通知页面2
50.     watch(sum, v => {
51.         ws.send(v)
52.     })
54.     // 模拟定时任务
55.     setTimeout(() => {
56.         ws.send(sum.value)
57.     }, 3600 * 12);
58. });

复制代码

第一个页面毗连8081--page1.vue

2. <template>
3.   <div class="flex justify-center mb-3 text-4xl font-bold">页面1</div>
4.   <Button type="primary" @click="click">点击更新数据</Button>
5.   <div class="text-lg">当前数值：{{ count }}</div>
6. </template>
8. <script setup lang="ts">
9. import { Button } from 'ant-design-vue';
10. import { ref } from 'vue';
12. const count = ref(0);
14. // 创建 WebSocket 客户端
15. const socket = new WebSocket('ws://localhost:8001');
17. const click = () => {
18.   count.value++;
19.   // 发送消息到服务器
20.   socket.send(`${count.value}`);
21. };
23. // 接受服务端的消息
24. socket.addEventListener('message', e => {
25.   count.value = e.data;
26. });
27. </script>

复制代码

第二个页面毗连8082--page2.vue

2. <template>
3.   <div class="flex justify-center mb-3 text-4xl font-bold">页面2</div>
4.   <Button type="primary" @click="click">清空数据</Button>
5.   <div class="text-lg">当前数值：{{ count }}</div>
6. </template>
8. <script setup lang="ts">
9. import { Button } from 'ant-design-vue';
10. import { ref } from 'vue';
12. const count = ref(0);
14. // 创建 WebSocket 客户端
15. const socket = new WebSocket('ws://localhost:8002');
17. const click = () => {
18.   // 发送消息到服务器
19.   socket.send('Hello, server!');
20. };
22. // 接受服务端的消息
23. socket.addEventListener('message', e => {
24.   count.value = e.data;
25. });
26. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金