监控平台之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.还有一些语法写法上的细节,调用时机,封装的函数,检查是否遗漏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/417178.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VR虚拟驾驶未来发展_vr自动驾驶汽车所带来的改变

在自动驾驶汽车的基础上&#xff0c;VR虚拟现实技术的应用也让自动驾驶汽车更加智能化&#xff0c;能够实现更高级的驾驶体验&#xff0c;今天这篇文章就和大家一起探讨一下 VR虚拟驾驶未来发展的趋势&#xff0c;以及虚拟现实自动驾驶汽车所带来的几个改变。 一、VR 虚拟驾驶未…

UnityShaderGraph 卡通水面效果

效果预览&#xff1a; 原理&#xff1a; 使用三张噪声贴图&#xff0c;结合UV偏移制作水面波纹混合的假象效果 噪声图1&#xff1a; 噪声图2&#xff1a; 噪声图3&#xff1a; 三次采样都是同样的方法&#xff0c;使用step函数来二分噪声 三张噪声采样结果相乘得到最终的波纹…

深度学习与大模型第1课环境搭建

文章目录 深度学习与大模型第1课环境搭建1. 安装 Anaconda2. 修改环境变量2.1 修改 .condarc 文件2.2 使用 Anaconda Prompt 修改环境变量 3. 新建 .ipynb 文件 机器学习基础编程&#xff1a;常见问题&#xff1a; 深度学习与大模型第1课 环境搭建 1. 安装 Anaconda 首先&am…

Ai Illustrator 取消吸附到像素点,鼠标拖动的时候只能到像素点

Ai Illustrator 取消吸附到像素点&#xff0c;鼠标拖动的时候只能到像素点 在做图的时候无意间变成吸附到像素点了&#xff0c;导致无法更细致的移动点。 像这样&#xff1a; 关闭的方法是打开上面菜单中的 【视图】取消勾选【对齐像素】 即可。 结果就是&#xff1a;

新160个crackme - 048-monkeycrackme1

运行分析 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/8e7c9973721b4df1997cc9a83e0ef2b6.png 500x) 点击注册无反应 PE分析 Delphi程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 使用DeDeDark进行分析&#xff0c;发现Register按钮事件地址入口…

容性负载箱如何测量电容器的容量、电压、泄漏电流和ESR等参数?

容性负载箱是用于测量电容器参数的重要设备。它的主要功能是通过向电容器施加不同的负载&#xff0c;从而测量电容器的容量、电压响应、损耗等关键参数。 具体来说&#xff0c;容性负载箱可以通过以下方式测量电容器的各项参数&#xff1a; 1. 测量电容器的容量&#xff1a;容…

Java项目:139 springboot基于SpringBoot的论坛系统设计与实现

项目介绍 论坛系统设置的角色有管理员&#xff0c;版主&#xff0c;用户等。 管理员管理论坛&#xff0c;主要是对论坛帖子增删改查以及对论坛帖子回复进行查看&#xff0c;对版主和用户进行管理&#xff0c;管理新闻等。 版主可以发布帖子&#xff0c;可以查询论坛帖子&…

【Ubuntu20.04】配置深度学习环境

参考 Ubuntu20.04配置深度学习环境&#xff08;全网最细最全&#xff09; NVIDIA显卡驱动安装安装CUDA 通过终端nvidia-smi查看自己能安装的最高CUDA版本&#xff0c;在官方网址下载需要的版本。安装cuDNN 在官方网址选择适配于自己安装的CUDA版本的cuDNN安装Anaconda &#x…

Elastic Stack-ES集群常用的API

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 学习B站博主教程笔记&#xff1a; 最新版适合自学的ElasticStack全套视频&#xff08;Elk零基础入门到精通教程&#xff09;Linux运维必备—Elastic…

JavaScript事件

DOM事件 事件概念&#xff1a;事件是文档或浏览器中发生的交互行为的响应。事件流&#xff1a;分为三个阶段&#xff1a; 捕获阶段&#xff1a;事件从根节点开始&#xff0c;逐级向下传播至目标节点。目标阶段&#xff1a;事件在目标节点上被处理。冒泡阶段&#xff1a;事件从…

