当前位置: 首页 > news >正文

vue2 封装 webSocket 开箱即用

第一步:

   下载 webSocket 

npm install vue-native-websocket --save

第二步:

  需要在 main.js 中 引入

import websocket from 'vue-native-websocket';
Vue.use(websocket, '', {connectManually: true, // 手动连接format: 'json', // json格式reconnection: true, // 是否自动重连reconnectionAttempts: 5, // 自动重连次数reconnectionDelay: 2000, // 重连间隔时间
});

 第三步:

    封装相关的连接和断开

 

 相关代码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

const socketService = {socket: null,init(username) {if (typeof WebSocket === "undefined") {alert("您的浏览器不支持socket");} else {
// ws://10.244.11.117:8089/dashboard/websocket/let path = "你的ws WebSocket 地址" + username; // 请求路径this.socket = new WebSocket(path);this.socket.onopen = this.open.bind(this);this.socket.onerror = this.error.bind(this);this.socket.onmessage = this.getMessage.bind(this);}},open() {console.log("socket连接成功");},error() {console.log("连接错误");},getMessage(msg) {return new Promise((resolve, reject) => {this.socket.onmessage = (msg) => {console.log(msg.data);// 利用promise 返回出去结果if (msg.data != '连接成功' && JSON.parse(msg.data)) {const data = JSON.parse(msg.data);resolve(data); // 将数据传递给调用者}// this.scrollInstance.refresh(); // 手动刷新滚动效果};});// this.scrollInstance.refresh(); // 手动刷新滚动效果},send(params) {if (this.socket) {this.socket.send(params);}},close() {console.log("socket已经关闭");}
};
//最后导出
export default socketService;

 第四步: 

引入使用

//路径是自己的啊
import socketService from "../sokect/index";

 mounted() {// 调用this.startSocket();},methods: {async startSocket() {// 这里是 username  socketService.init("warning-all");try {const msg = await socketService.getMessage();//打印出来 服务器给我的信息console.error(JSON.parse(msg.data) );} catch (error) {console.error("Error receiving message:", error);}},}

到这步接收信息已经OK了(记得和后端配合)


后续还有 给服务器发送信息 等.......正在开发中....... 谢谢

相关文章:

vue2 封装 webSocket 开箱即用

第一步: 下载 webSocket npm install vue-native-websocket --save 第二步: 需要在 main.js 中 引入 import websocket from vue-native-websocket; Vue.use(websocket, , {connectManually: true, // 手动连接format: json, // json格式reconnection:…...

使用fopen等标准C库来操作文件

fopen 需要的头文件&#xff1a; #include <stdio.h> 函数原型&#xff1a; FILE *fopen(const char *pathname, const char *mode); 参数&#xff1a; pathname: 文件路径mode: “r” &#xff1a;以只读方式打开文件&#xff0c;该文件必须存在。“w” &#xff…...

Spring-Cloud-Loadblancer详细分析_1

背景 从SpringCloud 2020 版本之后&#xff0c;组件移除了除 Eureka 以外&#xff0c;所有 Netflix 的相关&#xff0c;包括最常用的 Ribbon Hystrix 等&#xff0c;所以 SpringCloud 在 spring-cloud-commons 提供了Loadbalancer 用来替代 Ribbon。本系列就来介绍Loadbalance…...

键盘键码keyCode对照表

字母和数字键的键码值(KeyCode)按键键码按键键码A65J74B66K75C67L76D68M77E69N78F70O79G71P80H72Q81I73R82 字母和数字键的键码值(KeyCode)按键键码按键键码S83149T84250U85351V86452W87553X88654Y89755Z90856048957 数字键盘上的键的键码值(KeyCode)按键键码按键键码0968104…...

jupyter切换conda虚拟环境

环境安装 conda install nb_conda 进入你想使用的虚拟环境&#xff1a; conda activate your_env_name 在你想使用的conda虚拟环境中&#xff1a; conda install -y jupyter 在虚拟环境中安装jupyter&#xff1a; conda install -y jupyter 重启jupyter 此时我们已经把该安装…...

【数据结构•堆】经典问题:k路归并

题目描述 k路归并问题&#xff1a;   把k个有序表合并成一个有序表。&#xff08; k < 10^4 &#xff09; 输入输出格式 输入格式&#xff1a; 输入数据共有 2*k1 行。   第一行&#xff0c;一个整数k&#xff08; k < 10^4 &#xff09;&#xff0c;表示有k个有序…...

VUE3 动态路由

带参数的动态路由匹配 很多时候&#xff0c;我们需要将给定匹配模式的路由映射到同一个组件。例如&#xff0c;我们可能有一个 User 组件&#xff0c;它应该对所有用户进行渲染&#xff0c;但用户 ID 不同。在 Vue Router 中&#xff0c;我们可以在路径中使用一个动态字段来实现…...

CentOS软件包管理rpm、yum

一、软件包概述 Linux常见软件包分为两种&#xff0c;分别是源代码包、二进制文件包。源代码包是没有经过编译的包&#xff0c;需要经过GCC、C编译器编译才能运行&#xff0c;文件内容包含源代码文件&#xff0c;通常以.tar.gz、.zip、.rar结尾&#xff1b;二进制包无需编译&am…...

【VSCode】报错:出现段错误解决办法 (Segmentation fault)

VScode报错&#xff1a;Segmentation fault (core dumped)的解决办法 解决Program received signal SIGSEGV, Segmentation fault.的辛酸 Linux环境下段错误的产生原因及调试方法小结 Linux下的段错误Segmentationfault产生的原因及调试方法经典.pdf 在程序中&#xff0c;TF…...

Linux Centos 8 用户管理之重置密码

如果在使用linux系统时遇到系统密码问题无法进入系统或者操作的时候可以按照下面的方法重置用户密码。 一、root用户密码重置&#xff1a; 方式一&#xff1a; 1.重启电脑或虚拟机&#xff0c;在刚进引导界面时候按“e"键&#xff0c;进入编辑模式。 2.在”quiet"…...

C语言快速回顾(三)

前言 在Android音视频开发中&#xff0c;网上知识点过于零碎&#xff0c;自学起来难度非常大&#xff0c;不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》&#xff0c;结合我自己的工作学习经历&#xff0c;我准备写一个音视频系列blog。C/C是音视频必…...

【Apollo】Apollo-ros版本架构学习与源码分析

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Apollo-ros版本架构学习与源码分析。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&a…...

【Express.js】集成RabbitMQ

集成RabbitMQ 本节我们介绍在 express.js 中集成 rabbitmq. RabbitMQ 是一个消息队列中间件&#xff0c;常用于请求削峰&#xff0c;事务的队列处理&#xff0c;事件订阅机制的实现等。 准备工作 创建一个 express.js 项目&#xff08;本文基于evp-express-cli&#xff09;…...

UI美工设计岗位的基本职责概述(合集)

UI美工设计岗位的基本职责概述1 1、有良好的美术功底、设计新颖&#xff0c;整体配色及设计创意理念&#xff0c;能够独立完成整个网站页面设计及制作; 2、熟练运用DIV CSS&#xff0c;HTML 设计制作网页 ; 3、熟练运用Photoshop,Dreamweaver,Coreldraw(或Illustrator),Fla…...

最强自动化测试框架Playwright(23)-API测试

playwright支持进行API测试 示例&#xff1a; 如下代码创建API请求上下文&#xff0c;使用post方法请求API&#xff0c;并返回响应结果。 import playwright from playwright.sync_api import sync_playwrightwith sync_playwright() as p:api_request_contextp.request.new…...

k8s 自身原理 4

前面咱们分享了 mater 和 worker 节点里面都有哪些组件&#xff0c;他们又是各自主要负责的工作是什么&#xff0c;现在我们心里应该都有数了吧 master 节点&#xff1a; etcd 存储资源配置&#xff0c;ApiServer 提供 RESTful Api 用于交互&#xff0c;scheduler 用于调度 p…...

ZLMediaKit(webrtc)在linux上(CentOS7)部署与启动

一.ZLMediaKit(webrtc)在CentOS7部署与启动 # 1. 卸载旧版本 yum remove git # 2. 安装 yum 源的 Git 版本 yum install -y git # 3. 查看版本 git version # 输出 git version 1.8.3.1配置全局环境变量 # 1. 编辑配置文件 vim /etc/profile # 2. 在 /etc/profile 文件中末尾…...

汽车基础软件新「战争」:群雄混战,谁在抢跑?

中国车用基础软件迎来了发展的黄金窗口期。 当前&#xff0c;汽车电子电气架构正在加速向“跨域融合”的时代演进&#xff0c;汽车软件架构也在加速向SOA架构升级&#xff0c;软硬件分层解耦成为了实现“软件定义汽车”新开发模式的前提。 过去&#xff0c;汽车的所有功能开发…...

阿里云预装LAMP应用导致MySQL不显示访问密码如何解决

&#x1f600;前言 本篇博文是关于阿里云云服务器ECS部署MySQL过程中出现的一下坑&#xff0c;希望能够帮助到您&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家…...

SQL 自动清除7天前数据前收缩数据库

作用&#xff1a; 删除七天前数据库中间表的资料&#xff0c;并收缩数据库 delete-Ecustom-xml-midtable.sql delete Mid_bom where datediff(day,dty,getdate())>7 delete Mid_cus where datediff(day,dty,getdate())>7 delete Mid_exp where datediff(day,dty,getdate(…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟

众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了&#xff0c;延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp &#xff0c;边缘服务器拉流推送到云服务器 …...