From 9e5d66813a77b455aaf5b2f572c454a884c3e4c9 Mon Sep 17 00:00:00 2001 From: lqqyt2423 <974923609@qq.com> Date: Sat, 8 May 2021 17:01:55 +0800 Subject: [PATCH] web addon flow class --- addon/web/client/src/App.tsx | 47 ++++------- addon/web/client/src/components/EditFlow.tsx | 4 +- addon/web/client/src/flow.ts | 8 +- addon/web/client/src/message.ts | 88 ++++++++++++++++++-- 4 files changed, 105 insertions(+), 42 deletions(-) diff --git a/addon/web/client/src/App.tsx b/addon/web/client/src/App.tsx index f19d564..da84ff0 100644 --- a/addon/web/client/src/App.tsx +++ b/addon/web/client/src/App.tsx @@ -8,12 +8,12 @@ import BreakPoint from './components/BreakPoint' import EditFlow from './components/EditFlow' import { FlowManager } from './flow' -import { isTextBody, getSize } from './utils' -import { parseMessage, SendMessageType, buildMessageMeta, IFlow, MessageType, IRequest, IResponse } from './message' +import { isTextBody } from './utils' +import { parseMessage, SendMessageType, buildMessageMeta, Flow, MessageType, IResponse } from './message' interface IState { - flows: IFlow[] - flow: IFlow | null + flows: Flow[] + flow: Flow | null flowTab: 'Headers' | 'Preview' | 'Response' } @@ -68,29 +68,26 @@ class App extends React.Component { // console.log('msg:', msg) if (msg.type === MessageType.REQUEST) { - const flow = { id: msg.id, request: msg.content as IRequest, waitIntercept: msg.waitIntercept } + const flow = new Flow(msg) this.flowMgr.add(flow) this.setState({ flows: this.flowMgr.showList() }) } else if (msg.type === MessageType.REQUEST_BODY) { const flow = this.flowMgr.get(msg.id) if (!flow) return - flow.waitIntercept = msg.waitIntercept - flow.request.body = msg.content as ArrayBuffer + flow.addRequestBody(msg) this.setState({ flows: this.state.flows }) } else if (msg.type === MessageType.RESPONSE) { const flow = this.flowMgr.get(msg.id) if (!flow) return - flow.waitIntercept = msg.waitIntercept - flow.response = msg.content as IResponse + flow.addResponse(msg) this.setState({ flows: this.state.flows }) } else if (msg.type === MessageType.RESPONSE_BODY) { const flow = this.flowMgr.get(msg.id) if (!flow || !flow.response) return - flow.waitIntercept = msg.waitIntercept - flow.response.body = msg.content as ArrayBuffer + flow.addResponseBody(msg) this.setState({ flows: this.state.flows }) } } @@ -257,32 +254,24 @@ class App extends React.Component { { flows.map(f => { - const url = f.request.url - const u = new URL(url) - let host = u.host - if (host.length > 35) host = host.slice(0, 35) + '...' - let path = u.pathname + u.search - if (path.length > 65) path = path.slice(0, 65) + '...' - - const request = f.request - const response: IResponse = (f.response || {}) as any + const fp = f.preview() const classNames = [] - if (this.state.flow && this.state.flow.id === f.id) classNames.push('tr-selected') - if (f.waitIntercept) classNames.push('tr-wait-intercept') + if (this.state.flow && this.state.flow.id === fp.id) classNames.push('tr-selected') + if (fp.waitIntercept) classNames.push('tr-wait-intercept') return ( - { this.setState({ flow: f }) }} > - {f.no} - {host} - {path} - {request.method} - {response.statusCode || '(pending)'} - {getSize(response)} + {fp.no} + {fp.host} + {fp.path} + {fp.method} + {fp.statusCode} + {fp.size} ) }) diff --git a/addon/web/client/src/components/EditFlow.tsx b/addon/web/client/src/components/EditFlow.tsx index 144ae58..6e76378 100644 --- a/addon/web/client/src/components/EditFlow.tsx +++ b/addon/web/client/src/components/EditFlow.tsx @@ -4,7 +4,7 @@ import Modal from 'react-bootstrap/Modal' import Form from 'react-bootstrap/Form' import Alert from 'react-bootstrap/Alert' -import { SendMessageType, buildMessageEdit, IRequest, IResponse, Header, IFlow } from '../message' +import { SendMessageType, buildMessageEdit, IRequest, IResponse, Header, Flow } from '../message' import { isTextBody } from '../utils' @@ -96,7 +96,7 @@ const parseResponse = (content: string): IResponse | undefined => { interface IProps { - flow: IFlow + flow: Flow onChangeRequest: (request: IRequest) => void onChangeResponse: (response: IResponse) => void onMessage: (msg: ArrayBufferLike) => void diff --git a/addon/web/client/src/flow.ts b/addon/web/client/src/flow.ts index 8a938ba..fa63d31 100644 --- a/addon/web/client/src/flow.ts +++ b/addon/web/client/src/flow.ts @@ -1,8 +1,8 @@ -import { IFlow } from './message' +import { Flow } from './message' export class FlowManager { - private items: IFlow[] - private _map: Map + private items: Flow[] + private _map: Map private filterText: string private filterTimer: number | null private num: number @@ -25,7 +25,7 @@ export class FlowManager { }) } - add(item: IFlow) { + add(item: Flow) { item.no = ++this.num this.items.push(item) this._map.set(item.id, item) diff --git a/addon/web/client/src/message.ts b/addon/web/client/src/message.ts index 5fe6a55..bb175ea 100644 --- a/addon/web/client/src/message.ts +++ b/addon/web/client/src/message.ts @@ -1,3 +1,5 @@ +import { getSize } from './utils' + export enum MessageType { REQUEST = 1, REQUEST_BODY = 2, @@ -28,12 +30,84 @@ export interface IMessage { content?: ArrayBuffer | IRequest | IResponse } -export interface IFlow { - id: string - no?: number - waitIntercept: boolean - request: IRequest - response?: IResponse +export class Flow { + public no: number + public id: string + public waitIntercept: boolean + public request: IRequest + public response: IResponse | null = null + + private url: URL + private _host = '' + private _path = '' + private _size = '' + + public static curNo = 0 + + constructor(msg: IMessage) { + this.no = ++Flow.curNo + this.id = msg.id + this.waitIntercept = msg.waitIntercept + this.request = msg.content as IRequest + + this.url = new URL(this.request.url) + } + + public addRequestBody(msg: IMessage): Flow { + this.waitIntercept = msg.waitIntercept + this.request.body = msg.content as ArrayBuffer + return this + } + + public addResponse(msg: IMessage): Flow { + this.waitIntercept = msg.waitIntercept + this.response = msg.content as IResponse + return this + } + + public addResponseBody(msg: IMessage): Flow { + this.waitIntercept = msg.waitIntercept + if (this.response) this.response.body = msg.content as ArrayBuffer + return this + } + + public preview() { + return { + no: this.no, + id: this.id, + waitIntercept: this.waitIntercept, + host: this.host, + path: this.path, + method: this.request.method, + statusCode: this.response ? this.response.statusCode : '(pending)', + size: this.size, + } + } + + private get host(): string { + if (this._host) return this._host + let _host = this.url.host + if (_host.length > 35) _host = _host.slice(0, 35) + '...' + this._host = _host + return _host + } + + private get path(): string { + if (this._path) return this._path + let _path = this.url.pathname + this.url.search + if (_path.length > 65) _path = _path.slice(0, 65) + '...' + this._path = _path + return _path + } + + private get size(): string { + if (!this.response) return '0' + if (!this.response.header) return '0' + if (this._size) return this._size + + this._size = getSize(this.response) + return this._size + } } const allMessageBytes = [ @@ -92,7 +166,7 @@ export enum SendMessageType { // type: 11/12/13/14 // messageEdit // version 1 byte + type 1 byte + id 36 byte + header len 4 byte + header content bytes + body len 4 byte + [body content bytes] -export const buildMessageEdit = (messageType: SendMessageType, flow: IFlow) => { +export const buildMessageEdit = (messageType: SendMessageType, flow: Flow) => { if (messageType === SendMessageType.DROP_REQUEST || messageType === SendMessageType.DROP_RESPONSE) { const view = new Uint8Array(38) view[0] = 1