vue3 封装WebSocket(直接复制)

创建文件WebSocket.js

只有基本的功能

import { ref } from 'vue';
import store from "@/store";export default function useWebSocket(url) {const messagesData = ref([]);// 创建WebSocket连接和相关方法const socket = new WebSocket(url);socket.onopen = () => {console.log('WebSocket连接已建立');};socket.onmessage = (event) => {const receivedMessage = JSON.parse(event.data);//接收到后端消息,根据业务逻辑自行处理};socket.onclose = () => {console.log('WebSocket连接已关闭');};return {messagesData,sendMessage: (message) => {if (socket.readyState === WebSocket.OPEN) {socket.send(message);}},closeConnection: () => {socket.close();}};
}
页面使用

一般是登陆成功时调用,可以在登陆页面引入(如果不是全局需要,那就在你需要的页面引入)

import useWebSocket from "./utils/WebSocket";
/*** 这段代码是放在登陆成功时调用,或者自身设置特定条件调用* 实例化useWebSocket* 获取token,无论vuex还是本地存储* 写好地址调用* store.dispatch可以保存更新后端的信息(根据自身业务需要,没有就删除)*/
let socket = ref(null);
const token = store.state.user.token;
socket.value = useWebSocket(`地址?token=${token}`);
store.dispatch("setMessagesData", socket.value.messagesData);
销毁
//一般是退出登录、离开某个页面时销毁
socket.value.closeConnection();
注意

当使用f5或者点击刷新页面以后, websocket连接就会强制关闭

我的处理方法是:每次进入程序前都会重新加载App.vue文件,因此在此文件执行创建websocket实例化最为合适,无论刷新进入哪个页面都将重新创建websocket。(可以写一些判断,例如判断是否有token,有则重新创建连接,否则啥也不做)

接受和发送消息 直接调用封装的函数即可

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

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

相关文章

《计算机网络简易速速上手小册》第6章:网络性能优化(2024 最新版)

文章目录 6.1 带宽管理与 QoS - 让你的网络不再拥堵6.1.1 基础知识6.1.2 重点案例:提高远程办公的视频会议质量实现步骤环境准备Python 脚本示例注意事项 6.1.3 拓展案例1:智能家居系统的网络优化实现思路Python 脚本示例 6.1.4 拓展案例2:提…

计算机网络_1.5 计算机网络的性能指标

1.5 计算机网络的性能指标 一、总览二、常用的八个计算机网络性能指标1、速率(1)数据量(2)速率(3)数据量与速率中K、M、G、T的数值辨析(4)【练习1】计算发送数据块的所需时间 2、带宽…

Unity引擎学习笔记之【角色动画器操作】

角色动画Character Animation 一、使用方法 1. 添加一个静态的角色模型,并确保这个角色模型绑定了Avatar 2. 创建一个动画器控制器 Animator Controller 3. 将动画器控制器拖动添加到Player的Animator控制器上 4. 双击即可打开控制器 5. 将带有动画的预设&#xf…

docker下nacos(1.2.0)的持久化

一、创建数据库 运行以下代码自动创建数据库和表 CREATE DATABASE IF NOT EXISTS nacos_config /*!40100 DEFAULT CHARACTER SET utf8 */; USE nacos_config;SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------------------------- -- Table structure for config_…

[Python] 如何在控制台进行输入输出

可莉今天带你来学习Python基础中在控制台的输入输出~ 接下来跟着可莉来学习吧~ 可莉将这篇博客收录在了:《Python》 可莉推荐的博主主页:Keven ’ s blog 目录 通过控制台输出 格式化输出 通过控制台输入 总结 通过控制台输出 我们通过print函数可以…

[VulnHub靶机渗透] WestWild 1.1

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏…

leetcode正则表达式匹配问题(困难)

1.题目描述 2.解题思路,这道题自己没做出来,看了官方的题解,感觉对自己来说确实是比较难想的。使用了动态规划的解决方案,这种方案看题解都不一定能看明白,不过有个评论画图讲解的非常明白。其实仔细看题解的话&#…

