大屏模板，增加自适应（包含websocket）
1、简单的Node服务端
const WebSocket = require('ws');// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8888 });const getHeader = (protocol) => {const protocolArr = protocol.split(',')const headers = {};for (let i = 0; i < protocolArr.length; i += 2) {const key = protocolArr[i].trim();const value = protocolArr[i + 1].trim();headers[key] = value;}return headers;
}
let timer = null;
let num = 0;
let UID = '';// 监听连接事件
wss.on('connection', (ws, req) => {const userName = req.url.replace('/', '');UID = userName;console.log('WebSocket connection established for URL:', userName);// 在 'upgrade' 事件处理程序中获取请求头信息const protocol = req.headers['sec-websocket-protocol'];console.log('Sec-WebSocket-Protocol:', getHeader(protocol)['X-Access-Token']);// 连接建立成功时触发console.log('Client connected');if(!timer) {const obj = [{name: 'SC001',value: 123},{name: 'SC001',value: 123}]timer = setInterval(() => {ws.send(`${UID}心跳信息消息: ${num}--${JSON.stringify(obj)}`);num++}, 3000);}// 监听消息接收事件ws.on('message', (message) => {console.log(`Received message: ${message}`);// 向客户端发送消息ws.send(`服务端返回消息: ${message}`);});// 监听连接关闭事件ws.on('close', () => {// 连接关闭时触发console.log('Client disconnected');timer = null;});
});
2、大屏客户端
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>大屏测试</title>
</head><body><style>body {position: relative;margin: 0;padding: 0;color: #ffffff;font-size: 36px;font-weight: bold;background-color: #20f;background-color: #3084e7;background: url(https://tinypng.com/backend/opt/output/3ret9c4gdpxnargyh99c1rgj1ne52res/bg.png) no-repeat;background-size: auto;}.item {box-shadow: inset 0px 0px 6px 2px #9df6fa;border-radius: 4px;width: calc(100% - 24px);height: 100%;display: flex;justify-content: center;align-items: center;padding: 12px;}.bigscreen {margin: 12px;display: flex;height: 100%;}.mg12 {margin: 12px 0;}.header {margin: 0 12px;text-align: center;line-height: 48px;margin-bottom: 12px;font-size: 36px;background: linear-gradient(to bottom, #56f4fe, #3084e7);-webkit-background-clip: text;color: transparent;}.first {display: flex;justify-content: space-around;align-items: center;font-size: 22px;}.i {width: 100%;display: flex;flex-direction: column;text-align: center;}.val {margin-top: 12px;}</style><div id="app" style="position: absolute;"><div class="header">大屏标题</div><div class="bigscreen"><div style="display: flex;flex-direction: column; height: calc(100% - 72px); width: 65%; margin-right: 12px;"><div id="first" class="item first" style="height: 15%;"><div class="i"><div>API总数</div><div class="val">19,612</div></div><div class="i"><div>调用数</div><div class="val">1,222</div></div><div class="i" id="warn" style="color: red;"><div>告警数</div><div class="val">68</div></div></div><div id="chart2" class="item mg12" style="height: 30%;">222</div><div id="chart3" class="item" style="flex: 1;">333</div></div><div style="display: flex;flex-direction: column; height: calc(100% - 72px); flex: 1;"><div id="chart4" class="item">111</div><div id="chart5" class="item mg12">222</div><div id="chart6" class="item">333</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script type="module">import autofit from 'https://cdn.jsdelivr.net/npm/autofit.js';autofit.init({dh: 1080,dw: 1920,el: '#app',resize: true},false);// 配置图表选项和数据const obj = ['bar', 'line']const getType = () => {// 生成随机索引var randomIndex = Math.floor(Math.random() * obj.length);// 获取随机元素var type = obj[randomIndex];return type;}var option = () => {const type = getType()return {color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],title: {text: 'Gradient Stacked Area Chart'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: type === 'bar',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Line 1',type: type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(128, 255, 165)'},{offset: 1,color: 'rgb(1, 191, 236)'}])},emphasis: {focus: 'series'},data: [Math.random() * 1000, Math.random() * 100, 101, 264, 90, 340, 250]},{name: 'Line 2',type: type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(0, 221, 255)'},{offset: 1,color: 'rgb(77, 119, 255)'}])},emphasis: {focus: 'series'},data: [Math.random() * 1000, Math.random() * 100, 111, 234, 220, 340, 310]},{name: 'Line 3',type: type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(55, 162, 255)'},{offset: 1,color: 'rgb(116, 21, 219)'}])},emphasis: {focus: 'series'},data: [Math.random() * 1000, Math.random() * 100, 201, 334, 190, 130, 220]},]}};// 初始化ECharts实例var myChart2 = echarts.init(document.getElementById('chart2'), 'dark');var myChart3 = echarts.init(document.getElementById('chart3'), 'dark');var myChart4 = echarts.init(document.getElementById('chart4'), 'dark');var myChart5 = echarts.init(document.getElementById('chart5'), 'dark');var myChart6 = echarts.init(document.getElementById('chart6'), 'dark');// 使用配置项设置图表myChart2.setOption(option());myChart3.setOption(option());myChart4.setOption(option());myChart5.setOption(option());myChart6.setOption(option());// 自适应窗口大小变化window.addEventListener('resize', function () {myChart2.resize();myChart3.resize();myChart4.resize();myChart5.resize();myChart6.resize();});const timer = setInterval(() => {myChart2.setOption(option());myChart3.setOption(option());myChart4.setOption(option());myChart5.setOption(option());myChart6.setOption(option());}, 3000);</script><script>setTimeout(() => {// 创建一个 Canvas 元素var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 设置 Canvas 的尺寸与容器元素相同var container = document.getElementById('first');canvas.width = container.offsetWidth * 0.6;canvas.height = container.offsetHeight;var date = new Date();var month = date.getMonth() + 1;var time = `${date.getFullYear()}-${month > 9 ? month : '0'+month}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`// 旋转绘图上下文45度（以弧度为单位）ctx.rotate(Math.PI / 16);// 绘制水印文本ctx.font = '36px Arial';ctx.fillStyle = '#ffffff1f'; // 水印文本颜色和透明度ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText(time, canvas.width / 4, canvas.height / 4);// 将 Canvas 转换为背景图像var watermarkUrl = canvas.toDataURL();// 设置容器元素的背景样式为水印图像container.style.backgroundImage = 'url(' + watermarkUrl + ')';}, 200)</script><script>let socket, timers, connectState;let num = 1;const TIME = 10// 创建 WebSocket 连接函数function createWebSocket(state) {if(state) {num = 1;document.getElementById("output").innerHTML = '';console.clear()}const room = new Date().getTime();const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODg1MzgzNDUsInVzZXJuYW1lIjoiYWRtaW4ifQ.Yac09LCyIAwjUofsm2cvGKxPmpZ5fTXG9ZKpFYdX2eQ';socket = new WebSocket("ws:localhost:8888/tengyu?id=001", ['X-Access-Token', token, 'Authorization', "token"]);// socket = new WebSocket(`ws://10.72.30.229:8080/dsss/websocket/largeScreen/room-${room}`);// 监听连接打开事件socket.onopen = function(event) {connectState = true;};// 监听消息接收事件socket.onmessage = function(event) {console.log(event.data);};// 监听连接关闭事件socket.onclose = function(event) {connectState = false;// 断线后尝试重连timers = setTimeout(function() {if (num > TIME) {clearTimeout(timers);console.log(`%cWS连接失败，如需重连请点击【连接WebSocket】`, 'background: blue; color: #fff; padding: 8px 12px; border-radius: 3px');return;}console.log(`%cWS第${num}次断线重连中...`, 'background: red; color: #fff; padding: 8px 12px; border-radius: 3px');createWebSocket();num++}, 5000);};}function fangdou(callback, time = 500) {let timers = null;return function() {if(timers) {clearTimeout(timers);}timers = setTimeout(() => {callback.apply(this, arguments);timers = null;}, time);};}// 发送消息到 WebSocket 服务器function sendMessage() {if(!connectState) {console.log(`WS服务器未连接~`);return;} const message = prompt("Enter your message:");console.log(`发送到服务器： ${messages}`);socket.send(messages);}// 初始化 WebSocket 连接createWebSocket();</script></body></html>相关文章：
大屏模板，增加自适应（包含websocket）
1、简单的Node服务端 const WebSocket require(ws);// 创建 WebSocket 服务器 const wss new WebSocket.Server({ port: 8888 });const getHeader (protocol) > {const protocolArr protocol.split(,)const headers {};for (let i 0; i < protocolArr.length; i …...
电商系统架构设计系列（九）：如何规划和设计分库分表？
上篇文章中，我给你留了一个思考题：分库分表该如何设计？ 今天这篇文章，我们来聊一下如何规划和设计分库分表，以及要考虑哪些问题。 引言 当要解决海量数据的问题，就必须要用到分布式的存储集群了ÿ…...
从Web 2.0到Web 3.0，互联网有哪些变革？
文章目录 Web 2.0时代：用户参与和社交互动Web 3.0时代：语义化和智能化影响和展望 🎉欢迎来到Java学习路线专栏~从Web 2.0到Web 3.0，互联网有哪些变革？ ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页&#x…...
QT中资源文件resourcefile的使用，使用API完成页面布局
QT中资源文件resourcefile的使用 之前添加图标的方法使用资源文件的方法创建资源文件资源文件添加前缀资源文件添加资源使用资源文件中的资源 使用API完成布局使用QHBoxLayout完成水平布局使用QVBoxLayout完成垂直布局使用QGridLayout完成网格布局 在Qt中引入资源文件好处在于他…...
2337. 移动片段得到字符串
题目描述： 给你两个字符串 start 和 target ，长度均为 n 。每个字符串 仅 由字符 ‘L’、‘R’ 和 ‘_’ 组成，其中： 字符 ‘L’ 和 ‘R’ 表示片段，其中片段 ‘L’ 只有在其左侧直接存在一个 空位 时才能向 左 移动&a…...
Java并发编程第5讲——volatile关键字（万字详解）
volatile关键字大家并不陌生，尤其是在面试的时候，它被称为“轻量级的synchronized”。但是它并不容易完全被正确的理解，以至于很多程序员都不习惯去用它，处理并发问题的时候一律使用“万能”的sychronized来解决，然而如…...
6.小程序api分类
事件监听 以on开头，监听某个事件触发，例如：wx.WindowResize事件 同步 以Sync结尾的是同步，可以通过函数返回值直接获取，例如：wx.setStorageSync 异步 需要通过函数接收调用结果，例如&#…...
什么是PPS和TOD时序？授时防护设备是什么？
介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术，它们在许多领域都有广泛的应用，总的来说，PPS和TOD被广泛应用于各种需要高度精确时间同步的领域，包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS（…...
推荐一款好用的开源视频播放器（免费无广告）
mpv是一个自由开源的媒体播放器，它支持多种音频和视频格式，并且具有高度可定制性。mpv的设计理念是简洁、高效和功能强大。 软件特点： 1. 开源、跨平台。可以在Windows\Linux\MacOS\BSD等系统上使用，完全免费无广告。Windows版解压…...
STM32 CubeMX （第三步Freertos中断管理和软件定时）
STM32 CubeMX STM32 CubeMX （第三步Freertos中断管理和软件定时） STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1（不要选择滴答定时器；滴答定时器留给OS系统做时基）使用STM32 CubeMX 库，配置Fre…...
Java虚拟机（JVM）：堆溢出
一、概念 Java堆溢出（Java Heap Overflow）是指在Java程序中，当创建对象时，无法分配足够的内存空间来存储对象，导致堆内存溢出的情况。 Java堆是Java虚拟机中用于存储对象的一块内存区域。当程序创建对象时，…...
C语言，Linux，静态库编写方法，makefile与shell脚本的关系。
静态库编写： 编写.o文件gcc -c(小写) seqlist.c(需要和头文件、main.c文件在同一文件目录下) libs.a->去掉lib与.a剩下的为库的名称‘s’。 -ls是指库名为s。 -L库的路径。 makefile文件编写： CFLAGS-Wall -O2 -g -I ./inc/ LDFLAGS-L./lib/ -l…...
Php“牵手”淘宝商品详情页数据采集方法,淘宝API接口申请指南
淘宝天猫详情接口 API 是开放平台提供的一种 API 接口，它可以帮助开发者获取商品的详细信息，包括商品的标题、描述、图片等信息。在电商平台的开发中，详情接口API是非常常用的 API，因此本文将详细介绍详情接口 API 的使用。 一、…...
如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现全屏滚动效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…...
Docker之Compose
目录 前言 1.1Docker Swarm与Docker Compose 1.1.1Docker Swarm 1.1.2Docker Compose 1.1.2.1 三层容器 编辑 二、YAML 2.1YAML概述 2.2注意事项 2.3Docker Compose 环境安装 2.3.1下载 三、Docker-Compose配置常用字段 四、Docker-compose常用命令 五、Docker…...
安装chromedriver 115，对应chrome版本115（经检验，116也可以使用）
目录 1. 查看Chrome浏览器的版本2. 找到对应的chromedriver3. 安装ChromeDriver 1. 查看Chrome浏览器的版本 点进这个网站查看：chrome://settings/help （真是的，上一秒还是115版本，更新后就是116版本了，好在chromedi…...
排序算法：插入排序
插入排序的思想非常简单，生活中有一个很常见的场景：在打扑克牌时，我们一边抓牌一边给扑克牌排序，每次摸一张牌，就将它插入手上已有的牌中合适的位置，逐渐完成整个排序。 插入排序有两种写法： 交…...
掌握AI助手的魔法工具：解密Prompt（提示）在AIGC时代的应用「上篇」
在当今的AIGC时代，我们面临着越来越多的人工智能技术和应用。其中一个引人注目的工具就是Prompt（提示）。它就像是一种魔法，可以让我们与AI助手进行更加互动和有针对性的对话。那么，让我们一起来了解一下Prompt…...
JMeter - 接口压力测试工具简单使用
【启动前配置】 启动JMeter前可以先配置语言和编码： 修改：E:\JMeter\apache-jmeter-5.5\bin\jmeter.properties文件中： 1.language=en # 指定语言 language=zh_CN 2.sampleresult.default.encoding=ISO-8859-1 # 指定编码 UTF-8 sampleresult.default.encoding=UTF-8 也…...
【C++入门到精通】C++入门 —— priority_queue(STL)优先队列
阅读导航 前言一、priority_queue简介1. 概念2. 特点 二、priority_queue使用1. 基本操作2. 底层结构 三、priority_queue模拟实现⭕ C代码⭕priority_queue中的仿函数 总结温馨提示 前言 ⭕文章绑定了VS平台下std::priority_queue的源码，大家可以下载了解一下&…...
静态代码扫描工具 Sonar 配置及使用
概览 Sonar 是一个用于代码质量管理的开放平台。通过插件机制，Sonar 可以集成不同的测试工具，代码分析工具，以及持续集成工具。与持续集成工具（例如 Hudson/Jenkins 等）不同，Sonar 并不是简单地把不同的代…...
docker 03(docker 容器的数据卷)
一、数据卷的概念和作用 删除后，数据也没了。 不能 数据卷 是宿主机中的一个目录或文件当容器目录和数据卷目录绑定后，对方的修改会立即同步一个数据卷可以被多个容器同时挂载 作用： 容器数据持久化 外部机器和容器间接通信 容器之间数据交换…...
【04】基础知识：typescript中的类
一、es5 对象 1、定义 类（对象） 原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。 // 自定义构造函数 function Person(name, age) {this.name namethis.age agethis.getInfo function() {console.log(${this.name} - ${this.…...
CCClippingNode：在游戏中实现遮罩效果、剪切效果，以涂抹糖霜为例，如何更好的实现涂抹效果，提高用户的游戏体验
CCClippingNode：在游戏中实现遮罩效果、剪切效果，以涂抹糖霜为例，如何更好的实现涂抹效果 设备/引擎：Mac（11.6）/cocos2d-x 开发工具：Xcode（13.0） 开发需求：…...
cuda gdb调试
如果cudaDeviceEnablePeerAccess函数不支持或不起作用，您仍然可以尝试其他方法来实现GPU之间的数据交换和通信。以下是一些替代方法： 通过主机内存进行数据传输： 如果GPU之间的数据交换不是非常频繁，您可以将数据从一个GPU复制到…...
【vim 学习系列文章 5 - cscope 过滤掉某些目录】
文章目录 cscope 过滤目录介绍 cscope 过滤目录介绍 第一步创建自己的cscope脚本~/.local/bin/cscope.sh，如下： function my_cscope() {CODE_PATHpwdecho "$CODE_PATH"echo "start cscope...."if [ ! -f "$CODE_PATH/cscope.…...
实验三 HBase1.2.6安装及配置
系列文章目录 文章目录 系列文章目录前言一、HBase1.2.6的安装二、HBase1.2.6的配置2.1 单机模式配置2.2 伪分布式模式配置 总结参考 前言 在安装HBase1.2.6之前，需要安装好hadoop2.7.6。 本篇文章参考：HBase2.2.2安装和编程实践指南 一、HBase1.2.6的安…...
LightDB sequence支持MAXVALUE最大值与Oracle相同
功能介绍 Oracle数据库在创建sequence的时候可以支持设置maxvalue 为9999999999999999999999999999，这样的SQL在LightDB23.3版本之前都是执行失败的。为了方便Oracle用户迁移到LightDB上，在LightDB23.3版本上，增加了sequence支持maxvalue设置…...
二、Kafka快速入门
目录 2.1 安装部署1、【单机部署】2、【集群部署】 2.2 Kafka命令行操作1、查看topic相关命令参数2、查看当前kafka服务器中的所有Topic3、创建 first topic4、查看 first 主题的详情5、修改分区数（注意：分区数只能增加，不能减少）…...
消息中间件-kafka实战-第五章-kafka重复消费、顺序消费及死信队列
目录 一、参考二、路由规则（分片规则）三、触发重复消费的场景场景一：触发rebalance问题描述可能原因实际影响参数在kafka0.10.1 之前:在kafka0.10.1之后：解决方案 场景二：服务宕机可能原因解决方案 消息幂等性 四、kaf…...
网站建设的公司名称/谷歌网站
Series 作为cartControl的基本单位来现实图表数据 所以每一个Series代表一种需要显示的类型。 首先实例化一个Series Series _series new Series("处理次数", ViewType.Bar); _series.ArgumentScaleType ScaleType.Qualitative; _series.ArgumentDataMember "…...
余杭区建设规划局网站/免费友链互换
Terraform功能简介 Terraform是IT 基础架构自动化编排工具，它的口号是 “Write,Plan, and create Infrastructure as Code”, 基础架构即代码。 怎么理解这句话，我们先假设在没有Terraform的年代我们是怎么操作云服务。 方式一：直接登入到云平…...
网站如何做二级域名/发布软文广告
现实的创作来源于生活的灵感！ 项目引入 昨天突然发现有一个比较头疼的问题，有一份数据是某一个学校的寝室数据，有不同的维度的分类，总的数据大概有4000数据，需要进行分类，然后按照不同分类维度进行表格制作…...
广州专业网站制作公司/销售平台排名
例如，用户名test1改为test2，在plsql界面中不支持直接更改用户名，只能通过sql更改1、查询系统user$中的user#值select user#,name from user$ where name test1;2、根据user#值，更改用户名update user$ set nametest2 where user…...
如何建立网站模板/网站建设开发外包公司
为了完成ListView分页操作，本文会封装一个负责“分页操作”的泛型类PageInfo，该泛型类不仅适用于WPF中ListView的分页，还适用于WPF及WinForms中其他需要分页操作的控件。 下面是PageInfo类的完整代码（包含枚举类型JumpOperation的…...
前端做网站一般用什么框架/中视频自媒体账号注册下载
在自己学习java语言的过程中，很容易把break和continue的用法混淆。为了便于以后快速查阅及温习，在此特留学习笔记一份。简述在任何迭代语句的主体部分，都可以用break和continue控制循环的流程。其中，break用于强行退出循环&#x…...