当前位置: 首页 > 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;帮助大家更好…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...