监控平台之nodejs模拟后端接口
github:可以下载进行实验
https://github.com/Mr-Shi-root/sdk-platform/tree/master
1.配置node环境,安装express cors body-parser babel/cors
- body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
- cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
- multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。
- CORS (Cross-Origin Resource Sharing) 是一种允许服务器控制允许跨源请求的机制。它帮助解决 Web 浏览器的同源策略问题,使得前端应用可以安全地从不同的源(例如不同的域名、协议或端口)请求资源。
2.创建server.js,写服务,并且启动
node server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();// Cors配置
// const corsOptions = {
// origin: 'http://example.com', // 允许来自 http://example.com 的请求
// methods: ['GET', 'POST'], // 只允许 GET 和 POST 请求
// allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
// };
// app.use(cors(corsOptions));// Express 应用中的一个中间件函数,负责将请求中的各种类型数据解析为 JavaScript 对象,方便在路由处理函数中访问。
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(bodyParser.text());// reportData接口,上报后进行请求,后续可用java数据库进行请求存储
app.post('/reportData', (req, res) => {console.log('server-reportData', req.body);res.status(200).send('success');
})app.listen(3000, () => {console.log('server start at 3000');
})
3. 写demo.html, mock一些图片,promise,js的错误,用于测试错误上报
4.引入WebEyeSDK包,初始化(init)上报接口,获取请求的上报数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入sdk包 --><script src="../../dist/webEyeSDK.js"></script><script>WebEyeSDK.init({url: 'http://127.0.0.1:3000/reportData'})</script>
</head>
<body><!-- 图片加载错误 --><img src="http://toutiao.com/x.png" alt=""><img src="http://toutiao.com/x2.png" alt=""><img src="http://toutiao.com/x3.png" alt=""><img src="http://toutiao.com/x4.png" alt=""><script>// promise抛出的errorfunction test() {return Promise.reject(Error("promise"))}function test2() {return Promise.reject(Error("async"))}test()test2()// 普通js抛出的errorthrow Error("test")</script>
</body>
</html>
5.config.js中满5上报,node服务上报后,打印请求体

