鏈接：https://pan.baidu.com/s/1ncrmpJ_9Y-r9hyWcsH10RA 

提取碼：tlq9

《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至 2018 年 6 月

30 日，我國(guó)手機(jī)網(wǎng)民規(guī)模達(dá) 7．88 億，網(wǎng)民中使用手機(jī)上網(wǎng)人群的 占比達(dá)到 98．3％［1］。在網(wǎng)民數(shù)量不斷增加的同時(shí)，各種新的移動(dòng)應(yīng) 用層出不窮，為了快速了解移動(dòng)應(yīng)用的業(yè)務(wù)流量特征和交互過(guò)程

等關(guān)鍵信息，設(shè)計(jì)了該基于 Vue 框架的移動(dòng)應(yīng)用可視化平臺(tái)。 1 開(kāi)發(fā)框架與數(shù)據(jù)庫(kù) 該平臺(tái)選擇的是前后端分離的開(kāi)發(fā)模式， 前端負(fù)責(zé)界面的 開(kāi)發(fā)，后端負(fù)責(zé)數(shù)據(jù)的處理。 這種前后端分離的開(kāi)發(fā)模式主要有 三個(gè)優(yōu)點(diǎn)：一是前端 JS 可以做很大部分的數(shù)據(jù)處理工作，減小 了服務(wù)器的壓力；二是后臺(tái)出現(xiàn)的錯(cuò)誤不會(huì)反映到前臺(tái)，不會(huì)對(duì) 前端的開(kāi)發(fā)產(chǎn)生干擾，是一種較為友好的處理方式；三是后臺(tái)很 難去探知前端頁(yè)面的分布情況，而這又是 JS 的強(qiáng)項(xiàng)，但 JS 無(wú) 法獨(dú)立和服務(wù)器進(jìn)行通訊的。 所以單單用后臺(tái)去控制整體頁(yè)面， 又或者只靠 JS 完成效果，都會(huì)難度加大，前后臺(tái)各盡其職可以

最大程度地減少開(kāi)發(fā)難度。

1．1 前端框架

Vue．js 是一個(gè)輕量級(jí)的框架，具有性能高、靈活性強(qiáng)的特點(diǎn)［2］。 數(shù)據(jù)的綁定在前端領(lǐng)域是個(gè)大問(wèn)題。 現(xiàn)在我們更專(zhuān)注于數(shù)據(jù)，而 不是像使用 jQuery 一樣對(duì) DOM 進(jìn)行微觀的管理。 Vue 通過(guò)雙 向響應(yīng)數(shù)據(jù)綁定系統(tǒng)巧妙地處理了這個(gè)問(wèn)題。 為實(shí)現(xiàn)這種響應(yīng)

性，Vue 為狀態(tài)中的每個(gè)變量添加了許多 getter 和 setter，以便 它可以跟蹤更改并自動(dòng)更新 DOM。 Vue 提供了 Vue Router 和

Vuex，這是為 Vue 量身定制的很好的庫(kù)。 Vue 允許將一個(gè)網(wǎng)頁(yè) 分割成可復(fù)用的組件， 每個(gè) 組 件 都 包 含 屬 于 自 己 的 HTML、

CSS、JavaScript 以用來(lái)渲染到網(wǎng)頁(yè)中相應(yīng)的地方，從而提高了代 碼的復(fù)用性，有利于進(jìn)行后續(xù)界面的擴(kuò)展。 此外，Vue 的文檔也很 容易閱讀，學(xué)習(xí)成本較低，所以選擇了這款比較流行的前端框架。

1．2 后端框架

Express 是一個(gè)簡(jiǎn)潔靈活的基于 Node．js 的 Web 應(yīng)用的 輕量級(jí)的框架，該框架提供了強(qiáng)大的特性供我們創(chuàng)建各種 Web

