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

使用WebSocket 获取实时数据

回车发送数据,模拟服务器发送数据

效果图:

源码:

<template><div><h1>WebSocket 实时数据</h1><input type="text" v-model="ipt" @keyup.enter="sendMessage(ipt)"><div v-if="message"><h3>接收到的数据:</h3><pre>{{ message }}</pre></div><div v-else><p>等待 WebSocket 消息...</p></div></div></template><script>export default {data() {return {ipt:'',ws: null,  // WebSocket 实例message: null,  // 接收到的消息isConnected: false,  // 是否已连接};},methods: {// 初始化 WebSocket 连接initWebSocket() {const wsUrl = 'ws://124.222.224.186:8800'; // WebSocket 服务器 URLthis.ws = new WebSocket(wsUrl);// 连接打开时的回调this.ws.onopen = () => {console.log('WebSocket 已连接');this.isConnected = true;};// 接收到消息时的回调this.ws.onmessage = (event) => {console.log('收到消息:', event.data);this.message = event.data.slice(19);  // 更新接收到的消息};// 连接关闭时的回调this.ws.onclose = () => {console.log('WebSocket 连接关闭');this.isConnected = false;};// 连接错误时的回调this.ws.onerror = (error) => {console.error('WebSocket 错误:', error);};},// 发送消息到 WebSocket 服务器sendMessage(message) {if (this.ws && this.ws.readyState === WebSocket.OPEN) {this.ws.send(message);console.log('发送消息:', message);} else {console.log('WebSocket 连接未开启');}},},// Vue 生命周期钩子mounted() {// 组件挂载时初始化 WebSocket 连接this.initWebSocket();},beforeDestroy() {// 在组件销毁之前,关闭 WebSocket 连接if (this.ws) {this.ws.close();console.log('WebSocket 连接已关闭');}},};</script><style scoped>h1 {color: #333;}pre {background-color: #f4f4f4;padding: 10px;border-radius: 5px;}</style>

相关文章:

使用WebSocket 获取实时数据

回车发送数据&#xff0c;模拟服务器发送数据 效果图&#xff1a; 源码&#xff1a; <template><div><h1>WebSocket 实时数据</h1><input type"text" v-model"ipt" keyup.enter"sendMessage(ipt)"><div v-if…...

阿里云服务器上安装配置Logtail日志收集客户端

在当今的云计算时代,有效的日志管理对于监控、故障排查和性能优化至关重要。作为阿里云用户,您可以利用阿里云强大的日志服务(SLS)来管理您的日志。而Logtail,作为SLS的核心组件之一,在日志收集和传输中扮演着关键角色。本文将为您详细介绍如何在阿里云服务器上安装和配置…...

Java实现下载excel模板,并实现自定义下拉框

GetMapping("excel/download")ApiOperation(value "模板下载")public void getUserRecordTemplate(HttpServletResponse response, HttpServletRequest request) throws IOException {OutputStream outputStream response.getOutputStream();InputStream…...

postgres docker安装

mkdir -p /root/postgresql/data docker pull postgres:14 docker run --privilegedtrue --name postgres -e POSTGRES_PASSWORD123456 -e ALLOW_IP_RANGE0.0.0.0/0 -p 5432:5432 -v /root/postgresql/data:/var/lib/postgresql/data -d postgres:14#地址&#xff1a;192.168.3…...

数据库原理与应用期末复习

目录 第 1 章 概述 第 2 章 关系模型的基本概念 第 3 章 SQL 语言 第 4 章 中级 SQL 第 5 章 高级 SQL 第 6 章 关系代数语言 第 7 章 数据库设计和 ER 模型 第 8 章 关系数据库设计 第 13 章 事务 第 14 章 并发控制与恢复 第 1 章 概述 Database-management system…...

数据库知识汇总2

一. 范式 定义&#xff1a;范式是符合某一种级别的关系模式的集合。 关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式&#xff1b; 一个低一级范式的关系模式&#xff0c;通过模式分解&#xff08;schema decomposition&#xff09;可以转换为若干个高一…...

CS·GO搬砖流程详细版

说简单点&#xff0c;就是Steam买了然后BUFF上卖&#xff0c;或许大家都知道这点&#xff0c;但就是一些操作和细节问题没那么明白。我相信&#xff0c;你看完这篇文章以后&#xff0c;至少会有新的认知。 好吧&#xff0c;废话少说&#xff0c;直接上实操&#xff01; 首先准…...

《长寿养生报》是科普报刊吗?参与评选的科普作品需要注意什么?

随着各地医师职称评选标准改革的推广&#xff0c;目前不少省份已经将发表“科普作品”视作参与参与职称评选的工作成果。这一改革&#xff0c;也让《长寿养生报》这类报刊受到不少医护工作者的青睐。 《长寿养生报》是科普报刊吗&#xff1f;参与评选的科普作品需要注意什么&am…...

React native 原生环境搭建(最新版本RN环境搭建,不是expo)

前言 React Native 是 Facebook 推出的一款用于开发移动应用的框架&#xff0c;开发者可以用 JavaScript 和 React 等技术&#xff0c;一次编写代码&#xff0c;然后同时部署到 iOS 和 Android 平台上&#xff0c;大大节省了开发时间和人力成本&#xff0c;避免了为每个平台单…...

Unity Excel转Json编辑器工具

功能说明&#xff1a;根据 .xlsx 文件生成对应的 JSON 文件&#xff0c;并自动创建脚本 注意事项 Excel 读取依赖 本功能依赖 EPPlus 库&#xff0c;只能读取 .xlsx 文件。请确保将该脚本放置在 Assets 目录下的 Editor 文件夹中。同时&#xff0c;在 Editor 下再创建一个 Exc…...

XML结构快捷转JSON结构API集成指南

XML结构快捷转JSON结构API集成指南 引言 在当今的软件开发世界中&#xff0c;数据交换格式的选择对于系统的互操作性和效率至关重要。JSON&#xff08;JavaScript Object Notation&#xff09;和XML&#xff08;eXtensible Markup Language&#xff09;是两种广泛使用的数据表…...

数据挖掘——支持向量机分类器

数据挖掘——支持向量机分类器 支持向量机最小间隔面推导基于软间隔的C-SVM非线性SVM与核变换常用核函数 支持向量机 根据统计学习理论&#xff0c;学习机器的实际风险由经验风险值和置信范围值两部分组成。而基于经验风险最小化准则的学习方法只强调了训练样本的经验风险最小…...

ImageNet 2.0?自动驾驶数据集迎来自动标注新时代

引言&#xff1a; 3DGS因其渲染速度快和高质量的新视角合成而备受关注。一些研究人员尝试将3DGS应用于驾驶场景的重建。然而&#xff0c;这些方法通常依赖于多种数据类型&#xff0c;如深度图、3D框和移动物体的轨迹。此外&#xff0c;合成图像缺乏标注也限制了其在下游任务中的…...

智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之11 方案再探之2 项目文件(修改稿1)

(以下内容是第二次重建项目&#xff08;“方案再探”&#xff09;时的项目附件。) 为AI聊天工具添加一个知识系统 Part1 人性化&去中心化 前情提要 这一次我们暂时抛开前面对“智能工厂的软件设计”的考虑--其软件智能 产品就是 应用程序。直接将这些思维方式和方法论 运…...

详解MySQL SQL删除(超详,7K,含实例与分析)

文章目录 前言1. 删除表中的所有记录基本语法使用场景注意事项运用实例分析说明2. 删除特定记录基本语法使用场景注意事项运用实例分析说明3. 删除单条记录基本语法使用场景注意事项运用实例分析说明4. 删除违反引用完整性的记录基本语法使用场景注意事项运用实例分析说明5. 删…...

uniapp:跳转第三方地图

1.跳转第三方高德地图 //跳转地图 toMap(item){uni.navigateTo({url: (window.location.href https://uri.amap.com/navigation?to${item.lng},${item.lat},${item.shopName}&modecar&policy1&srchttps://gawl.gazhcs.com/wap/index.html&callnative0)}) },…...

深入浅出梯度下降算法:快速抵达函数最小值的方法

引言 梯度是机器学习和优化领域中不可或缺的概念&#xff0c;它为我们提供了理解和调整多维空间中函数行为的工具。本文将详细介绍梯度的定义、性质&#xff0c;并通过具体的一元和多元函数案例展示如何使用梯度下降算法找到最佳参数。 一、梯度的基础知识 1.1 定义与计算 梯…...

RWKV 语言模型

RWKV Language Model是一种独特的循环神经网络&#xff08;RNN&#xff09;架构的语言模型&#xff0c;具有诸多优势和特点&#xff0c;在自然语言处理领域展现出了良好的性能和应用潜力&#xff0c;以下是具体介绍&#xff1a; 核心原理 融合RNN与Transformer优点&#xff1a;…...

pycharm如何拉取一个git项目,然后,修改后再上传到自建的项目中?

以chattts为例 https://github.com/2noise/ChatTTS.git 1.建一个虚拟环境&#xff0c;用于项目使用 2.pychar&#xff4d;新建工程 &#xff13;.忽略 提示 勾选&#xff0c;新建远程仓库 设置账号和密码 设置git路径&#xff0c;一般是正确的&#xff0c;点测试即可 &…...

Java 性能调优实战

性能调优是每个程序员在开发过程中都无法避免的课题&#xff0c;尤其在面对大规模、高并发的系统时&#xff0c;性能优化更是必不可少。本文将根据《Java 性能调优实战》课程的七个模块&#xff0c;深入探讨其中的核心内容&#xff0c;结合实际代码示例&#xff0c;帮助大家更好…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

作为点的对象CenterNet论文阅读

摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表&#xff0c;并对每一个位置进行分类。这种做法既浪费又低效&#xff0c;并且需要额外的后处理。在本文中&#xff0c;我们采取了不同的方法。我们将物体建模为单…...