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

监控平台之nodejs模拟后端接口

news 2025/6/19 17:17:53

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&#xff1a;可以下载进行实验 https://github.com/Mr-Shi-root/sdk-platform/tree/master 1.配置node环境&#xff0c;安装express cors body-parser babel/cors body-parser - node.js 中间件&#xff0c;用于处理 JSON, Raw, Text 和 URL 编码的数据。cookie-parse…...

编程日记 2024/9/5 19:50:20

TCP 协议详解

目录 一.定义 二.TCP 协议报文格式 三.确认应答(ACK)机制 四.捎带应答 五.连接管理机制 六.滑动窗口 七.快重传 八.拥塞控制 九.延时应答 十.面向字节流 十一.粘包问题 十二.异常情况 十三.TCP 小结 一.定义 传输控制协议&#xff08;TCP&#xff0c;Transmissio…...

编程日记 2024/9/5 19:49:18

【转载】golang内存分配

Go 的分配采用了类似 tcmalloc 的结构.特点: 使用一小块一小块的连续内存页, 进行分配某个范围大小的内存需求. 比如某个连续 8KB 专门用于分配 17-24 字节,以此减少内存碎片. 线程拥有一定的 cache, 可用于无锁分配. 同时 Go 对于 GC 后回收的内存页, 并不是马上归还给操作系…...

编程日记 2024/9/5 19:48:17

TPM管理培训：学以致用，才是硬道理

全面生产维护&#xff08;TotalProductiveMaintenance,TPM&#xff09;作为一种先进的管理体系&#xff0c;正被越来越多的企业所采用&#xff0c;以期通过全员参与、全系统改善的方式&#xff0c;实现设备综合效率的最大化。然而&#xff0c;理论学习与实践应用之间往往存在鸿…...

编程日记 2024/9/5 19:47:16

2024年六月英语四级真题及解析PDF共9页

2024年六月英语四级真题及解析PDF共9页&#xff0c;真题就是最好的复习资料&#xff0c;希望对大家有所帮助。...

编程日记 2024/9/5 19:45:15

自闭症儿童语言干预

自闭症儿童的语言发展往往面临独特挑战&#xff0c;这不仅影响了他们的日常交流能力&#xff0c;也制约了其社交与认知的全面发展。因此&#xff0c;实施科学有效的语言干预对于促进自闭症儿童的语言能力至关重要。 语言干预应基于个性化原则&#xff0c;充分考虑每个孩子的兴…...

编程日记 2024/9/5 19:44:14

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作为打包工具&#xff0c;打包成浏览器识别的…...

编程日记 2024/9/5 19:39:10

在js渲染的dom中的事件中传递对象

在某些情况下&#xff0c;可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中&#xff0c;可以将对象数据序列化为 JSON 字符串&#xff0c;存储在 data-* 自定义属性中。这样可以在事件中取出并解析对象数据&#xff1a; <!DOCTYPE html> <html lang"en&qu…...

编程日记 2024/9/5 19:38:09

服务器加速器如何应对大规模并行计算需求

服务器加速器&#xff0c;如GPU(图形处理单元)、FPGA(现场可编程门阵列)和TPU(张量处理单元)&#xff0c;在大规模并行计算需求中发挥着重要作用。它们通过提供高效的并行处理能力&#xff0c;大幅提升了计算性能&#xff0c;满足了许多领域对大规模并行计算的需求。下面详细介…...

编程日记 2024/9/5 19:37:08

C++/Qt 多媒体（续四）

一、前言 前边讲述到了Qt的两项独特的模块编程支持的另一项内容——多媒体编程，上篇文章具体讲述的包括采集和播放原始音频相关类的概述，而本章开始主要概述多媒体编程实现的功能中的最后两项：播放视频文件和通过摄像头拍照和录像。 对于上篇内容的示例全部代码，可…...

编程日记 2024/9/5 19:36:05

怎样把flv转换成mp4格式？8种可以推荐的视频转换方法

