监控平台之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…...
Moe-Counter：让网站计数变得萌萌哒的终极解决方案
Moe-Counter：让网站计数变得萌萌哒的终极解决方案 【免费下载链接】Moe-Counter Moe counter badge with multiple themes! - 多种风格可选的萌萌计数器 项目地址: https://gitcode.com/gh_mirrors/mo/Moe-Counter Moe-Counter 是一款功能强大且风格多样的萌…...
Python从入门到精通（第36章）：多线程编程与线程安全
开头导语 写循环时，很多需求是重复的：拼接多个迭代器、取前N个、按相邻相同键分组……itertools 提供了这些常见迭代需求的函数式解决方案，更重要的是，所有函数都返回惰性迭代器——不占额外内存。本章围绕 itertools 模块展开，讲解 count/cycle/repeat、chain/islice/co…...
【JAVA基础面经】线程安全的单例模式
文章目录单例模式（Singleton Pattern）一、饿汉模式二、懒汉模式解决懒汉式线程安全问题双重校验锁提高并发性能静态内部类（JDK 1.2）最佳方法：枚举方式（JDK 1.5）方法的对比单例模式（S…...
微信与支付宝退款接口典型错误排查与实战优化策略
1. 微信支付退款接口典型错误解析 微信支付的退款功能是电商平台必备能力，但很多开发者在对接时都踩过"订单号非法"这个坑。去年我们团队处理过一个紧急case：某跨境电商平台凌晨爆发大量退款失败，日志里清一色的<err_code_des&g…...
【实战指南】利用TestCenter精准验证组播流转发性能
1. 组播流转发测试的核心价值 组播技术在现代网络中的应用越来越广泛，从视频会议到IPTV直播，再到金融行业的行情推送，都离不开高效的组播转发能力。但很多网络工程师在实际工作中经常遇到这样的困惑：明明配置了IGMP Snooping&…...
Laravel 多关键词跨字段模糊搜索的优化实现方案.txt
权限、链路层类型、pcapng格式、HTTP流重组是gopacket抓包四大易错点：Linux需cap_net_raw权限，macOS需动态查接口；gopacket不支持pcapng；默认不解析分片/TLS/HTTP流；LinkType必须从handle获取而非硬编码。pcap.OpenLiv…...
如何在Linux桌面环境下实现高效屏幕翻译：CuteTranslation完整解决方案深度解析
如何在Linux桌面环境下实现高效屏幕翻译：CuteTranslation完整解决方案深度解析 【免费下载链接】CuteTranslation Linux屏幕取词翻译软件 项目地址: https://gitcode.com/gh_mirrors/cu/CuteTranslation 对于Linux用户来说，面对外文技术文档、学术…...
ChatterUI：突破移动端AI聊天限制，重构本地与云端智能对话体验
ChatterUI：突破移动端AI聊天限制，重构本地与云端智能对话体验 【免费下载链接】ChatterUI Simple frontend for LLMs built in react-native. 项目地址: https://gitcode.com/gh_mirrors/ch/ChatterUI ChatterUI是一款基于React Native构建的移动…...
从代码到公路：如何用网页设计体验一把张雪机车的速度与激情？
闲来无事，我设计与制作了一个官网。我想用网页讲一个关于速度与激情的故事。 黑色背景上橙色的光芒划破屏幕，粒子动画如火花般飞溅，3D模型随着鼠标缓缓旋转...这不是在玩游戏，这是在看一台机车。 当其他品牌还在用静态图片展示产…...
【个人思考】“女强人、都市丽人、超级女孩：三种女性叙事，三种人生剧本”
本文原创作者：姚瑞南 AI-agent 大模型运营专家/音乐人/野生穿搭model，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。&#…...