同时创建多个websoket(初始化多个连接、断开的重连、每个连接定时发消息、每个连接存储接收的数据(vuex或者pinia))

可复制现成代码直接使用!!

1.下边的例子演示了创建10个WebSocket 实例,当其中某一个连接失败时,会自动进行重连

<template><div></div>
</template><script setup>
import { ref, reactive, onMounted } from "vue";
const person = reactive({});
const wsConnections = ref([]);
onMounted(() => {//初始化创建一个ip数组 遍历过后调用创建十个sokect实例const urls = ["wss://url1","wss://url2","wss://url3","wss://url4","wss://url5","wss://url6","wss://url7","wss://url8","wss://url9","wss://url10",];wsConnections.value = urls.map((url, index) => new WebSocketConnection(url, index));//以上是针对初始化创建十个soket  如初始化只创建一个sokey只需直接new实例就行
//   new WebSocketConnection(传入ip)  //只创建一个连接
});
class WebSocketConnection {constructor(url, index) {//连接的url地址this.url = url;this.ws = new WebSocket(url);this.bindEvents(); //创建实例过后的回调}//监听回调(连接成功、错误、断开、接收消息)bindEvents() {this.ws.onopen = () => {console.log(`${this.url} 连接成功.`);};this.ws.onerror = (error) => {console.error(`连接错误 ${this.url}: ${error}`);};this.ws.onclose = (e) => {console.log(`${this.url} 连接关闭`);if (e.code !== 1000) {console.log(`Reconnecting ${this.url}...`);//重连 此处可以加个setTimeout 多少秒后再重连this.reconnect();}};}//重连reconnect() {this.ws = new WebSocket(this.url);this.bindEvents();}
}
</script>
<style scoped lang='less'>
</style>

2.定时给后端发送消息

<template><div></div>
</template><script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
const person = reactive({});
const wsConnections = ref([]);
onMounted(() => {//初始化创建一个ip数组 遍历过后调用创建十个sokect实例const urls = ["wss://url1","wss://url2","wss://url3","wss://url4","wss://url5","wss://url6","wss://url7","wss://url8","wss://url9","wss://url10",];wsConnections.value = urls.map((url, index) => new WebSocketConnection(url, index));//以上是针对初始化创建十个soket  如初始化只创建一个sokey只需直接new实例就行//   new WebSocketConnection(传入ip)  //只创建一个连接
});
class WebSocketConnection {constructor(url, index) {//连接的url地址this.url = url;this.ws = new WebSocket(url);this.bindEvents(); //创建实例过后的回调this.startSending(); //给后端发送消息}//监听回调(连接成功、错误、断开、接收消息)bindEvents() {this.ws.onopen = () => {console.log(`${this.url} 连接成功.`);};this.ws.onerror = (error) => {console.error(`连接错误 ${this.url}: ${error}`);};this.ws.onclose = (e) => {console.log(`${this.url} 连接关闭`);if (e.code !== 1000) {console.log(`Reconnecting ${this.url}...`);//重连 此处可以加个setTimeout 多少秒后再重连this.reconnect();}};}//重连reconnect() {this.ws = new WebSocket(this.url);this.bindEvents();}//   给后端发送消息startSending() {this.interval = setInterval(() => {if (this.ws.readyState === WebSocket.OPEN) {this.ws.send("发给后端的");}}, 5000);}//   停止发消息时调用stopSending() {clearInterval(this.interval);}
}
onUnmounted(() => {wsConnections.value.forEach((connection) => {connection.stopSending(); // 停止定时消息connection.ws.close(); // 关闭WebSocket连接});
});
</script>
<style scoped lang='less'>
</style>

2.将十个链接收到的数据全部存在vuex 其他组件只使用第一个链接的数据

import { createStore } from 'vuex'export default createStore({state: {messages: []},mutations: {setMessages(state, payload) {// 我们这里假设payload的格式为 { index: n, message: msg }state.messages[payload.index] = payload.message},},actions: {}
})
修改WebSocketConnection 类,使其接收到消息的时候调用 setMessages mutation:
import { ref, onMounted, onUnmounted } from 'vue';
import store from '@/store'class WebSocketConnection {constructor(url, index) {this.url = url;this.index = index;this.ws = new WebSocket(url);this.bindEvents();this.startSending();}bindEvents() {// ...其它代码略 看上面this.ws.onmessage = (message) => {// 当接收到数据时,将数据保存到 Vuexstore.commit('setMessages', { index: this.index, message: message.data });};}// ...其它代码略 看上面
}// 在 onMounted 钩子函数中创建WebSocket连接
onMounted(() => {const urls = ['wss://url1', 'wss://url2', 'wss://url3', 'wss://url4', 'wss://url5', 'wss://url6', 'wss://url7', 'wss://url8', 'wss://url9', 'wss://url10'];wsConnections.value = urls.map((url, index) => new WebSocketConnection(url, index));
});

然后,在其他组件中以这种方式使用第一个Websocket的消息:

<template><div>Received Message: {{ message }}</div>
</template><script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const message = computed(() => store.state.messages[0]) // 获取第一个消息</script>

3.使用pinia将十个链接收到的数据全部存了 其他组件只使用第一个链接的数据

import { defineStore } from "pinia"
export const useUsersStore = defineStore('users', {// 其它配置项state: () => {return {messages: [],};},getters: {},actions: {setMessage(payload) {this.messages[payload.index] = payload.messages}}
})

然后,在 WebSocketConnection 类中调用 setMessage 来储存数据:

import { ref, onMounted, onUnmounted } from 'vue';
import { useUsersStore } from "@/store/user.js";class WebSocketConnection {constructor(url, index) {this.url = url;this.index = index;this.ws = new WebSocket(url);this.store = useUsersStore();this.bindEvents();this.startSending();}bindEvents() {// ...同上面this.ws.onmessage = (message) => {// 收到信息后,将其存储在Pinia中this.store.setMessage({ index: this.index, message: message.data });};}// ...同上面e...
}onMounted(() => {const urls = ['ws://url1', 'ws://url2', 'ws://url3', 'ws://url4', 'ws://url5', 'ws://url6', 'ws://url7', 'ws://url8', 'ws://url9', 'ws://url10'];wsConnections.value = urls.map((url, index) => new WebSocketConnection(url, index));});onUnmounted(() => {wsConnections.value.forEach(connection => {connection.stopSending();  connection.ws.close();  });});

然后在其他组件中可以像这样使用第一个连接收到的数据:

<template><div>Received Message: {{ message }}</div>
</template><script setup>
import { computed } from 'vue'
import { useUsersStore } from "@/store/user.js";const store = useUsersStore ()const message = computed(() => store.messages[0]) // 使用第一条消息</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/157607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ssh和scp的基本使用

ssh和scp的基本使用 1&#xff0c;ssh 本地连接远程服务器 ssh userhostname第一次连接时输入密码会生成密钥&#xff0c;后续就可以直接连接了 ssh配置文件&#xff1a;/etc/ssh/sshd_config 2&#xff0c;scp 传输本地文件至远程服务器 命令格式 scp [参数] [原路径] […

求二叉树的最大密度(可运行)

最大密度&#xff1a;二叉树节点数值的最大值 如果没有输出结果&#xff0c;一定是建树错误&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 我设置输入的是字符型数据&#xff0c;比较的ASCII值。 输入&#xff1a;FBE###CE### 输…

基于单片机设计的气压与海拔高度检测计(采用MPL3115A2芯片实现)

一、前言 随着科技的不断发展&#xff0c;在许多领域中&#xff0c;对气压与海拔高度的测量变得越来越重要。例如&#xff0c;对于航空和航天工业、气象预报、气候研究等领域&#xff0c;都需要高精度、可靠的气压与海拔高度检测装置。针对这一需求&#xff0c;基于单片机设计…

19.删除链表的倒数第 N 个节点

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;19. 删除链表的倒数第 N 个结点 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 使用双指针找到倒数第 N1 个节点后删除链表的第 N 个节点即可。注意当 N 为链表长度时&#xff0c;倒数第 N1 …

Google Play 搜索不到应用

Google Play搜索不到已上架应用 这可能是由于多种原因造成的。首先&#xff0c;请确保你的应用在 Google Play 商店上已经成功上架&#xff0c;并且通过了审核。 如果你的应用已经上架&#xff0c;但在搜索时无法找到&#xff0c;可能有以下一些原因&#xff1a; 「1.索引延迟…

wpf devexpress实现输入验证使用验证规则

打开此项目 目标是一个registration form行为像google registration form。打开Google registration form 研究它的行为。当form是第一次显示&#xff0c;它的“Register”按钮应该启动&#xff1b;编辑器没有提示任何输入错误。输入First Name编辑器字段&#xff0c;清理输入…

端到端数据保护浅析

作为最重要的数据保护方式之一&#xff0c;NVMe端到端数据保护被众多企业用户所看重&#xff0c;它可以有效降低静默错误的发生&#xff0c;保护范围涵盖数据自Host端生成直至写入SSD NAND当中&#xff0c;以及从SSD NAND读取直至返回Host的全部流程。它使得数据不论是在SSD内部…

服务器安全怎么保障,主机安全软件提供一站式保护

服务器主机安全是指保护服务器主机免受未经授权的访问、破坏、窃取或滥用。 现在如今大部分公司、单位的相关数据都是存储在云端服务器上&#xff0c;这样即方便查询也方便保存。 可是一旦服务器主机受到威胁&#xff0c;损失将会不可估计。 以下是一些服务器主机安全的建议…

支付宝生僻字选择器

本文的数据来源于支付宝网页版本生僻字选择器。 let rareWords[{spell: "a",words: ["奡", "靉", "叆"]}, {spell: "b",words: ["仌", "昺", "竝", "霦", "犇", "愊…

粒子系统three.js

Three.js是一个非常流行的JavaScript 3D库&#xff0c;它提供了许多强大的功能来创建各种3D场景和动画效果。其中粒子系统是Three.js中非常重要的一部分&#xff0c;它可以用于创建各种特效&#xff0c;如火焰、烟雾、雨雪等等。本文将详细讲解Three.js中粒子系统的使用。 1. …

MySQL数据库——存储过程-条件处理程序(通过SQLSTATE指定具体的状态码,通过SQLSTATE的代码简写方式 NOT FOUND)

目录 介绍 案例 通过SQLSTATE指定具体的状态码 通过SQLSTATE的代码简写方式 NOT FOUND 介绍 条件处理程序&#xff08;Handler&#xff09;可以用来定义在流程控制结构执行过程中遇到问题时相应的处理步骤。具体语法为&#xff1a; DECLARE handler_action HANDLER FOR c…

Linux调度域与调度组

引入调度域的讨论可以参考这篇文章。这篇笔记重点分析了内核调度域相关的数据结构以及内核用于构建调度域的代码实现&#xff0c;以此来加深对调度域的理解。调度域是调度器进行负载均衡的基础。 调度域拓扑层级 整个系统的调度域组成一个层级结构&#xff0c;内核设计了stru…

上海亚商投顾:沪指冲高回落 短剧、地产股集体走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数早盘冲高&#xff0c;创业板指盘初涨超1%&#xff0c;午后则集体下行翻绿&#xff0c;北证50一度大涨…

MyBatis:关联查询

MyBatis 前言关联查询附懒加载对象为集合时的关联查询 前言 在 MyBatis&#xff1a;配置文件 文章中&#xff0c;最后介绍了可以使用 select 标签的 resultMap 属性实现关联查询&#xff0c;下面简单示例 关联查询 首先&#xff0c;先创建 association_role 和 association_…

【nacos】Java调用nacos SDK获取配置信息为null

通过 Nacos 提供的 Java 客户端 SDK 来获取配置信息&#xff0c;但是结果是null <!--添加maven依赖 --> <dependency><groupId>com.alibaba.nacos</groupId><artifactId>nacos-client</artifactId><version>2.1.2</version> …

【华为OD机试python】告警抑制【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 告警抑制,是指高优先级告警抑制低优先级告警的规则。高优先级告警产生后, 低优先级告警不再产生。请根据原始告警列表和告警抑制关系,给出实际产生的告警列表。 不会出现循环抑制的情况…

Postgresql常用命令函数

1、string_agg()函数 1.1用法: string_agg(expression, delimiter)&#xff0c;参数类型(text, text) or (bytea, bytea)&#xff0c;返回类型和参数类型一致,第一个参数是字段名&#xff0c;第二个参数是样式&#xff0c;比如&#xff0c;或者#分隔。 1.2实战: SELECT * FR…

深入解析数据结构与算法之堆

文章目录 &#x1f966;引言&#xff1a;&#x1f966;什么是堆&#x1f966;大顶堆与小顶堆&#x1f9c4;大顶堆&#xff08;Max Heap&#xff09;&#x1f9c4;小顶堆&#xff08;Min Heap&#xff09; &#x1f966;堆的表示&#x1f9c4;数组表示&#xff1a;&#x1f9c4;…

设计模式总结-笔记

一个目标&#xff1a;管理变化&#xff0c;提供复用&#xff01; 两种手段&#xff1a;分解vs.抽象 八大原则&#xff1a; 依赖倒置原则&#xff08;DIP&#xff09; 开放封闭原则&#xff08;OCP&#xff09; 单一职责原则&#xff08;SRP&#xff09; Liskov替换原则&a…

C/C++内存管理(1):C/C++内存分布,C++内存管理方式

一、C/C内存分布 1.1 1.2 二、C内存管理方式 C可以通过操作符new和delete进行动态内存管理。 2.1 new和delete操作内置类型 int main() {int* p1 new int;// 注意区分p2和p3int* p2 new int(10);// 对*p2进行初始化 10int* p3 new int[10];// p3 指向一块40个字节的int类…