TP-LINK易展版自定义流量统计

易展版的UI设计有点自己给自己加戏，把原本传统的表格式流量统计界面改成了卡片式，反倒让人很难去搞清楚网络里面谁的流量最大、谁的流量异常这种问题。实在忍受不了了，然后自己手动做了下调整，以方便排查故障。

易展版的设备流量统计画面

这个画面说实在的真的是难用，每个设备所在位置不固定，想一目了然看到谁大谁小很困难。
经过稍加改造，在开发者工具的命令行上，重新用表格形式显示了各个设备的流量，方便多了。

命令行上的设备流量统计

基本思路

登录了易展版路由器的管理界面后，F12调出开发工具仔细观察了一下，发现它用的jQuery完成的XHR通讯。每次请求的地址都是ds，应答回来的数据都是json。具体内容每次会有差异，应该源自不同的请求格式。其中包含了设备流量信息的字段位于hosts_info.online_host中，以

{ 0: { ’host_info_xx' : 主机信息对象 }, 1: { ’host_info_xx' : 主机信息对象 }, ... }

形式的JSON Object组成，其中主机信息对象上存储了各个主机的ip, mac, hostname, 上下行速率. 结构搞得稍微有点绕, 处理的时候稍微要整理一下.
然后接下来的思路就简单了，监听全局的AJAX的onComplete事件，检索应答消息中的responseJSON，看有没有主机信息，有就拿来整理输出即可。
中间稍微做了一些小优化，比如缓存主机清单、根据mac映射具体使用者，都比较简单，看代码即可。

代码及使用方法

登录了易展版管理web后，F12调出开发者工具，切换到 console 选项卡，直接粘贴以下代码回车即可。

$(document).on('ajaxComplete', function (evt, xhr, settings) {
    function descDown(x, y) {
        return y.down_speed - x.down_speed
    }

    function speedFormatter(v) {
        let x = v * 1.0
        if (x <= 0) return toFixedLength('0  B/s', 9)
        if (x <= 1024) return toFixedLength(x.toFixed(0) + '  B/s', 9)
        if (x <= 1024*1024) return toFixedLength((x/1024).toFixed(0) + ' KB/s', 9)
        return toFixedLength((x / 1024 / 1024).toFixed(0) + ' MB/s', 9)
    }

    function toFixedLength(x, len, tail = false) {
        while (x.length < len)
            x = !!tail ? x + ' ' : ' ' + x
        return x
    }

    function findName(mac) {
        // 这里填写 MAC - 使用者 的映射关系, 如果这里没有,
        // 将会展示机器自己上报的信息或手动在路由器上做的MAC绑定信息
        let names = {
            'mac地址': '使用者',
        }
        return names[mac]
    }

    function restoreHosts(hosts) {
        let known = Object.assign({}, window.known_hosts || {})
        for (let host of hosts) {
            let mac = host.mac
            known[mac] = host
        }
        window.known_hosts = known
        let result = []
        for (let mac of Object.keys(known)) {
            let host = known[mac]
            host.hostname = findName(mac) || host.hostname
            result.push(host)
        }
        return result
    }

    let json = xhr.responseJSON
    if (!json.hosts_info) return
    if (!json.hosts_info.online_host) return

    if (!!window.flow_debug)
        debugger

    if (!window.flow_watch)
        return

    let items = json.hosts_info.online_host
    let hosts = []
    for (let item of items) {
        let host = item[Object.keys(item)[0]]
        hosts.push(host)
    }

    hosts = restoreHosts(hosts)

    hosts = hosts.sort(descDown)
    let results = []
    for (let host of hosts) {
        let row = [
            `Down: ${speedFormatter(host.down_speed)}`,
            `Up: ${speedFormatter(host.up_speed)}`,
            `MAC: ${host.mac}`,
            `IP: ${toFixedLength(host.ip, 14, 'tail')}`,
            `HostName: ${host.hostname}`
        ].join(', ')
        results.push(row)
    }
    let result = results.join('\r\n')
    console.clear()
    console.info(result)
})

window.flow_watch = true

在命令行输入 window.flow_watch = false 可以暂停刷新。
如果想自行调整代码，可以在命令行输入 window.flow_debug = true 打开调试。
目前的排序是下行降序，需要的话可以自行修改，或者在这个基础上增加命令行调控功能。
此外，特别说明一下restoreHosts()函数的作用：因为不是每次ds查询回来的设备清单都是完整的，因此做一下缓存，避免表格剧烈抖动。当然这个可能造成显示的数据并不一定全都是同一时刻的。不过这个不是很影响，有点误差也没关系。