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

2024-09-05 08:28

本文主要是介绍监控平台之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模拟后端接口的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138438

相关文章

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

JVisualVM之Java性能监控与调优利器详解

《JVisualVM之Java性能监控与调优利器详解》本文将详细介绍JVisualVM的使用方法,并结合实际案例展示如何利用它进行性能调优,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录1. JVisualVM简介2. JVisualVM的安装与启动2.1 启动JVisualVM2

Java中的Closeable接口及常见问题

《Java中的Closeable接口及常见问题》Closeable是Java中的一个标记接口,用于表示可以被关闭的对象,它定义了一个标准的方法来释放对象占用的系统资源,下面给大家介绍Java中的Clo... 目录1. Closeable接口概述2. 主要用途3. 实现类4. 使用方法5. 实现自定义Clos

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

java对接第三方接口的三种实现方式

《java对接第三方接口的三种实现方式》:本文主要介绍java对接第三方接口的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录HttpURLConnection调用方法CloseableHttpClient调用RestTemplate调用总结在日常工作

Python模拟串口通信的示例详解

《Python模拟串口通信的示例详解》pySerial是Python中用于操作串口的第三方模块,它支持Windows、Linux、OSX、BSD等多个平台,下面我们就来看看Python如何使用pySe... 目录1.win 下载虚www.chinasem.cn拟串口2、确定串口号3、配置串口4、串口通信示例5

Java 的 Condition 接口与等待通知机制详解

《Java的Condition接口与等待通知机制详解》在Java并发编程里,实现线程间的协作与同步是极为关键的任务,本文将深入探究Condition接口及其背后的等待通知机制,感兴趣的朋友一起看... 目录一、引言二、Condition 接口概述2.1 基本概念2.2 与 Object 类等待通知方法的区别

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

Java对接Dify API接口的完整流程

《Java对接DifyAPI接口的完整流程》Dify是一款AI应用开发平台,提供多种自然语言处理能力,通过调用Dify开放API,开发者可以快速集成智能对话、文本生成等功能到自己的Java应用中,本... 目录Java对接Dify API接口完整指南一、Dify API简介二、准备工作三、基础对接实现1.

使用Python实现实时金价监控并自动提醒功能

《使用Python实现实时金价监控并自动提醒功能》在日常投资中,很多朋友喜欢在一些平台买点黄金,低买高卖赚点小差价,但黄金价格实时波动频繁,总是盯着手机太累了,于是我用Python写了一个实时金价监控... 目录工具能干啥?手把手教你用1、先装好这些"食材"2、代码实现讲解1. 用户输入参数2. 设置无头浏