Implementation of Local Packet Capture in Youzan Mobile Assistant Using VPNService, tun2socks, and Socket.IO

The article describes the design and implementation of a local packet‑capture feature for the Youzan Mobile Assistant app. It explains why the built‑in gateway switching function is important for development, testing, and product verification, and why integrating a local capture capability enhances debugging and online issue analysis.

Background: Traditional packet capture on mobile devices relies on connecting the phone to a PC and configuring a proxy (e.g., Charles, Fiddler, Wireshark). This approach is cumbersome because it requires manual proxy settings, installation of root certificates, and a constant PC dependency.

To overcome these limitations, the app adds a local capture module that monitors all network requests routed through the assistant’s gateway to the ZanProxy server. The solution must satisfy three conditions:

Use a socket‑based protocol to push network requests from the gateway to the client.

Keep the assistant app alive in the background when other apps are used.

Display captured request data (header, request, response) within the assistant UI.

Core Technology: The gateway relies on Android’s VpnService and iOS’s NetworkExtension to capture traffic, then forwards IP packets through tun2socks , which converts them to a SOCKS5 proxy stream directed to the ZanProxy server.

tun2socks: Provides transparent proxying by encapsulating TCP traffic in SOCKS5 without requiring complex iptables rules.

Socket.IO: Used for real‑time, bidirectional communication between the server and the assistant app. It supports multiple transport mechanisms (WebSocket, long‑polling, etc.) and offers features such as automatic reconnection, heartbeat detection, and namespace multiplexing.

The following Swift code shows how the Socket.IO client is initialized and configured:

public init(socketURL: URL, config: SocketIOClientConfiguration = []) {
    self._config = config
    self.socketURL = socketURL
    super.init()
    setConfigs(_config)
}

Event handling for connection, data reception, errors, and disconnection is demonstrated below:

socket.on(clientEvent: .connect) { data, ack in
    print("connect success")
    YZVPNSettingsNetwork.bindDevice(deviceId: device ?? "")
}

socket.on("rows") { data, ack in
    guard let cur = data[0] as? String else { return }
    print(cur)
}

socket.on(clientEvent: .disconnect) { data, ack in
    print("socket disconnect")
}

socket.on(clientEvent: .error) { data, ack in
    print("socket error")
}

socket.on(clientEvent: .pong) { data, ack in
    print("socket pong" + data.description)
}

A simple HttpSession class (conforming to HandyJSON ) is used to aggregate request, response, and identifier data received from the server:

class HttpSession: HandyJSON {
    var originRequest: String?
    var requestData: String?
    var response: String?
    var id: String?
    required init() {}
}

To keep the assistant app running in the background on iOS, the article recommends using background audio playback combined with beginBackgroundTaskWithExpirationHandler to periodically renew a background task, preventing the system from terminating the app.

Summary of the workflow:

Configure VPN (Android VpnService / iOS NetworkExtension ) to intercept traffic.

Use tun2socks to wrap TCP packets in SOCKS5 and forward them to ZanProxy.

Maintain a persistent Socket.IO connection to push captured HTTP/HTTPS data to the client in real time.

Listen for Socket.IO events, map data to HttpSession objects, and display them in the UI.

The article concludes with references to Socket.IO documentation and suggests further reading on related topics.