應(yīng)用比如：模板解析、靜態(tài)文件服務(wù)、中間件、路由控制等等［3］。 還可以使用插件或整合其他模塊來(lái)幫助我們創(chuàng)建各種 Web 和 移動(dòng)設(shè)備應(yīng)用，并且支持 Ejs、jade 等多種模板，可以快速地搭 建一個(gè)具有完整功能的網(wǎng)站。 在快速發(fā)展的互聯(lián)網(wǎng)時(shí)代，個(gè)性化

服務(wù)成為一種趨勢(shì)，Node．js 高并發(fā)的優(yōu)勢(shì)比較明顯，個(gè)性化服務(wù)

使得內(nèi)容數(shù)據(jù)不能在前端服務(wù)器做緩存，因?yàn)槊總€(gè)人看到的都不

一樣。 這時(shí)候前端服務(wù)器就必須處理每一個(gè)請(qǐng)求，但后端數(shù)據(jù)計(jì) 算則可以并行地做，讓用戶(hù)感覺(jué)不到明顯延時(shí)。 該框架主要有三 個(gè)核心特性：①可以通過(guò)設(shè)置中間件來(lái)響應(yīng) HTTP 請(qǐng)求；②可以

通過(guò)設(shè)置不同的路由來(lái)執(zhí)行 HTTP 的請(qǐng)求動(dòng)作； ③向模板傳遞

參數(shù)就可以實(shí)現(xiàn)對(duì) HTML 頁(yè)面的渲染。

1．3 數(shù)據(jù)庫(kù) 此項(xiàng)目的數(shù)據(jù)庫(kù)選用的是非關(guān)系型數(shù)據(jù)庫(kù) Mongo DB。 通 過(guò)簡(jiǎn)單數(shù)據(jù)模型、 元數(shù)據(jù)和應(yīng)用數(shù)據(jù)分離、 弱一致性等技術(shù)，

NoSQL 能夠非常好地應(yīng)對(duì)大數(shù)據(jù)的挑戰(zhàn)［4］。Mongo DB 是一個(gè)

基于分布式文件存儲(chǔ)的數(shù)據(jù)庫(kù)，支持松散的數(shù)據(jù)結(jié)構(gòu)，可以存儲(chǔ)

比較復(fù)雜的數(shù)據(jù)類(lèi)型。 Mongo 的最大特點(diǎn)是支持非常強(qiáng)大的查 詢(xún)語(yǔ)言，還能夠?qū)?shù)據(jù)建立索引［5］。 2 研究?jī)?nèi)容與方法

2．1 研究?jī)?nèi)容

該解析平臺(tái)分為三層：第一層是信息的提取，將抓包工具獲 取的 Pcap 包以 flow 為單位，提取出用于分析的信息，主要包括

①basic information，是 flow 的基本信息，包含協(xié)議信息、流量

特征、時(shí)間信息等；②Protocol information，是該 flow 的協(xié)議信 息。例如對(duì)于 DNS 來(lái)說(shuō)，包含了 DNS 請(qǐng)求的域名、返回結(jié)果、響 應(yīng)時(shí)間等；③Application information，是該 flow 的應(yīng)用層信息。 例如請(qǐng)求的是視頻文件， 那么需要解析視頻文件的分辨率、碼 率、幀率等信息；第二層是特征抽象，根據(jù) flow information 提取

基于 Vue．js 的移動(dòng)應(yīng)用可視化平臺(tái)的研究*

Research on Mobile Application Visualization Platform Based on Vue．js

馮傳波 彭章友 張鐘浩 （上海大學(xué)通信與信息工程學(xué)院，上海 200444）

摘要：移動(dòng)應(yīng)用是互聯(lián)網(wǎng)產(chǎn)業(yè)的重要組成之一，隨著智能終端和移動(dòng)互聯(lián)網(wǎng)的普及，我國(guó)的人口紅利為移動(dòng)應(yīng)用創(chuàng)造了