Python作为客户端连接websocket

缘起 因为需要将MQTT中的数据推送给前端,但是前端不会直接连接MQTT,所以服务端做了一个中间层,通过websocket推送,但是在开发的过程中前端总是认为推送的数据不及时,所以这里又实用Python单独做了一个客户端做时间记录验证。开始吧 安装三方包 Python的生态很方便,这里…

java编程实现ElGamal的加密和解密题目实例

1.题目 编程实现ElGamal的加密和解密&#xff0c;假设用户A选择素数p11和本原根g2&#xff0c;并且选择私钥α5&#xff0c;输出A的公钥&#xff1b;若用户B向用户A发送消息m6&#xff0c;随机数k7&#xff0c;输出对该消息加密后的密文&#xff0c;以及对密文进行解密的明文。…

上海晋名室外危化品暂存柜助力新能源行业发展

近日又有一个SAVEST室外危化品暂存柜项目成功验收交付使用。 用户在日常经营活动中涉及到气瓶和硅粉的室外安全暂存问题&#xff0c;4月下旬在网上看到上海晋名室外暂存柜系列很感兴趣&#xff0c;联系到了销售部钟经理&#xff0c;双方对晋名的室外暂存柜进行了高效的沟通&am…

cesium 使用异步函数 getHeightAtPoint,获取指定经纬度点的地形高度。

这个函数使用 CesiumJS 库的 sampleTerrain 方法来获取地形数据。下面是代码的详细解释&#xff1a; async getHeightAtPoint(LngLat) {// 将经纬度转为 Cartographic 对象let cartographics [Cesium.Cartographic.fromDegrees(LngLat[0], LngLat[1])];// console.log("…

Day 3 - 5 :线性表 — 单链表

存储结构 将线性表中的各元素分布在存储器的不同存储块&#xff0c;称为结点。 结点的data域存放数据元素ai&#xff0c;而next域是一个指针&#xff0c;指向ai的直接后继ai1所在的结点。 如果要删除a1&#xff0c;只要修改a1前手元素指针的指向即可。 例如&#xff1a;需要找到…

内存管理篇-22 高端内存和低端内存的分界线

这节课讲的主是为了区分低端内存和高端内存的是如何区分的&#xff1f;内核空间的划分是可以配置的。为了查看现象&#xff0c;通过qemu设置物理内存为不同情况。 结论&#xff1a;线性映射区的大小&#xff0c;和page_offset(内核起始地址0x80000000还是0xc0000000)和物理内存…

JavaEE(2):前后端项目之间的交互

现在&#xff0c;在网页中通过超链接&#xff0c;表单就可以向后端发送请求&#xff0c;后端也可以正常响应内容。 以前通过表单访问后端的请求方式称为同步请求 同步请求 当网页与后端交互时&#xff0c;前端不能再进行其他操作 服务器端响应回来的内容&#xff0c;会把整个浏…

2024年高教社杯数学建模国赛赛题浅析——助攻快速选题

一图流——一张图读懂国赛 总体概述&#xff1a; A题偏几何与运动学模型&#xff0c;适合有几何与物理背景的队伍&#xff0c;数据处理复杂性中等。 B题侧重统计和优化&#xff0c;适合有运筹学和经济学背景的队伍&#xff0c;数据处理较为直接但涉及多步骤的决策优化。 C题…

云计算实训39——Harbor仓库的使用、Docker-compose的编排、YAML文件

一、Harbor部署 1.验证python版本 [rootdocker2 ~]#python --version 2.安装pip [rootdocker2 ~]# yum -y install python2-pip #由于版本过低&#xff0c;需要对其进行一个升级 #更新pip [rootdocker2 ~]#pip install --upgrade pip 3.指定版本号 [rootdocker2 ~]# p…

SpringBoot实现前后端传输加密设计

在Web应用中&#xff0c;确保前后端之间的数据传输安全是非常重要的。这通常涉及到使用HTTPS协议、数据加密、令牌验证等安全措施。本文通过将前后端之间的传输数据进行加密&#xff0c;用于在Spring Boot应用中实现前后端传输加密设计。 一、数据加密方案 即使使用了HTTPS&…