当前位置: 首页 > article >正文

监控平台之上报(未完成)

上报方式:

// 发送图片数据

// 普通ajax发送请求数据

// sendBeacon,如果不兼容,再使用图片上传

科普小知识:

一般token生成,hash生成的格式,是36进制,也就是0至9和A至Z

Math.random().toString(36).substring(2, 9)
// '0bz4xls' 'o0hcuwy'

import config from './config'

// 一般token生成,hash生成的格式,是36进制
// 0至9和A至Z
// Math.random().toString(36).substring(2, 9)

// xhr获取
export const originalProto = XMLHttpRequest.prototype;
export const originalSend = originalProto.send;
export const originalOpen = originalProto.open;

// 生成唯一上报id
export default function generateUniqueId() {
    return 'id-' + Date.now() + '-' + Math.random().toString(36).substring(2, 9)
}

// 上报函数
export function report(data) {
    if (!config.report) {
        console.error('请设置上传 url 地址');
    }

    const reporData = JSON.stringify({
        id: generateUniqueId(),
        data
    });
    // TODO 发送数据 优先使用 secdBeacon,如果不兼容,再使用图片上传
    const value = beaconRequest(config.url, reporData)
    if (!value) {
        // 上报数据,使用图片的方式
        config.isImageUpload ? imgRequest(reporData) : xhrRequest(config.url, reporData); 
    }
}

// 发送图片数据 
export function imgRequest(data) {
    const img = new Image();
    img.src =  `${config.url}?data=${encodeURIComponent(JSON.stringify(data))}`;
}

// 普通ajax发送请求数据
export function xhrRequest(url, data) {
    let flag = true
    if(window.requestIdleCallback){
        return flag = window.requestIdleCallback(()=>{
            const xhr = new XMLHttpRequest();
            originalOpen.call(xhr, 'POST', data.url, true);
            originalSend.call(xhr, JSON.stringify(data));
        },{ timeout: 3000 });
    } else {
        setTimeout(()=>{
            const xhr = new XMLHttpRequest();
            originalOpen.call(xhr, 'POST', data.url, true);
            originalSend.call(xhr, JSON.stringify(data));
        });
    }

    const xhr = new XMLHttpRequest();
    originalOpen.call(xhr, 'POST', data.url, true);
    originalSend.call(xhr, JSON.stringify(data));
}

// sendBeacon上报方式
export function isSupportSendBeacon(){
    return 'sendBeacon' in navigator;
}
// const sendBeacon = isSupportSendBeacon()? navigator.sendBeacon: xhrRequest
// beacon发送请求数据(存在兼容性)
export function beaconRequest(data){
    let flag = true
    if(window.requestIdleCallback){
        return flag = window.requestIdleCallback(()=>{
            sendBeacon(config.url ,data);
        },{ timeout: 3000 });
    } else {
        return flag = setTimeout(()=>{
            sendBeacon(config.url, data)
        });
    }

}


http://www.kler.cn/news/285153.html

相关文章:

  • Python算法工程师面试整理-Python 编程技巧
  • 使用Ansible stat模块检查目录是否存在
  • 【Docker】Dockerfile实列-Nginx镜像构建
  • 类与ES6类之间的继承
  • 叶斯神经网络(BNN)在训练过程中损失函数不收敛或跳动剧烈可能是由多种因素
  • 全网最适合入门的面向对象编程教程:42 Python常用复合数据类型-collections容器数据类型
  • P02-Java流程控制基本结构
  • codetest
  • Linux下递归设置目标目录及其子目录和文件的权限
  • Qt/C++地址转坐标/坐标转地址/逆地址解析/支持百度高德腾讯和天地图
  • 项目策划书六度自由双足机器人
  • WHAT - 通过 react-use 源码学习 React(Animations 篇)
  • Qt QTableWidget可编辑设置,设置部分可编辑
  • 线性表之静态链表
  • Jenkins发邮件功能如何配置以实现自动化?
  • 推理引擎测试-算力共享:test_inference_engine
  • 力扣68.文本左右对齐
  • 18043 找出3个数中最大的数
  • Datawhale x李宏毅苹果书入门 AI夏令营 task03学习笔记
  • 数据结构——单向链表
  • 五、实现随机地图
  • 【STM32】通用定时器TIM(输出比较)
  • 【sqlite3】MySQL8转sqlite3需要对sql做的一些处理
  • PyCharm 自定义字体大小
  • C++ 有向图算法
  • Tiptap中BubbleMenu讲解
  • CAN协议通信 学习笔记
  • 如何使用Hive构建高校考试分析系统:大数据技术在教育领域的应用
  • Ubuntu中qt类与类信号槽的创建及使用
  • 滑动窗口元素的平均值 ← STL : deque