良好的發(fā)展環(huán)境，移動(dòng)應(yīng)用產(chǎn)業(yè)也隨之呈現(xiàn)爆發(fā)式增長(zhǎng)。成千上萬(wàn)的移動(dòng)應(yīng)用程序涌現(xiàn)并深入到社會(huì)生活的各個(gè)領(lǐng)域，改善

了我們的生活。 移動(dòng)應(yīng)用具有業(yè)務(wù)變化快、業(yè)務(wù)本地化、業(yè)務(wù)流加密、無(wú)法分析業(yè)務(wù)交互流程等特征。 為此設(shè)計(jì)了一個(gè)基于

Vue 框架的移動(dòng)應(yīng)用分析平臺(tái)，利用該平臺(tái)可以實(shí)現(xiàn)快速分析未知業(yè)務(wù)、熱門(mén)應(yīng)用等，掌握第一手資源。

關(guān)鍵詞：Vue，移動(dòng)應(yīng)用，流量特征，可視化平臺(tái)

Abstract:Mobile applications have the characteristics of fast business change,business localization,business flow encryp?tion,and inability to analyze business interaction processes in this paper．To this end,a Vue framework－based mobile applica?tion analysis platform is designed,which can be used to quickly analyze unknown services,popular applications,etc．,and mas?ter first－h(huán)and resources．

Keywords:Vue,mobile application,traffic characteristics,visualization platform

*國(guó)家自然科學(xué)基金青年科學(xué)基金項(xiàng)目（6170129） 圖 1 解析平臺(tái)系統(tǒng)框架圖

102 基于 Vue．js 的移動(dòng)應(yīng)用可視化平臺(tái)的研究

《工業(yè)控制計(jì)算機(jī)》2019 年第 32 卷第 5 期 出描述該業(yè)務(wù)的特征， 如業(yè)務(wù)是否加密、 業(yè)務(wù)采用的流媒體協(xié) 議、視頻文件封裝格式和編碼方式、主機(jī) DNS、主機(jī)信息等；第 三層是呈現(xiàn)， 將 flow information 和 feature 以可視化方法在網(wǎng)

站上進(jìn)行顯示。 該平臺(tái)的可視化系統(tǒng)框架如圖 1。 首先是數(shù)據(jù)的采集，選取的是 AppTracer，這是一款運(yùn)行在

安卓客戶(hù)端的抓包工具，相對(duì)于其他抓包工具，使用 AppTracer

用戶(hù)不需要 root 手機(jī)就可以直接使用。 該工具以本地代理的方

式截獲客戶(hù)端與服務(wù)器之間的 IP 數(shù)據(jù)報(bào)文，可以在移動(dòng)端直接 解析 IP 數(shù)據(jù)包， 默認(rèn)情況下會(huì)引入其他應(yīng)用后臺(tái)產(chǎn)生的雜包， 會(huì)影響對(duì)某個(gè)移動(dòng)應(yīng)用的分析。 也可以通過(guò)過(guò)濾器選擇指定應(yīng) 用，監(jiān)聽(tīng)指定移動(dòng)應(yīng)用的流量。 接下來(lái)是數(shù)據(jù)的存儲(chǔ)， 可以將監(jiān)聽(tīng)產(chǎn)生的 Pcap 文件上傳 至阿里云、亞馬遜云、局域網(wǎng)。 用戶(hù)也可以用自己的阿里云賬號(hào)、 亞馬遜云賬號(hào)進(jìn)行 Pcap 文件管理，我們可以通過(guò)對(duì) AppTracer 的 Setting 模塊的參數(shù)進(jìn)行配置來(lái)實(shí)現(xiàn)。 現(xiàn)在我們?cè)O(shè)置的是

上傳至自己的服務(wù)器。 最后是對(duì)收集的數(shù)據(jù)進(jìn)行處理，對(duì) Pcap

文本進(jìn)行解析，提取出關(guān)鍵信息，進(jìn)行統(tǒng)計(jì)分析，以便用來(lái)進(jìn)行

