美文网首页
TP-LINK易展版自定义流量统计

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

作者: Esmool | 来源:发表于2024-07-22 16:06 被阅读0次

    易展版的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查询回来的设备清单都是完整的,因此做一下缓存,避免表格剧烈抖动。当然这个可能造成显示的数据并不一定全都是同一时刻的。不过这个不是很影响,有点误差也没关系。

    相关文章

      网友评论

          本文标题:TP-LINK易展版自定义流量统计

          本文链接:https://www.haomeiwen.com/subject/rgoehjtx.html