用vue3显示websocket的状态

在上次vue3项目上增加一个标签,显示当前的连接状态,两个按钮:重新连接 和 断开连接

修改App.vue

<template><header><title>ws状态测试</title></header><main><WsStatus /></main>
</template><script setup lang="ts">
import WsStatus from './components/WsStatus.vue'
</script><style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>

WsStatus.vue

创建一个组件WsStatus.vue

<template><div class="WsStatus"><h1>WebSocket 测试</h1><div class="status">连接状态: <span :class="statusClass">{{ connectionStatus }}</span></div><button @click="reconnect" :disabled="isConnecting">{{ isConnecting ? '连接中...' : '重新连接' }}</button><button @click="closeConnect" :disabled="connectStatus">断开连接</button><canvas></canvas></div>
</template><script setup lang="ts" name="WsStatus">
import { ref, onMounted, onUnmounted } from 'vue'const ws = ref()
const imageUrl = ref()
const connectionStatus = ref('未连接')
const isConnecting = ref(false)
const connectStatus = ref(false)
const statusClass = ref('disconnected')function get_appropriate_ws_url(extra_url: string) {var pcol;// 获得页面上的urlvar u = document.URL;/** We open the websocket encrypted if this page came on an* https:// url itself, otherwise unencrypted*/// 去掉http://或者https://if (u.substring(0, 5) === "https") {pcol = "wss://";u = u.substr(8);} else {pcol = "ws://";if (u.substring(0, 4) === "http")u = u.substr(7);}/* + "/xxx" bit is for IE10 workaround *///回来的url就城了ws://地址或者wss://地址return pcol + u.split('/')[0] + "/" + extra_url;
}// WebSocket配置(修改为你的服务器地址)
const wsUrl = get_appropriate_ws_url("")const connectWebSocket = () => {if (isConnecting.value) returnisConnecting.value = trueconnectionStatus.value = '连接中...'statusClass.value = 'connecting'ws.value = new WebSocket(wsUrl)ws.value.onopen = () => {connectionStatus.value = '已连接'statusClass.value = 'connected'isConnecting.value = falseconnectStatus.value = false}ws.value.onmessage = (event: any) => {console.log('收到数据')}ws.value.onerror = (error: any) => {console.error('WebSocket错误:', error)connectionStatus.value = '连接错误'statusClass.value = 'error'isConnecting.value = false}ws.value.onclose = () => {connectionStatus.value = '连接已关闭'statusClass.value = 'disconnected'isConnecting.value = falseconnectStatus.value = true}
}// 组件挂载时自动连接
onMounted(() => {connectWebSocket()
})// 组件卸载时关闭连接
onUnmounted(() => {if (ws.value) {ws.value.close()}
})function reconnect() {if (ws.value) {ws.value.close()}connectWebSocket()
}function closeConnect() {if (ws.value) {ws.value.close()}
}</script><style scoped>
.websocket-page {padding: 20px;max-width: 800px;margin: 0 auto;
}.status {margin: 20px 0;font-size: 18px;
}.status span {font-weight: bold;
}.connected {color: #4CAF50;
}.connecting {color: #FFC107;
}.disconnected {color: #F44336;
}.error {color: #F44336;
}button {padding: 10px 20px;background-color: #2196F3;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:disabled {background-color: #BBDEFB;cursor: not-allowed;
}.messages {margin-top: 30px;border-top: 1px solid #eee;padding-top: 20px;background-size: 100% 100%;
}ul {list-style-type: none;padding: 0;max-height: 300px;overflow-y: auto;border: 1px solid #ddd;padding: 10px;border-radius: 4px;
}li {padding: 5px 0;border-bottom: 1px solid #eee;
}.live-image {position: fixed;top: 50%;left: 50%;width: 100vw;/* 根据需要设置宽度 */height: 100vw;object-fit: cover;transform: translate(-50%, -50%);
}#camImage,
#canvas {position: fixed;left: 0;top: 0;width: 100%;/* height: 100%; */z-index: -1;
}/* 竖屏 */
@media screen and (orientation: portrait) {}/* 横屏 */
@media screen and (orientation: landscape) {}
</style>

编译打包上传部署

