Skip to content

R
rip
Commit 74890fea authored by fanxuehui's avatar fanxuehui
Browse files
Options

refactor(Module split):

parent e8268d8a
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 89 deletions
src/lib/comment.js deleted 100644 → 0
View file @ e8268d8a
import 'whatwg-fetch';
import utils from './utils';
const common = {
/**
* fetch请求封装
* @param {*} action 请求线上地址
* @param {*} params 请求入参
* @param {*} method 请求方式，默认get
* @param {*} options 其他参数
* options为对象格式,值：
* isLoading(是否激活请求加载动画)
* isJson(是否设置post请求头contentType为application/json)
* content 自定义请求参数
*/
fetch(action, params = {}, method = 'get', options = {}) {
const token = utils.getCookie('token');
const XCsrfToken = utils.getCookie('csrf_token');
let url = action;
let option = {
method,
credentials: 'same-origin',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'token': token,
'X-Csrf-Token': XCsrfToken
}
};
if (options && options.content) {
option = Object.assign({}, option, options.content);
}
if (method === 'post') {
if (options && options.isJson) {
option.body = JSON.stringify(params);
} else {
option = Object.assign({}, option, {
headers: {
Accept: 'application/json,text/plain,*/*',
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
'token': token,
'X-Csrf-Token': XCsrfToken
}
});
option.body = utils.serialize(params);
}
}
if (method === 'get') {
url = Object.keys(params).length ? url + '?' + utils.serialize(params) : url;
}
return fetch(url, option)
.then(response => {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
let error = new Error(response.statusText);
error.response = response;
throw error;
}
});
}
}
export default common;
\ No newline at end of file
src/lib/common.js 0 → 100644
View file @ 74890fea
import "whatwg-fetch";
import utils from "./utils";
/**
* fetch请求封装
* @param {*} action 请求线上地址
* @param {*} params 请求入参
* @param {*} method 请求方式，默认get
* @param {*} options 其他参数
* options为对象格式,值：
* isLoading(是否激活请求加载动画)
* isJson(是否设置post请求头contentType为application/json)
* content 自定义请求参数
*/
export function fetch(action, params = {}, method = "get", options = {}) {
const token = utils.getCookie("token");
const XCsrfToken = utils.getCookie("csrf_token");
let url = action;
let option = {
method,
credentials: "same-origin",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
token: token,
"X-Csrf-Token": XCsrfToken,
},
};
if (options && options.content) {
option = Object.assign({}, option, options.content);
}
if (method === "post") {
if (options && options.isJson) {
option.body = JSON.stringify(params);
} else {
option = Object.assign({}, option, {
headers: {
Accept: "application/json,text/plain,*/*",
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
token: token,
"X-Csrf-Token": XCsrfToken,
},
});
option.body = utils.serialize(params);
}
}
if (method === "get") {
url = Object.keys(params).length ? url + "?" + utils.serialize(params) : url;
}
return fetch(url, option).then(response => {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
let error = new Error(response.statusText);
error.response = response;
throw error;
}
});
}
src/lib/counter.js 0 → 100644
View file @ 74890fea
class Counter {
count = 0;
next() {
return ++this.count;
}
reset() {
this.count = 0;
}
}
export default Counter;
src/lib/monitor.js
View file @ 74890fea
import * as rrweb from "rrweb";
import TracksWorker from "./tracks.worker";
import common from './comment';
export default class Monitor {
rrwebHandler = null;
tracksWorker = new TracksWorker();
// 记录
constructor() {
this.tracksWorker.onmessage = ({ data }) => {
console.log('local', data);
console.log("local", data);
window.localStorage.setItem("rrevents", JSON.stringify(data));
// common.fetch('https://manager.tuiatest.cn/homePage/data','get');
};
}
record() {
this.rrwebHandler && this.rrwebHandler();
console.log('开始录制')
console.log("开始录制");
this.rrwebHandler = rrweb.record({
emit: event => {
this.tracksWorker.postMessage({ type: "record", payload: event });
......@@ -26,13 +25,13 @@ export default class Monitor {
if (!this.rrwebHandler) {
throw new Error("没有正在录制的实例");
}
console.log('停止录制')
console.log("停止录制");
this.rrwebHandler();
}
// 重置
reset(event) {
this.rrwebHandler && this.rrwebHandler();
console.log('重置数据')
console.log("重置数据");
this.tracksWorker.postMessage({ type: "reset", payload: event });
}
// 发送信息
......
src/lib/reporter.js 0 → 100644
View file @ 74890fea
// 数据维护,上报
import { fetch } from "./common";
import Counter from "./counter";
class Reporter {
isUploading = false;
bus = [];
counter = new Counter();
constructor(recordKey) {
this.recordKey = recordKey;
}
toCDN() {
this.isUploading = true;
let index = this.bus.length;
let trackId = this.counter.next();
let recordKey = this.recordKey;
return fetch("cdn").then(res => {
this.isUploading = false;
if (recordKey !== this.recordKey) {
return;
}
return res;
});
}
toBus(data) {
let trackId = this.counter.next();
data.trackId = trackId;
this.bus.push(data);
}
report(data) {
if (this.isUploading) {
return;
}
return fetch("report");
}
reset(recordKey) {
this.bus = [];
this.counter.reset();
this.recordKey = recordKey;
}
}
export default Reporter;
src/lib/tracks.worker.js
View file @ 74890fea
import md5 from 'md5';
import utils from './utils';
import _ from 'lodash';
// 入口，格式化数据，模块管理
import md5 from "md5";
import utils from "./utils";
import _ from "lodash";
import Reporter from "./reporter";
const reporter = new Reporter("recordKey");
// 原始数据数组
let events = [];
// 包装后的数据对象
let wrapData = [];
// 分条视频id
let recordKey = '';
let recordKey = "";
// 全量快照是否已经返回
let isCdnReturn = false;
onmessage = ({ data: { type, payload } }) => {
......@@ -14,34 +17,46 @@ onmessage = ({ data: { type, payload } }) => {
case "record":
// todo : 数据本地存储
console.log(wrapData);
wrapData.push(utils.dataWrapper({
recordKey,
isCdn: false
}, payload));
wrapData.push(
utils.dataWrapper(
{
recordKey,
isCdn: false,
},
payload,
),
);
events.push(payload);
// todo : 全量快照上传cdn
if(payload.type === 2) {
const cdnIndex = _.findIndex(events, { 'type': 2 });
if (payload.type === 2) {
const cdnIndex = _.findIndex(events, { type: 2 });
setTimeout(() => {
wrapData.splice(cdnIndex, 1, utils.dataWrapper({
recordKey,
isCdn: true
}, payload));
wrapData.splice(
cdnIndex,
1,
utils.dataWrapper(
{
recordKey,
isCdn: true,
},
payload,
),
);
isCdnReturn = true;
}, 1000);
}
// todo : 数据压缩
// todo : 根据事件类型优先级触发上传策略(click)
if(payload.data.source === 2 && isCdnReturn) {
console.log('点击上上传events', wrapData);
if (payload.data.source === 2 && isCdnReturn) {
console.log("点击上上传events", wrapData);
postMessage(wrapData);
events = [];
wrapData = [];
}
// todo : 数据超出100条上线,自动上传
if (wrapData.length > 100 && isCdnReturn) {
console.log('超出线上100条上传events', wrapData)
console.log("超出线上100条上传events", wrapData);
postMessage(wrapData);
events = [];
wrapData = [];
......@@ -51,11 +66,11 @@ onmessage = ({ data: { type, payload } }) => {
// todo : 重置参数,重新生成recordKey
events = [];
wrapData = [];
recordKey = '';
recordKey = "";
isCdnReturn = false;
const { url, email } = payload;
recordKey = md5(url + email + Date.parse(new Date()));
console.log(url, '分片id', recordKey);
console.log(url, "分片id", recordKey);
break;
default:
console.log("unknow action");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment