Vue 如何使用WebSocket与服务器建立链接 持续保持通信

WebSocket

浏览器通过JavaScript向服务器发出建立WebSocket链接的请求,链接建立后,客户端和服务器端就可以通过TCP链接直接交互数据。WebSocket链接后可以通过send()方法来向服务器发送数据,并通过onnessage事件来接受服务器返回的数据。

创建WebSocket对象

let ws = new WebSocket(server);

WebSocket参考

WebSocket - Web API 接口参考 | MDN

代码

<template><el-row class="app-container"><el-button type="primary" @click="testSend">主要按钮</el-button></el-row>
</template><script>export default {name: 'Monitoring',data() {return {websocket: null, // WebSocket对象reconnectInterval: 3000, // 重连间隔时间(毫秒)restartWebsocket: null , // 重启定时器heartbeatInterval: null, // 心跳定时器};},created() {if (typeof WebSocket == "undefined") {console.log("您的浏览器不支持WebSocket");} else {this.setupWebSocket(); // 创建WebSocket连接}},methods: {testSend() { // 测试const send = {"keywords": "xxx",}this.sendMessage(JSON.stringify(send));},// websocket初始化setupWebSocket() {this.websocket = new WebSocket("ws://xxx"); // 创建WebSocket连接this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数},closeWebSocket() { // 关闭if (this.websocket) {this.websocket.close(); // 关闭WebSocket连接}},// 开启 WebSocket;启动心跳检测onWebSocketOpen() {console.log("WebSocket connection is open");this.startHeartbeat();},// 处理从服务器接收的消息onWebSocketMessage(event) {if (event.data) {const message = JSON.parse(event.data);//    根据业务来处理数据console.log("Message from server ", message);}},// 关闭 WebSocket;停止心跳检测onWebSocketClose() {console.log("WebSocket connection is closed");this.stopHeartbeat(); // WebSocket连接关闭时,停止心跳检测this.restartWebsocket = setTimeout(this.setupWebSocket, this.reconnectInterval); // 在一定时间后重连WebSocket},// 向服务器发送消息sendMessage(message) {if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {this.websocket.send(message); // 发送消息到WebSocket服务器}},// 开启心跳检测startHeartbeat() {this.heartbeatInterval = setInterval(() => {if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {this.websocket.send(); // 发送心跳消息}}, 1000); // 每1秒发送一次心跳},// 停止心跳检测stopHeartbeat() {if (this.heartbeatInterval) {clearInterval(this.heartbeatInterval); // 停止心跳检测定时器}},// 停止重启检测stopRestartWebsocket() {if (this.restartWebsocket) {clearInterval(this.restartWebsocket); // 停止心跳检测定时器}},},beforeDestroy() {this.stopHeartbeat() // 停止心跳this.stopRestartWebsocket() // 停止重启this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接},
}
</script><style scoped></style>

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

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

相关文章

C语言大师(5)构造函数和析构函数

引言 在C的面向对象编程中&#xff0c;构造函数和析构函数扮演着至关重要的角色。它们分别管理对象的初始化和销毁过程&#xff0c;确保资源的有效分配和释放。了解这些函数如何工作&#xff0c;对于编写高效和可靠的C程序至关重要。 1. 构造函数 构造函数在每次创建类的新对…

数据操作——缺失值处理

缺失值处理 缺失值的处理思路 如果想探究如何处理无效值, 首先要知道无效值从哪来, 从而分析可能产生的无效值有哪些类型, 在分别去看如何处理无效值 什么是缺失值 一个值本身的含义是这个值不存在则称之为缺失值, 也就是说这个值本身代表着缺失, 或者这个值本身无意义, 比如…

GPT应用程序的开发注意事项

GPT应用程序的开发语言可以选择多种语言&#xff0c;主要取决于您的偏好、团队的技能以及应用程序的具体需求。以下是一些常见的用于GPT应用程序开发的编程语言&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交…

项目管理流程

优质博文 IT-BLOG-CN 一、简介 项目是为提供某项独特产品【独特指:创造出与以往不同或者多个方面与以往有所区别产品或服务&#xff0c;所以日复一日重复的工作就不属于项目】、服务或成果所做的临时性【临时性指:项目有明确的开始时间和明确的结束时间&#xff0c;不会无限期…

深入探讨JavaSE:从基础到高级

目录 1. JavaSE的基础知识 2. 标准API库 3. 异常处理与调试技巧 4. JavaSE的高级特性 5. JavaSE与新技术的整合 结语 JavaSE&#xff08;Java Standard Edition&#xff09;是Java平台的标准版&#xff0c;是Java编程语言的基础。它提供了一系列核心的API和工具&#xff0…

【Web前端开发基础】CSS的盒子模型

CSS的盒子模型 一、学习目标 能够认识不同选择器的优先级公式能够进行CSS权重叠加计算&#xff0c;分析并解决CSS 冲突问题能够认识盒子模型的组成部分能够掌握盒子模型的边框、内边距、外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象&#xff0c;并知…

Linux用户空间和内核空间所有15种内存分配方法

在Linux操作系统中&#xff0c;内存管理是一个关键的系统功能。用户空间和内核空间分别使用不同的函数来申请内存。以下是用户空间和内核空间内存申请函数的详细列表&#xff1a; Linux用户空间内存申请函数 1. malloc() 函数&#xff1a; void* malloc(size_t size); 用于…

在IDEA中使用快捷键让XML注释更加规范

Setting -> Editor -> Code Style -> XML 取消勾选 Line comment at first column 这样我们在使用ctrl / 快速注释时&#xff0c;就可以让注释符号紧贴注释内容&#xff0c;不出现空格。

如何唯一标识一个进程

如何唯一标识一个进程 进程ID (PID)&#xff1a; 每个运行中的进程都有一个全局唯一的整数标识符&#xff0c;称为进程ID&#xff08;Process ID&#xff09;。PID由内核分配&#xff0c;并在整个系统范围内保持唯一。 在shell中输入echo $$来查看当前shell的进程ID&#xf…

java 中 Iterator 与Iterable的作用

如果需要按照元素的自然顺序进行排序&#xff0c;应该使用哪个集合类&#xff1f; 如果需要按照元素的自然顺序进行排序&#xff0c;应该使用TreeSet或TreeMap集合类。 TreeSet&#xff1a;TreeSet 是一个有序的集合&#xff0c;它会使用元素的自然顺序对元素进行排序&#xf…

ip_vs 的管理以及 keepalived + lvs 案例

ip_vs 的管理 ipvsadm 与 keepalived for lvs ipvsadm 命令及参数介绍 部署和配置LVS服务会经常用到一些命令&#xff0c;如ipvsadm&#xff0c;可以使用“ipvsadm -help”命令查看使用帮助。 ipvsadm 命令的常用参数及其说明如下&#xff1a; # 添加虚拟服务器# 语法&#x…

PLC从HTTP服务端获取JSON文件,解析数据到寄存器

智能网关IGT-DSER集成了多种PLC协议&#xff0c;方便实现各种PLC与HTTP服务端之间通讯。通过网关的参数配置软件绑定JSON文件的字段与PLC寄存器地址&#xff0c;配置URL&#xff0c;即可采用POST命令&#xff0c;将JSON文件提交给HTTP的服务端&#xff1b; 服务端有返回的JSON&…

【JavaEE】认识网络的工作原理

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

66 C++对象模型探索。C++编译器在什么时候给我们创建默认的构造函数?

一 前提&#xff0c;关于C编译器给我们生成 默认构造函数 的错误认知 传统知识认为&#xff1a;如果在一个类中&#xff0c;我们没有定义任何的构造函数&#xff0c;那么编译器会为我们隐式自动定义一个默认的构造函数&#xff0c;我们称这种构造函数为 "合成的默认构造函…

德思特方案|EMI兼容测试方案——匹配不同测试标准,准确高效!

方案背景 近场测试非常适合产品开发阶段辐射发射的EMI预兼容测试。在EMC测试中&#xff0c;进行辐射发射测试时&#xff0c;通常天线离被测物EUT很远&#xff0c;进行的都是远场测量。标准的远场辐射发射测试&#xff0c;可以准确定量的告诉我们被测件是否符合相应的EMC/EMI标…

网络工程师:新兴科技基础知识面试题(十三)

112.对区块链的理解与看法&#xff1f; 区块链是一种分布式的、公开透明的数据库技术&#xff0c;以区块的形式将交易数据进行链式连接。它通过去中心化的方式&#xff0c;将数据存储和交易验证的权力分散给网络中的多个节点&#xff0c;提供了一种安全、可信的数据交换和存储方…

case语句、case分支应用示例、函数及中断控制、字符串截取、替换、删除

1 案例1&#xff1a;中断及退出 1.1 问题 本案例要求编写两个Shell脚本&#xff0c;相关要求如下&#xff1a; 从键盘循环取整数&#xff08;0结束&#xff09;并求和&#xff0c;输出最终结果 1.2 方案 通过break、continue、exit在Shell脚本中实现中断与退出的功能。 e…

SpringCloudConfig+SpringCloudBus+Actuator+Git实现Eureka关键配置属性热更新(全程不重启服务)

文章目录 前言1.痛点2.解决方案3.具体实现3.1搭建热配置服务3.2编写配置文件3.3搭建版本控制仓库3.4Eureka-Client引入以下依赖3.5Eureka-Client微服务编写以下配置bootstrap.yml提前加载3.6分别编写测试Controller3.7测试效果3.8下线场景压测 4.SpringCloudBus优化 前言 在上…

vue组件间通信

Vue组件之间通信方式有哪些 一、父子组件通讯 1、props&#xff0c;emit 父组件可以通过props给子组件传递变量。子组件可以通过emit派发自定义事件&#xff0c;使父组件可以获得事件函数传递过来的形参。 2、$parent、$children、ref 父组件可以通过 c h i l d r e n 获取…

imgaug库图像增强指南(32):塑造【雪景】效果的视觉魔法

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…