數(shù)據(jù)的可視化展示。

2．2 數(shù)據(jù)的可視化 首先我們需要安裝 node（npm

包管理器是集成在 node 中）， 然后

安裝淘寶鏡像的相關(guān)依賴(lài)。 接下來(lái) 安裝 vue－cli 腳手架構(gòu)建工具，輸入

命令 npm install －g vue－cli，安裝 完成即可。 最后選定項(xiàng)目的存放路 徑， 通過(guò)指令 vue init webpack ＋

項(xiàng)目名稱(chēng)，開(kāi)始新建項(xiàng)目，并配置好

相對(duì)應(yīng)的參數(shù)。 圖 2 是本文建立的 項(xiàng)目的前端目錄結(jié)構(gòu)。

build 文 件 夾 里 邊 是 項(xiàng) 目 構(gòu) 建 （webpack）的 相 關(guān) 代 碼 ，項(xiàng) 目 最 后

發(fā)布的時(shí)候也是發(fā)布在這里。 config

文件夾主要是配置項(xiàng)目的目錄，包 括端口號(hào)等。 node＿modules 文件夾 里面主要是使 npm 加載的項(xiàng)目依賴(lài)模塊。 src 是我們的開(kāi)發(fā)目 錄，主要包括 assets、components、views、App．vue、和 main．js。 其中 assets 主要放置一些圖標(biāo)，components 是項(xiàng)目的組件文 件，將用到比較多的部分抽取出來(lái)設(shè)置為組件，方便在其他界面 中調(diào)用。 views 是最終要呈現(xiàn)的界面。 static 主要是靜態(tài)資源目 錄，如圖片、字體等。 index．html 是項(xiàng)目首頁(yè)入口文件，packge．

json 主要是項(xiàng)目的配置文件。 頁(yè)面部分分成了三部分，最上面是該平臺(tái)的 logo，左邊是導(dǎo) 航欄，右邊是內(nèi)容展示區(qū)。 內(nèi)容展示區(qū)又分為搜索添加類(lèi)別區(qū)、面 包屑導(dǎo)航區(qū)和圖形展示區(qū)。 界面部分是通過(guò)類(lèi)別選擇具體的應(yīng)用

名稱(chēng)，然后根據(jù)選中的應(yīng)用名稱(chēng)選擇一個(gè)抓包名，最后通過(guò)查詢(xún) 按鈕進(jìn)行可視化顯示。 通過(guò) vue 框架中的 v－for 指令循環(huán)遍歷數(shù) 組，將類(lèi)別、應(yīng)用名、抓包名進(jìn)行顯示。 我們?cè)谠擁?xiàng)目中主要分析 了比較常用的移動(dòng)端應(yīng)用，主要包括視頻、游戲、社交、瀏覽器、手 機(jī)助手、購(gòu)物等。 具體的每一類(lèi)又包括幾個(gè)不同的應(yīng)用名稱(chēng)，比如 視頻類(lèi)主要分析了騰訊視頻、愛(ài)奇藝、優(yōu)酷、搜狐視頻、youtube。 為了直觀展示單次業(yè)務(wù)的流量和服務(wù)器的地理化分布，引

用了 ECharts 插件， 它是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視 化庫(kù)，能夠流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，可以為我們提供直 觀、交互豐富、可以高度定制化的數(shù)據(jù)可視化圖表。 本文使用了

折線(xiàn)圖來(lái)展示單次業(yè)務(wù)的流量情況，橫坐標(biāo)為時(shí)間，單位是秒。 縱坐標(biāo)通過(guò)進(jìn)行換算折算為數(shù)字信號(hào)的傳輸速率， 也就是每秒 傳輸多少個(gè)千位的信息。 圖例設(shè)置為我們從后臺(tái)獲取的一組 IP