怎样把flv转换成mp4格式&#xff1f;MP4格式因其广泛的兼容性&#xff0c;几乎可以在所有设备和媒体播放器上顺畅播放&#xff0c;这极大地方便了用户的观看体验。与flv文件相比&#xff0c;MP4通常能更有效地压缩视频文件&#xff0c;既能保持较高的画质&#xff0c;又能显著减…...

编程日记 2024/9/5 19:35:03

【2024数学建模国赛赛题解析已出】原创免费分享

2024数模国赛赛题已正式发布 数模加油站初步分析评估了此次竞赛题目&#xff1a; A题&#xff1a;偏数学仿真建模&#xff0c;难度偏难&#xff0c;适合数学专业背景的同学 B题&#xff1a;评价决策类&#xff0c;自由度大&#xff0c;容易水&#xff0c;适合基础不太好的同…...

编程日记 2024/9/5 19:33:01

Windows安装使用Docker

配置Dorker环境 启用或关闭windows功能 安装wsl 以管理员身份打开windows PowerShell&#xff0c;安装相关配置 下载docker应用程序 Releases tech-shrimp/docker_installer (github.com) 安装Docker 指定安装位置 默认双击程序就开始安装了&#xff0c;要安装在指定位置…...

编程日记 2024/9/5 19:32:00

【wsl2】从C盘迁移到G盘

参考大神 C盘的ubuntu22.04 非常大&#xff0c;高达30g 迁移后就只有几百M了&#xff1a; 右键有一个move没有敢尝试 迁移过程 Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improveme…...

编程日记 2024/9/5 19:30:59

低代码技术新趋势——逆向工程

低代码的下一个趋势&#xff0c;应该是“逆向工程”&#xff0c;用户可以通过 可视化界面&#xff0c;逆向输出全栈工程代码。而标准的工程代码同样可以编译为支持可视化分析、编辑、调整的“无代码”程序。前一个是解释性语言向编译性语言的逆向工程。后者则是一个理论实践应用…...

编程日记 2024/9/5 19:27:56

HTTP 二、进阶

四、安全 1、TLS是什么 &#xff08;1&#xff09;为什么要有HTTPS ​ 简单的回答是“因为 HTTP 不安全”。由于 HTTP 天生“明文”的特点&#xff0c;整个传输过程完全透明&#xff0c;任何人都能够在链路中截获、修改或者伪造请求 / 响应报文&#xff0c;数据不具有可…...

编程日记 2024/9/5 19:26:55

【Hot100】LeetCode—35. 搜索插入位置

目录 1- 思路二分 2- 实现⭐35. 搜索插入位置——题解思路 3- ACM 实现 题目连接&#xff1a;35. 搜索插入位置 1- 思路 二分 二分左区间的三种情况。由于目标值不一定在数组中&#xff0c;因此二分的过程中有三种情况判断 2- 实现 ⭐35. 搜索插入位置——题解思路 class So…...

编程日记 2024/9/5 19:25:54

001集——CAD—C#二次开发入门——开发环境基本设置

CAD C#二次开发首先需要搭建一个舒服的开发环境&#xff0c;软件安装后&#xff0c;需要修改相关设置。本文为保姆级入门搭建开发环境教程&#xff0c;默认已成功安装vs和cad 。 第一步&#xff1a;创建类库 第二步&#xff1a;进行相关设置&#xff0c;如图&#xff1a; 下一…...

编程日记 2024/9/5 19:24:53

Java类和对象——快速自动生成带参数的结构

1.鼠标点击右键或者&#xff08;使用快捷按键&#xff1a;AltInsert&#xff09; 2.选着generate 3.选择想要执行的指令 其中Constructor---构造方法&#xff08;声明了private属性然后直接使用即可&#xff09;&#xff0c;生成带参数的结构 1&#xff1a;不带参数的结构&…...

编程日记 2024/9/5 19:22:51

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

编程日记 2024/9/5 19:21:50

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/6/19 14:19:45

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/6/16 11:45:09

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/6/19 12:35:07

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/6/15 2:03:21

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2025/6/17 0:44:13

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/6/16 9:12:43

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/6/16 14:15:08

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/6/16 7:49:31

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/6/18 3:46:52