从一个小故事讲解观察者模式~

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 什么是观察者模式? 观察者模式在我们的日常生活中极其常见。 先来看看观察者模式的定义: 观察者模式定义了对象之间…

面试八股文(3)

文章目录 1.HashSet如何检查重复2.comparable和Comparator区别3.ConcurrentHashMap和Hashtable区别4.线程和进程5.并发与并行的区别6.为什么使用多线程7.使用多线程可能带来问题8.线程的生命周期和状态9.什么是上下文切换10.线程死锁11.产生死锁四个条件12.如何避免死锁 1.Hash…

使用API有效率地管理Dynadot域名,使用API进将其他平台的域名转移至dynadot

关于Dynadot Dynadot是通过ICANN认证的域名注册商,自2002年成立以来,服务于全球108个国家和地区的客户,为数以万计的客户提供简洁,优惠,安全的域名注册以及管理服务。 Dynadot平台操作教程索引(包括域名邮…

C++设计模式-里氏替换原则

里氏替换原则定义了继承规范。(封装、继承、多态) 定义1:类型S对象o1,类型T对象o2,o1换成o2时程序意图不变,那么S是T的子类。 定义2:使用子类不破坏父类的意图。 注意:如果子类不…

Convolutional Neural Network (CNN) 识别手写数字字体

介绍: 卷积神经网络(Convolutional Neural Network,CNN)是一种在计算机视觉领域广泛应用的深度学习模型。它主要用于图像识别、目标检测、图像分割等任务。 CNN的核心思想是利用卷积操作提取图像的特征。卷积操作是一种基于滤波器…

vue3:23—自定义hooks

正是因为有了hooks,组合式才发挥出了威力 其实 hooks 和 vue2 中的 mixin 有点类似,但是相对 mixins 而言, hooks 更清楚复用功能代码的来源, 更清晰易懂。 如何定义hooks 具备可复用功能,才需要抽离为 hooks 独立文件函数名/文…

jsp粉丝社区系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 粉丝社区系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0&…

类银河恶魔城学习记录1-5 CollisionCheck源代码 P32

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; u…

SpringBoot注解--06--注解@Validated

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1 简述1.1 Validated作用1.2 所有参数注解含义1.3 异常处理1.4 Valid和Validated比较Valid级联校验 2.Validated 分组校验1.1为何要分组校验?1.2 代码案…

洞察数字未来:2023年腾讯全球数字生态大会全景解析

随着数字技术的飞速发展,全球正步入一个全新的数字生态时代。作为业界瞩目的科技盛会,2023年腾讯全球数字生态大会汇聚了众多行业领袖、技术专家和创新者,共同探讨数字生态的最新趋势、挑战和机遇。 本文将从大会的核心议题、分享内容及其价值…

【SpringBoot】模板设计模式应用

一、前言 常见的设计模式有23种,我们不得不提到模板方法设计模式,这是一种在软件开发中广泛使用的行为型设计模式之一。 二、模板方式是什么 全称是模板方法设计模式。 模板模式是一种行为设计模式。它的实现思路是,创建一个 模板方法 me…

【C语言】static关键字的使用

目录 一、静态本地变量 1.1 静态本地变量的定义 1.2 静态本地变量和非静态本地变量的区别 二、静态函数 2.1 静态函数的定义 2.2 静态函数与非静态函数的区别 三、静态全局变量 3.1 静态全局变量的定义 3.2 静态全局变量和非静态全局变量的区别 四、静态结构体变量 …

机器学习6-逻辑回归

逻辑回归是机器学习中一种常用于二分类问题的监督学习算法。虽然名字中包含“回归”,但实际上它用于分类任务,特别是对于输出为两个类别的情况。逻辑回归通过使用 logistic 函数将输入映射到一个在0,1范围内的概率值,然后根据这个概率值进行分类。 以下是逻辑回归的基本概念…