在線測速網站的實現~

在線測速系統

 

清明兩天，一氣呵成將以前未完成的在線測速系統完成了~差很少結束掉全部的任務，能夠專心複習考（比）研（賽）咯~

 

 

這個在線測速系統總共有三套測速引擎，分別是「快速測試」，「Ajax測試」，「壓力測試」，不一樣引擎有不一樣的做用，下面就介紹下~

 

快速測試：

快速測試採用的是圖片加載測速的方式。因爲採用了阿里雲的CDN加速，基本上測出的結果就是本機的網速了~

其中，點擊按鈕就是在一個進度條形的div中插入一張圖片~加載完成後會觸發onload函數，以時間計時的目的，通過簡單的計算即可以得出網速啦~

PS：這個圖片能夠通過設計的，這樣就能夠模擬出進度條的樣子，不會在加載的時候讓人感受瀏覽器像死了同樣( ⊙o⊙ )。

 

Ajax測試：

這個實現蠻複雜，不過感受尚未快速測試好用。大概原理是：點擊按鈕後，頁面會向服務器發送測速請求。服務器收到請求後會發送相應大小的數據。經過檢測接受數據的時間來測速。

其實，這個發送的數據就是一大串「a」，嘿嘿~由於要不斷向客戶端發送當前測速的進度，這無形中就佔用了一些網速……所以，測速結果會偏低（在網速慢的機器上會比較明顯）。不過ajax測試比較自由，利用一些jquery框架能夠實現一些意想不到的功能，好比後面的壓力測試~

 

壓力測試：

這個纔是壓軸~哈哈~壓力測試能夠僅在使用瀏覽器的狀況下得到當前網絡的穩定性。是否是感受很是牛~

大概原理就是，利用ajax測速，讓服務器向客戶端發送大量數據。由於tcp協議有一個窗口的字段，會限制服務器的發送速度與客戶端的接受速度大概一致，以防止數據的丟失。所以，這時在服務器啓動一個線程每隔1秒記錄這一秒的速度，並利用ajax發送給客戶端，就能夠在客戶端繪製出網絡狀況的折線圖。

因爲，要啓動線程，還要在結束後釋放線程，這使得程序一下複雜很多（後悔又懶得作架構了……）。在不斷地刪刪改改中，程序差很少算是正常了。

這裏有兩點要注意的是，因爲測速部分的代碼是寫在服務器上，這使得測得的數據要比實際大上10KB左右，通過屢次測試，這10KB貌似是省不了了……

另外一點是，ajax得到網絡狀況的數據後，要設置返回值類型。這裏我用的是flot插件，返回值就要設置成json型（以前不知道，一直是text行，明明服務端將數據格式好，客戶端就是不認……弄了一夜才弄出來……）。

 

無論怎樣，通過兩天的奮鬥，網站算是基本完成了，收工睡覺~~