web addon optimization

proxy/addon.go

@@ -81,7 +81,7 @@ func (addon *LogAddon) ServerConnected(connCtx *ConnContext) {
 }
 
 func (addon *LogAddon) ServerDisconnected(connCtx *ConnContext) {
-	log.Infof("%v server disconnect %v (%v->%v)\n", connCtx.ClientConn.Conn.RemoteAddr(), connCtx.ServerConn.Address, connCtx.ServerConn.Conn.LocalAddr(), connCtx.ServerConn.Conn.RemoteAddr())
+	log.Infof("%v server disconnect %v (%v->%v) - %v\n", connCtx.ClientConn.Conn.RemoteAddr(), connCtx.ServerConn.Address, connCtx.ServerConn.Conn.LocalAddr(), connCtx.ServerConn.Conn.RemoteAddr(), connCtx.FlowCount)
 }
 
 func (addon *LogAddon) Requestheaders(f *Flow) {

proxy/connection.go

@@ -80,6 +80,7 @@ var connContextKey = new(struct{})
 type ConnContext struct {
 	ClientConn *ClientConn `json:"clientConn"`
 	ServerConn *ServerConn `json:"serverConn"`
+	FlowCount  uint32      `json:"-"`
 
 	proxy              *Proxy
 	pipeConn           *pipeConn

proxy/proxy.go

@@ -165,6 +165,8 @@ func (proxy *Proxy) ServeHTTP(res http.ResponseWriter, req *http.Request) {
 	f.ConnContext = req.Context().Value(connContextKey).(*ConnContext)
 	defer f.finish()
 
+	f.ConnContext.FlowCount = f.ConnContext.FlowCount + 1
+
 	// trigger addon event Requestheaders
 	for _, addon := range proxy.Addons {
 		addon.Requestheaders(f)
@@ -283,6 +285,16 @@ func (proxy *Proxy) handleConnect(res http.ResponseWriter, req *http.Request) {
 		"host": req.Host,
 	})
 
+	f := newFlow()
+	f.Request = newRequest(req)
+	f.ConnContext = req.Context().Value(connContextKey).(*ConnContext)
+	defer f.finish()
+
+	// trigger addon event Requestheaders
+	for _, addon := range proxy.Addons {
+		addon.Requestheaders(f)
+	}
+
 	var conn net.Conn
 	var err error
 	if proxy.shouldIntercept == nil || proxy.shouldIntercept(req.Host) {
@@ -316,6 +328,22 @@ func (proxy *Proxy) handleConnect(res http.ResponseWriter, req *http.Request) {
 		return
 	}
 
+	f.Response = &Response{
+		StatusCode: 200,
+		Header:     make(http.Header),
+	}
+
+	// trigger addon event Responseheaders
+	for _, addon := range proxy.Addons {
+		addon.Responseheaders(f)
+	}
+	defer func(f *Flow) {
+		// trigger addon event Response
+		for _, addon := range proxy.Addons {
+			addon.Response(f)
+		}
+	}(f)
+
 	transfer(log, conn, cconn)
 }
 

web/client/src/App.css

@@ -56,6 +56,10 @@
   color: white;
 }
 
+.main-table-wrap tbody tr.tr-wait-warn {
+  background-color: rgb(255, 243, 205);
+}
+
 .flow-detail {
   position: fixed;
   top: 0;

web/client/src/App.tsx

@@ -110,10 +110,17 @@ class App extends React.Component<IProps, IState> {
       // console.log('msg:', msg)
 
       if (msg.type === MessageType.CONN) {
-        this.connMgr.add(msg.id, msg.content as IConnection)
+        const conn = msg.content as IConnection
+        conn.opening = true
+        this.connMgr.add(msg.id, conn)
         this.setState({ flows: this.state.flows })
       }
       else if (msg.type === MessageType.CONN_CLOSE) {
+        const conn = this.connMgr.get(msg.id)
+        if (!conn) return
+        conn.opening = false
+        conn.flowCount = msg.content as number
+        this.setState({ flows: this.state.flows })
         this.connMgr.delete(msg.id)
       }
       else if (msg.type === MessageType.REQUEST) {
@@ -197,7 +204,7 @@ class App extends React.Component<IProps, IState> {
               <tr>
                 <th style={{ width: '50px' }}>No</th>
                 <th style={{ width: '80px' }}>Method</th>
-                <th style={{ width: '200px' }}>Host</th>
+                <th style={{ width: '250px' }}>Host</th>
                 <th style={{ width: 'auto' }}>Path</th>
                 <th style={{ width: '150px' }}>Type</th>
                 <th style={{ width: '80px' }}>Status</th>

web/client/src/components/FlowPreview.tsx

@@ -20,8 +20,13 @@ class FlowPreview extends React.Component<IProps> {
     const fp = this.props.flow
 
     const classNames = []
-    if (this.props.isSelected) classNames.push('tr-selected')
+    if (this.props.isSelected) {
-    if (fp.waitIntercept) classNames.push('tr-wait-intercept')
+      classNames.push('tr-selected')
+    } else if (fp.waitIntercept) {
+      classNames.push('tr-wait-intercept')
+    } else if (fp.warn) {
+      classNames.push('tr-wait-warn')
+    }
 
     return (
       <tr className={classNames.length ? classNames.join(' ') : undefined}

web/client/src/components/ViewFlow.tsx

@@ -92,23 +92,44 @@ class ViewFlow extends React.Component<Iprops, IState> {
     if (!flow) return null
 
     const conn = flow.getConn()
-    if (!conn) return null
 
     return (
       <div>
         <div className="header-block">
-          <p>Server Connection</p>
+          <p>Flow Info</p>
           <div className="header-block-content">
-            <p>Address: {conn.serverConn.address}</p>
+            <p>Id: {flow.id}</p>
-            <p>Resolved Address: {conn.serverConn.peername}</p>
-          </div>
-        </div>
-        <div className="header-block">
-          <p>Client Connection</p>
-          <div className="header-block-content">
-            <p>Address: {conn.clientConn.address}</p>
           </div>
         </div>
+        {
+          !conn ? null :
+            <>
+              <div className="header-block">
+                <p>Server Connection</p>
+                <div className="header-block-content">
+                  <p>Address: {conn.serverConn.address}</p>
+                  <p>Resolved Address: {conn.serverConn.peername}</p>
+                </div>
+              </div>
+              <div className="header-block">
+                <p>Client Connection</p>
+                <div className="header-block-content">
+                  <p>Address: {conn.clientConn.address}</p>
+                </div>
+              </div>
+              <div className="header-block">
+                <p>Connection Info</p>
+                <div className="header-block-content">
+                  <p>Id: {conn.clientConn.id}</p>
+                  <p>Opening: {conn.opening ? 'true' : 'false'}</p>
+                  {
+                    conn.flowCount == null ? null :
+                      <p>Flow Count: {conn.flowCount}</p>
+                  }
+                </div>
+              </div>
+            </>
+        }
       </div>
     )
   }

web/client/src/lib/connection.ts

@@ -9,6 +9,8 @@ export interface IConnection {
     address: string
     peername: string
   }
+  opening: boolean
+  flowCount?: number
 }
 
 export class ConnectionManager {

web/client/src/lib/flow.ts

@@ -40,6 +40,7 @@ export interface IFlowPreview {
   size: string
   costTime: string
   contentType: string
+  warn: boolean
 }
 
 export class Flow {
@@ -87,7 +88,9 @@ export class Flow {
     this.connId = flowRequestMsg.connId
     this.request = flowRequestMsg.request
 
-    this.url = new URL(this.request.url)
+    let rawUrl = this.request.url
+    if (rawUrl.startsWith('//')) rawUrl = 'http:' + rawUrl
+    this.url = new URL(rawUrl)
     this.path = this.url.pathname + this.url.search
 
     this._isTextRequest = null
@@ -151,6 +154,7 @@ export class Flow {
       size: this.size,
       costTime: this.costTime,
       contentType: this.contentType,
+      warn: this.getConn()?.flowCount === 0,
     }
   }
 

web/client/src/lib/message.ts

@@ -25,7 +25,7 @@ export interface IMessage {
   type: MessageType
   id: string
   waitIntercept: boolean
-  content?: ArrayBuffer | IFlowRequest | IResponse | IConnection
+  content?: ArrayBuffer | IFlowRequest | IResponse | IConnection | number
 }
 
 // type: 0/1/2/3/4
@@ -51,6 +51,11 @@ export const parseMessage = (data: ArrayBuffer): IMessage | null => {
     resp.content = data.slice(39)
     return resp
   }
+  if (type === MessageType.CONN_CLOSE) {
+    const view = new DataView(data.slice(39))
+    resp.content = view.getUint32(0, false)
+    return resp
+  }
 
   const contentStr = new TextDecoder().decode(data.slice(39))
   let content: any

web/message.go

@@ -117,9 +117,12 @@ func newMessageFlow(mType messageType, f *proxy.Flow) *messageFlow {
 }
 
 func newMessageConnClose(connCtx *proxy.ConnContext) *messageFlow {
+	var buf bytes.Buffer
+	binary.Write(&buf, binary.BigEndian, connCtx.FlowCount)
 	return &messageFlow{
-		mType: messageTypeConnClose,
+		mType:   messageTypeConnClose,
-		id:    connCtx.Id(),
+		id:      connCtx.Id(),
+		content: buf.Bytes(),
 	}
 }