$ npm run build
$ scp -r ./dist/* root@192.168.9.163:/oem/usr/www

测试

在rv1106摄像头打开运行ws服务器

# /oem/usr/bin/ws_cam

浏览器访问 http://192.168.9.163:7681/
看到相应页面,按按键会有相应的变换。

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

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

相关文章

[算法] 贪心--矩阵消除游戏

文章目录 1. 题意2. 思路贪心思路1思路1并不正确思路1为什么是错误的?这道题该如何求解?枚举思路是超时的!枚举 贪心 3. 编码 今天咱们来分享一道基础的贪心题目 -> 矩阵消除游戏 对于贪心算法的题目, 我感觉是对于初学者没必要太注重证明过程, 因为这玩意的变数比较大, …

数学——A. K-divisible Sum + D. Exam in MAC

A. K-divisible Sum 题目&#xff1a; 思路&#xff1a; 以下 “[xxx]” 符号均代表向上取整 我们假设总和是sum&#xff0c;那么就有sum k * cnt 要想最大值最小&#xff0c;肯定是要让sum尽可能小&#xff0c;这样每个元素都能变小 最小情况是 sum 恰好等于 n 时&#…

Docker 》》Docker Compose 》》network 网络 compose

docker 默认的网络 三种模式 # 列出所有当前主机上或Swarm集群上的网络 docker network ls#查看网络详情 docker network inspect network名称# 清除未使用的docker网络 docker network prune -f# 创建网络 ocker network create -d bridge 网络名称 docker network create –s…

RabbitMQ延迟消息

文章目录 延迟消息死信交换机延迟消息延迟消息应用场景 延迟消息 生产者在发送消息的时候指定一个时间&#xff0c;消费者不会立即收到该消息&#xff0c;而是在指定时间之后才收到消息&#xff0c;这就是延迟消息。 比如说这么一个场景&#xff0c;用户下单后将商品库存进行…

phpstudy+phpstorm+xdebug【学习笔记】

配置PHPStudy 配置PHPSTORM phpstorm选择PHP版本 配置DEBUG 设置服务器 编辑配置 学习参考链接&#xff1a;&#xff1a;https://blog.csdn.net/m0_60571842/article/details/133246064

58.Harmonyos NEXT 图片预览组件架构设计与实现原理

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; Harmonyos NEXT 图片预览组件架构设计与实现原理 文章目录 Harmonyos NEXT 图片预览组件架构设计与实现原理效果预览一、组件架构概述1. 核心组件层…

Android 手机启动过程

梳理 为了梳理思路&#xff0c;笔者画了一幅关于 Android 手机启动的过程图片内容纯属个人见解&#xff0c;如有错误&#xff0c;欢迎各位指正

Chat-TTS-UI:文字转语音 - 本地部署方案

Chat-TTS-UI 是一个基于 ChatTTS 模型的本地网页界面,专为满足用户在信息过载时代轻松获取大量文字信息的需求而设计。它支持中英文混合输入、多种音色选择,并提供 API 接口,方便开发者集成到其他应用中。其简洁易用的网页界面、细粒度控制以及 GPU 加速等高级功能,使其广泛…

11. Pandas :操作Excel文件(Excel报表的案例研究)

从一个装有各种 Excel 文件的文件夹开始&#xff0c;这些文件需要被整合到 Excel 报表中。 它们包含了虚构的电信运营商在全美各营业厅的套餐&#xff08;金、银、铜&#xff09;销售情况。每个月有两个文件&#xff0c;子文件夹 new 中的是新用户&#xff0c;子文件夹 existin…

一周学会Flask3 Python Web开发-SQLAlchemy添加数据操作-班级模块

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili SQLAlchemy提供session.add()方法添加model实体数据&#xff0c;以及提供session.commit()提交事务。 首先list.html加一个添…

大型语言模型与强化学习的融合:迈向通用人工智能的新范式——基于基础复现的实验平台构建

1. 引言 大型语言模型&#xff08;LLM&#xff09;在自然语言处理领域的突破&#xff0c;展现了强大的知识存储、推理和生成能力&#xff0c;为人工智能带来了新的可能性。强化学习&#xff08;RL&#xff09;作为一种通过与环境交互学习最优策略的方法&#xff0c;在智能体训…

Axure大屏可视化原型模板及素材:数据可视化的高效解决方案

数据可视化已成为企业决策、运营分析、市场洞察的重要工具。数据可视化大屏&#xff0c;作为数据展示和交互的直观平台&#xff0c;能够实时呈现关键数据&#xff0c;帮助企业快速做出决策。Axure作为原型设计领域的领先工具&#xff0c;以其丰富的组件库、强大的交互设计能力和…

图片填充容器,如何描述

【图片需要完全填充/拉伸以适应容器尺寸&#xff0c;不保持原始比例&#xff0c;使用 object-fit: fill 属性实现】 效果&#xff1a; 代码案例&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8">&l…

缓存和客户端数据存储体系(Ark Data Kit)--- 应用数据持久化(首选项持久化、K-V、关系型数据库)持续更新中...

Core File Kit做怎删改查操作不便&#xff0c;用Ark Data Kit。 功能介绍 ArkData &#xff08;方舟数据管理&#xff09;为开发者提供数据存储、数据管理和数据同步能力&#xff0c;比如联系人应用数据可以保存到数据库中&#xff0c;提供数据库的安全、可靠以及共享访问等管…

RUOYI框架在实际项目中的应用三:Ruoyi微服务版本-RuoYi-Cloud

如需观看Ruoyi框架的整体介绍&#xff0c;请移步&#xff1a;RUOYI框架在实际项目中的应用一&#xff1a;ruoyi简介 一、Ruoyi微服务版本-Ruoyi微服务版本 1、官方资料 1&#xff1a;代码地址&#xff1a;https://gitee.com/y_project/RuoYi-Cloud.git 2&#xff1a;文档介绍…

windbg集成python环境(pykd)

背景: 调试FPU指令过程时&#xff0c;需要一直跟踪FPU Status寄存器TOP字段(ST寄存器对应的BC寄存器)&#xff0c;TOP寄存器位于FPU Status[13:11]&#xff0c;这种转换过程并非一目了然(如下图)&#xff1a; [Disassembly窗口fld指令执行后&#xff0c;Registers窗口中fpsw的…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

【算法】双指针、递归与回溯、排序、查找

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 持续更新中...1、双指针移动零复写零快乐数长度最小的子数组dd爱框框 2、递归与回溯3、排序算法4、查找算法 持续更新中… 1、双指…

How to install cangjie on Linux mint 22.1

概述 仓颉编程语言是一款面向全场景智能的新一代编程语言&#xff0c;主打原生智能化、天生全场景、高性能、强安全。主要应用于鸿蒙原生应用及服务应用等场景中&#xff0c;为开发者提供良好的编程体验。 今天&#xff0c;我们介绍一下仓颉语言在Linux mint 22.1上的安装。 …

杰理可视化SDK-手机三方通话控制

杰理可视化SDK-手机三方通话控制 手机三方通话功能杰理SDK三方通话控制SDK三方通话状态获取SDK三方通话处理 手机三方通话功能是手机常用的功能之一。本篇文章简单介绍了杰理可视化SDK在蓝牙耳机应用中&#xff0c;当手机存在三方通话来电或正在进行三方通话时&#xff0c;蓝牙…