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

大屏模板，增加自适应（包含websocket）

news 2026/1/31 15:55:36

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 …...

编程日记 2023/8/22 10:00:01

电商系统架构设计系列（九）：如何规划和设计分库分表？

上篇文章中&#xff0c;我给你留了一个思考题&#xff1a;分库分表该如何设计&#xff1f; 今天这篇文章&#xff0c;我们来聊一下如何规划和设计分库分表&#xff0c;以及要考虑哪些问题。 引言 当要解决海量数据的问题&#xff0c;就必须要用到分布式的存储集群了&#xff…...

编程日记 2023/8/22 9:59:00

从Web 2.0到Web 3.0，互联网有哪些变革？

文章目录 Web 2.0时代&#xff1a;用户参与和社交互动Web 3.0时代&#xff1a;语义化和智能化影响和展望 &#x1f389;欢迎来到Java学习路线专栏~从Web 2.0到Web 3.0&#xff0c;互联网有哪些变革&#xff1f; ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#x…...

编程日记 2023/8/22 9:57:59

QT中资源文件resourcefile的使用，使用API完成页面布局

QT中资源文件resourcefile的使用 之前添加图标的方法使用资源文件的方法创建资源文件资源文件添加前缀资源文件添加资源使用资源文件中的资源 使用API完成布局使用QHBoxLayout完成水平布局使用QVBoxLayout完成垂直布局使用QGridLayout完成网格布局 在Qt中引入资源文件好处在于他…...

编程日记 2023/8/22 9:56:58

2337. 移动片段得到字符串

题目描述&#xff1a; 给你两个字符串 start 和 target &#xff0c;长度均为 n 。每个字符串 仅 由字符 ‘L’、‘R’ 和 ‘_’ 组成&#xff0c;其中&#xff1a; 字符 ‘L’ 和 ‘R’ 表示片段&#xff0c;其中片段 ‘L’ 只有在其左侧直接存在一个 空位 时才能向 左 移动&a…...

编程日记 2023/8/22 9:55:56

Java并发编程第5讲——volatile关键字（万字详解）

volatile关键字大家并不陌生&#xff0c;尤其是在面试的时候&#xff0c;它被称为“轻量级的synchronized”。但是它并不容易完全被正确的理解&#xff0c;以至于很多程序员都不习惯去用它&#xff0c;处理并发问题的时候一律使用“万能”的sychronized来解决&#xff0c;然而如…...

编程日记 2023/8/22 9:54:55

6.小程序api分类

事件监听 以on开头&#xff0c;监听某个事件触发&#xff0c;例如&#xff1a;wx.WindowResize事件 同步 以Sync结尾的是同步&#xff0c;可以通过函数返回值直接获取&#xff0c;例如&#xff1a;wx.setStorageSync 异步 需要通过函数接收调用结果&#xff0c;例如&#…...

编程日记 2023/8/22 9:53:54

什么是PPS和TOD时序？授时防护设备是什么？

介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术&#xff0c;它们在许多领域都有广泛的应用&#xff0c;总的来说&#xff0c;PPS和TOD被广泛应用于各种需要高度精确时间同步的领域&#xff0c;包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS&#xff08…...

编程日记 2023/8/22 9:52:51

推荐一款好用的开源视频播放器（免费无广告）

mpv是一个自由开源的媒体播放器&#xff0c;它支持多种音频和视频格式&#xff0c;并且具有高度可定制性。mpv的设计理念是简洁、高效和功能强大。 软件特点&#xff1a; 1. 开源、跨平台。可以在Windows\Linux\MacOS\BSD等系统上使用&#xff0c;完全免费无广告。Windows版解压…...

编程日记 2023/8/22 9:51:50

STM32 CubeMX （第三步Freertos中断管理和软件定时）

STM32 CubeMX STM32 CubeMX &#xff08;第三步Freertos中断管理和软件定时&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fre…...

编程日记 2023/8/22 9:50:48

Java虚拟机（JVM）：堆溢出

一、概念 Java堆溢出&#xff08;Java Heap Overflow&#xff09;是指在Java程序中&#xff0c;当创建对象时&#xff0c;无法分配足够的内存空间来存储对象&#xff0c;导致堆内存溢出的情况。 Java堆是Java虚拟机中用于存储对象的一块内存区域。当程序创建对象时&#xff0c…...

编程日记 2023/8/22 9:49:47

C语言，Linux，静态库编写方法，makefile与shell脚本的关系。

静态库编写&#xff1a; 编写.o文件gcc -c(小写) seqlist.c(需要和头文件、main.c文件在同一文件目录下) libs.a->去掉lib与.a剩下的为库的名称‘s’。 -ls是指库名为s。 -L库的路径。 makefile文件编写&#xff1a; CFLAGS-Wall -O2 -g -I ./inc/ LDFLAGS-L./lib/ -l…...

编程日记 2023/8/22 9:48:45

Php“牵手”淘宝商品详情页数据采集方法,淘宝API接口申请指南

淘宝天猫详情接口 API 是开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在电商平台的开发中&#xff0c;详情接口API是非常常用的 API&#xff0c;因此本文将详细介绍详情接口 API 的使用。 一、…...

编程日记 2023/8/22 9:47:43

如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现全屏滚动效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…...

编程日记 2023/8/22 9:46:41

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…...

编程日记 2023/8/22 9:45:40

安装chromedriver 115，对应chrome版本115（经检验，116也可以使用）

目录 1. 查看Chrome浏览器的版本2. 找到对应的chromedriver3. 安装ChromeDriver 1. 查看Chrome浏览器的版本 点进这个网站查看&#xff1a;chrome://settings/help &#xff08;真是的&#xff0c;上一秒还是115版本&#xff0c;更新后就是116版本了&#xff0c;好在chromedi…...

编程日记 2023/8/22 9:44:39

排序算法：插入排序

插入排序的思想非常简单&#xff0c;生活中有一个很常见的场景&#xff1a;在打扑克牌时&#xff0c;我们一边抓牌一边给扑克牌排序&#xff0c;每次摸一张牌&#xff0c;就将它插入手上已有的牌中合适的位置&#xff0c;逐渐完成整个排序。 插入排序有两种写法&#xff1a; 交…...

编程日记 2023/8/22 9:43:37

掌握AI助手的魔法工具：解密Prompt（提示）在AIGC时代的应用「上篇」

在当今的AIGC时代&#xff0c;我们面临着越来越多的人工智能技术和应用。其中一个引人注目的工具就是Prompt&#xff08;提示&#xff09;。它就像是一种魔法&#xff0c;可以让我们与AI助手进行更加互动和有针对性的对话。那么&#xff0c;让我们一起来了解一下Prompt&#xf…...

编程日记 2023/8/22 9:42:35

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 也…...

编程日记 2023/8/22 9:41:34

【C++入门到精通】C++入门 —— priority_queue(STL)优先队列

阅读导航 前言一、priority_queue简介1. 概念2. 特点 二、priority_queue使用1. 基本操作2. 底层结构 三、priority_queue模拟实现⭕ C代码⭕priority_queue中的仿函数 总结温馨提示 前言 ⭕文章绑定了VS平台下std::priority_queue的源码&#xff0c;大家可以下载了解一下&…...

编程日记 2023/8/22 9:40:32

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

编程新知 2026/1/28 15:17:48

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

编程新知 2026/1/29 19:58:52

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2026/1/23 15:02:26

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2026/1/31 1:11:18