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

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

C#中用于控制自定义特性(Attribute)

我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中&#xff0c;Attribute&#xff08;特性&#xff09;是一种用于向程序元素&#xff08;如类、方法、属性等&#xff09;添加元数据的机制。Attr…...

第14节 Node.js 全局对象

JavaScript 中有一个特殊的对象&#xff0c;称为全局对象&#xff08;Global Object&#xff09;&#xff0c;它及其所有属性都可以在程序的任何地方访问&#xff0c;即全局变量。 在浏览器 JavaScript 中&#xff0c;通常 window 是全局对象&#xff0c; 而 Node.js 中的全局…...

JS的传统写法 vs 简写形式

一、条件判断与逻辑操作 三元运算符简化条件判断 // 传统写法 let result; if (someCondition) {result yes; } else {result no; }// 简写方式 const result someCondition ? yes : no;短路求值 // 传统写法 if (condition) {doSomething(); }// 简写方式 condition &…...

Spring Boot 中实现 HTTPS 加密通信及常见问题排查指南

Spring Boot 中实现 HTTPS 加密通信及常见问题排查指南 在金融行业安全审计中&#xff0c;未启用HTTPS的Web应用被列为高危漏洞。通过正确配置HTTPS&#xff0c;可将中间人攻击风险降低98%——本文将全面解析Spring Boot中HTTPS的实现方案与实战避坑指南。 一、HTTPS 核心原理与…...

【免杀】C2免杀技术(十五)shellcode混淆uuid/ipv6/mac

针对 shellcode 混淆(Shellcode Obfuscation) 的实战手段还有很多,如下表所示: 类型举例目的编码 / 加密XOR、AES、RC4、Base64、Poly1305、UUID、IP/MAC改变字节特征,避开静态签名或 YARA结构伪装PE Stub、GIF/PNG 嵌入、RTF OLE、UUID、IP/MAC看起来像合法文件/数据,弱…...