雲智慧透視寶前端架構那些事兒

當移動互連網與雲端運算出現後，使用者不必再和企業的服務人員打交道，而是通過移動APP來直接擷取服務，這就造成使用者體驗前置。傳統的ITOM產品由於缺少有效移動端和雲端監管手段，難以發現使用者體驗前置帶來的效能瓶頸，雲智慧面向業務的端到端效能管理平台透視寶以業務的視角，對整個使用者體驗交付鏈條的每一個環節進行資料擷取和分析，準確發現和定位影響使用者體驗的任何效能問題。

目前透視寶前端應用程式套件含以下幾個，關係圖如下所示

透視寶通過主站與使用者進行直接互動，為使用者提供網站、移動App、主機、服務等應用的效能資料。使用者認證、資料中心、文檔中心應用都是直接或間接為主站提供服務，本次說明只針對透視寶主站，以下使用的前端均指主站前端服務。

服務布局

透視寶前端涉及到以下幾個服務：

DataSource為後端資料系統，通常情況下的請求流程如下：使用者發出請求後首先訪問到Tengine，Tengine作為反向 Proxy把請求轉寄到Apache，Apache調用PHP首先從Redis擷取資訊，若無資料則從Mysql中補充，如果請求含有主機、服務、應用等資料則會從Elasticsearch中擷取。

前端應用架構

雲智慧透視寶前端使用PHP作為開發語言，使用了Seaslog的日誌擴充，Cwop的使用者管理擴充，Redis擴充，yaf擴充(CwopServer端依賴)，其作用如下：

Seaslog:PHP日誌模組，為開發人員提供線上線下日誌情況的分析材料

Curl:PHP Rest服務基礎，為PHP調用後端Api介面提供支援

Yaf:Cwop的Server為yaf架構開發，依賴PHP的yaf架構

Cwop:Cwop的php用戶端

PHP使用目前流行的Laravel架構進行開發，前端運行流程如下所示：

Laravel提供了多語言，資料庫，緩衝，郵件，依賴包管理等功能，極大提高了透視寶的開發效率，以下是透視寶前端兩個比較重要的功能：

1.UnitTest - Laravel整合並強化了PHP的單元測試功能，結合Google外掛程式，使開發人員可以完成端到端的調試工作;

2.Artisan命令列工具 - 結合Linux的Crontab，完成了郵件發送，SmartAgent外掛程式管理、心跳管理，警示互動等功能，單獨使用時可以執行指令碼完成資料庫的自動化修改;

從PHP處理資料到前端頁面展現我們使用了目前流行的：

3.BootstrapCss架構,使前端頁面美觀自適

4.Seajs為透視寶使用的JS模組選擇載入架構

5.Echarts作為透視寶使用的繪圖工具，其適應性，可操作性都是非常良好的，透視寶所有版面的圖片基本都是Echarts產生的。

資料擷取流程

透視寶資料擷取分為三個來源：

1.使用者安裝SmartAgent，外掛程式採集，通過SendProxy發送的資料。

2.使用者安裝SmartAgent外掛程式後注入JS，或手動注入JS，JS採集的資料。

3.移動端嵌入SDK，採集移動APP資料。

如所示：

資料擷取使用Sendproxy為SmartAgent的調度器，所有SmartAgent的資料都經過Sendproxy進行統一調度發送。

其主要優勢在於：

發送隊列，保證各外掛程式資料發送的穩定性

可以作為代理，部署都可聯外網的主機，可以保證區域網路非連網環境的資料發送

端到端實現原理

端到端是透視寶的重要功能特色，其實現原理簡單地說，把請求流程中所有途經節點都記錄下來，通過code堆棧和服務採集的資料還原請求所遍曆的過程。

是一個請求拓撲，是典型的Nginx Proxy，Apache Server，PHP解析，Mysql DB的架構，請求經過了Nginx->Apache->PHP->Mysql&Api，在各節點上點擊可以查看：

請求當時各服務的運行狀態

請求的代碼堆棧，SQL串連，異常資訊，串連狀態

實現原理如下(預設各節點已經安裝了我們的SmartAgent)：

請求到Nginx時，Nginx在請求中添加唯一id標誌，然後轉寄到Apache,Apache在請求中收到我們的id標誌,則會延用此id,請求交到PHP,同理PHP，Mysql等也會在請求中延用此id標誌。

PHP擷取資料處理完成後請求結束，開始響應過程，PHP在響應資訊中添加相同的id標誌，交還給Apache，Apache返回Nginx時會在響應資訊中延用此id,Nginx把內容發送到瀏覽器靜態頁面時，連同id與我們的JS檔案發送到使用者端，使用者端JS捕獲瀏覽器資料後發送到我們的後端DataSource處理。

透視寶擷取到PHP應用帶有此id的請求資料時，可以查到Nginx,Apache的請求資訊，也可以擷取Mysql,Api的請求資訊，端到端的拓撲圖也就形成了，通過id可心擷取終端使用者的資訊。如果終點的Api也使用了我們的CodeAgent，則會轉化成應用，與前面的PHP一樣繼續向後延伸，否則只顯示請求的Api資訊，擷取不到Code詳情。

在上述過程中，Nginx Agent,Apache Agent,Mysql Agent一直持續發送資料，所以當點擊Nginx時就可以根據請求時間擷取Nginx的即時狀態，為使用者端到端的分析提供強有力的支援。

下面提供一個前後端資料互動的完整點的簡圖，其中DataSource對Mysql的操作是通過透視寶應用的介面實現的