到此为止,整个流程的雏形已经跑通,
期间发现了一个面试知识点
Q:是怎么解决频繁上报的?
A:批量上报,巴拉巴拉(前面说过)
Q:那么最后一次数组里的数据,怎么办?
分析:这里对于真正做过监控的人来说,会回答直接忽略掉,不上报,不统计,因为上报丢失很正常,不可能一条不差,而且对于大数据量的上报来说,这些是不会影响全局的数据准确性的,如果在面试中针对这个去说解决方法,会有点本末倒置,注意!
期间遇到了很多小问题,这里简单说下,后续开发注意
(改死我了)
1.重写方法一定用call传当前作用域 eg:handler.call(this, err, vm, info);
2.注意三种上报方法的顺序,
3.了解一下window.fetch
4.还有一些语法写法上的细节,调用时机,封装的函数,检查是否遗漏
相关文章:
监控平台之nodejs模拟后端接口
github:可以下载进行实验 https://github.com/Mr-Shi-root/sdk-platform/tree/master 1.配置node环境,安装express cors body-parser babel/cors body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。cookie-parse…...
TCP 协议详解
目录 一.定义 二.TCP 协议报文格式 三.确认应答(ACK)机制 四.捎带应答 五.连接管理机制 六.滑动窗口 七.快重传 八.拥塞控制 九.延时应答 十.面向字节流 十一.粘包问题 十二.异常情况 十三.TCP 小结 一.定义 传输控制协议(TCP,Transmissio…...
【转载】golang内存分配
Go 的分配采用了类似 tcmalloc 的结构.特点: 使用一小块一小块的连续内存页, 进行分配某个范围大小的内存需求. 比如某个连续 8KB 专门用于分配 17-24 字节,以此减少内存碎片. 线程拥有一定的 cache, 可用于无锁分配. 同时 Go 对于 GC 后回收的内存页, 并不是马上归还给操作系…...
TPM管理培训:学以致用,才是硬道理
全面生产维护(TotalProductiveMaintenance,TPM)作为一种先进的管理体系,正被越来越多的企业所采用,以期通过全员参与、全系统改善的方式,实现设备综合效率的最大化。然而,理论学习与实践应用之间往往存在鸿…...
2024年六月英语四级真题及解析PDF共9页
2024年六月英语四级真题及解析PDF共9页,真题就是最好的复习资料,希望对大家有所帮助。...
自闭症儿童语言干预
自闭症儿童的语言发展往往面临独特挑战,这不仅影响了他们的日常交流能力,也制约了其社交与认知的全面发展。因此,实施科学有效的语言干预对于促进自闭症儿童的语言能力至关重要。 语言干预应基于个性化原则,充分考虑每个孩子的兴…...
webpack基本使用(基础配置)
文章目录 概要理解 一、使用示例1.引入库2.创建config/webpack.dev.js 测试环境3.创建config/webpack.prod.js 正式环境3.创建eslintrc.js4.创建babel.config.js5.package.json5.main.js 总结 概要理解 vue或者react 通常用webpack作为打包工具,打包成浏览器识别的…...
在js渲染的dom中的事件中传递对象
在某些情况下,可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中,可以将对象数据序列化为 JSON 字符串,存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据: <!DOCTYPE html> <html lang"en&qu…...
服务器加速器如何应对大规模并行计算需求
服务器加速器,如GPU(图形处理单元)、FPGA(现场可编程门阵列)和TPU(张量处理单元),在大规模并行计算需求中发挥着重要作用。它们通过提供高效的并行处理能力,大幅提升了计算性能,满足了许多领域对大规模并行计算的需求。下面详细介…...
C++/Qt 多媒体(续四)
一、前言 前边讲述到了Qt的两项独特的模块编程支持的另一项内容——多媒体编程,上篇文章具体讲述的包括采集和播放原始音频相关类的概述,而本章开始主要概述多媒体编程实现的功能中的最后两项:播放视频文件和通过摄像头拍照和录像。 对于上篇内容的示例全部代码,可…...
怎样把flv转换成mp4格式?8种可以推荐的视频转换方法
怎样把flv转换成mp4格式?MP4格式因其广泛的兼容性,几乎可以在所有设备和媒体播放器上顺畅播放,这极大地方便了用户的观看体验。与flv文件相比,MP4通常能更有效地压缩视频文件,既能保持较高的画质,又能显著减…...
【2024数学建模国赛赛题解析已出】原创免费分享
2024数模国赛赛题已正式发布 数模加油站初步分析评估了此次竞赛题目: A题:偏数学仿真建模,难度偏难,适合数学专业背景的同学 B题:评价决策类,自由度大,容易水,适合基础不太好的同…...
Windows安装使用Docker
配置Dorker环境 启用或关闭windows功能 安装wsl 以管理员身份打开windows PowerShell,安装相关配置 下载docker应用程序 Releases tech-shrimp/docker_installer (github.com) 安装Docker 指定安装位置 默认双击程序就开始安装了,要安装在指定位置…...
【wsl2】从C盘迁移到G盘
参考大神 C盘的ubuntu22.04 非常大,高达30g 迁移后就只有几百M了: 右键有一个move没有敢尝试 迁移过程 Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improveme…...
低代码技术新趋势——逆向工程
低代码的下一个趋势,应该是“逆向工程”,用户可以通过 可视化界面,逆向输出全栈工程代码。而标准的工程代码同样可以编译为支持可视化分析、编辑、调整的“无代码”程序。前一个是解释性语言向编译性语言的逆向工程。后者则是一个理论实践应用…...
HTTP 二、进阶
四、安全 1、TLS是什么 (1)为什么要有HTTPS 简单的回答是“因为 HTTP 不安全”。由于 HTTP 天生“明文”的特点,整个传输过程完全透明,任何人都能够在链路中截获、修改或者伪造请求 / 响应报文,数据不具有可…...
【Hot100】LeetCode—35. 搜索插入位置
目录 1- 思路二分 2- 实现⭐35. 搜索插入位置——题解思路 3- ACM 实现 题目连接:35. 搜索插入位置 1- 思路 二分 二分左区间的三种情况。由于目标值不一定在数组中,因此二分的过程中有三种情况判断 2- 实现 ⭐35. 搜索插入位置——题解思路 class So…...
001集——CAD—C#二次开发入门——开发环境基本设置
CAD C#二次开发首先需要搭建一个舒服的开发环境,软件安装后,需要修改相关设置。本文为保姆级入门搭建开发环境教程,默认已成功安装vs和cad 。 第一步:创建类库 第二步:进行相关设置,如图: 下一…...
Java类和对象——快速自动生成带参数的结构
1.鼠标点击右键或者(使用快捷按键:AltInsert) 2.选着generate 3.选择想要执行的指令 其中Constructor---构造方法(声明了private属性然后直接使用即可),生成带参数的结构 1:不带参数的结构&…...
Python操作数据库的ORM框架SQLAlchemy快速入门教程
连接内存版SQLIte from sqlalchemy import create_engineengine create_engine(sqlite:///:memory:) print(engine)连接文件版SQLite from sqlalchemy import create_engineengine create_engine(sqlite:///sqlite3.db) print(engine)连接MySQL数据库 from sqlalchemy imp…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
论文阅读:Matting by Generation
今天介绍一篇关于 matting 抠图的文章,抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法,已经有很多的工作和这个任务相关。这两年 diffusion 模型很火,大家又开始用 diffusion 模型做各种 CV 任务了&am…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...