地址（設(shè)置一次傳遞五個(gè)），并用不用顏色的圖例圖標(biāo)來(lái)進(jìn)行區(qū) 分。 圖 3 是選取的優(yōu)酷視頻的一個(gè)抓包文件處理的結(jié)果。 圖 3 IO Graph of Servers

從圖 3 我們可以直觀地看出在該段時(shí)間內(nèi)， 本次業(yè)務(wù)的流 量訪(fǎng)問(wèn)情況，大致每隔 20s 達(dá)到一個(gè)峰值，這是把這五個(gè)不同的

IP 地址疊加之后的結(jié)果，也可以點(diǎn)擊圖例，選擇其中一個(gè)或者幾

個(gè) IP 地址來(lái)單獨(dú)進(jìn)行分析。 該圖的縱坐標(biāo)高度是自適應(yīng)的，方 便我們查看流量的訪(fǎng)問(wèn)情況。 為了直觀顯示業(yè)務(wù)訪(fǎng)問(wèn)服務(wù)器的地理化分布， 采取了在地 圖上打點(diǎn)的方式，根據(jù)不同的經(jīng)緯度來(lái)定位服務(wù)器所在的城市。 這里一次傳過(guò)來(lái)五個(gè) IP 地址， 如果兩個(gè) IP 地址所在的城市相 同，就將 IP 地址進(jìn)行疊加，具體實(shí)現(xiàn)方法如下：

var obj＝邀妖;

for（var i＝0;i＜mapData[i]．length;i＋＋）邀

if（選obj[mapData[i]．name]）邀

obj[mapData[i]．name＝mapData[i];

妖else邀

obj[mapData[i]．name]．value[2]＝obj[mapData[i]．name．value[2]＋‘,’＋

mapData[i]．value[2];

妖 妖 跟圖 3 同一抓包文件的地理可視化結(jié)果呈現(xiàn)， 當(dāng)鼠標(biāo)懸浮 在紅色點(diǎn)上時(shí)會(huì)把該 IP 地址顯示出來(lái)， 圖中定位出了三個(gè)城 市，分別是上海、杭州、福州，因?yàn)橛袃山M IP 地址對(duì)應(yīng)杭州和福 州這兩個(gè)城市，所以圖上打了三個(gè)點(diǎn)。 這可以用來(lái)研究視頻服務(wù)

器 CDN 部署情況，為優(yōu)化客戶(hù)體驗(yàn)提供方案。 3 結(jié)束語(yǔ)

基于 Vue．js 的移動(dòng)應(yīng)用可視化平臺(tái)可以處理熱門(mén)移動(dòng)應(yīng) 用， 將單次業(yè)務(wù)的流量訪(fǎng)問(wèn)情況和服務(wù)器的位置進(jìn)行直觀的展 示，方便了我們分析熱門(mén)移動(dòng)應(yīng)用業(yè)務(wù)，可以掌握第一手資源。 后續(xù)可以考慮擴(kuò)展該平臺(tái)的功能， 比如增加業(yè)務(wù)所用傳輸協(xié)議

的分析等。

參考文獻(xiàn)

［1］中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心．中國(guó)互聯(lián)網(wǎng)發(fā)展統(tǒng)計(jì)報(bào)告（2018 年）［R］．北 京，2018

［2］朱二華．基于 Vue．js 的 Web 前端應(yīng)用研究［J］．科技與創(chuàng)新，2017

（20）：119－121

［3］程桂花，沈煒，何松林，等．Node．js 中 Express 框架路由機(jī)制的研究

［J］．工業(yè)控制計(jì)算機(jī)，2016，29（8）：101－102

［4］李青．基于 NoSQL 的大數(shù)據(jù)處理的研究［D］．西安：西安電子科技大 學(xué)，2014

［5］張旭．基于 Mongo DB 的氣象數(shù)據(jù)三維可視化系統(tǒng)的研究與設(shè)計(jì)［D］． 上海：同濟(jì)大學(xué)，2013

［收稿日期：2019．1．23］