在线测速网站的实现~

在线测速系统

 

清明两天，一气呵成将以前未完成的在线测速系统完成了~差很少结束掉全部的任务，能够专心复习考（比）研（赛）咯~

 

 

这个在线测速系统总共有三套测速引擎，分别是“快速测试”，“Ajax测试”，“压力测试”，不一样引擎有不一样的做用，下面就介绍下~

 

快速测试：

快速测试采用的是图片加载测速的方式。因为采用了阿里云的CDN加速，基本上测出的结果就是本机的网速了~

其中，点击按钮就是在一个进度条形的div中插入一张图片~加载完成后会触发onload函数，以时间计时的目的，通过简单的计算即可以得出网速啦~

PS：这个图片能够通过设计的，这样就能够模拟出进度条的样子，不会在加载的时候让人感受浏览器像死了同样( ⊙o⊙ )。

 

Ajax测试：

这个实现蛮复杂，不过感受尚未快速测试好用。大概原理是：点击按钮后，页面会向服务器发送测速请求。服务器收到请求后会发送相应大小的数据。经过检测接受数据的时间来测速。

其实，这个发送的数据就是一大串“a”，嘿嘿~由于要不断向客户端发送当前测速的进度，这无形中就占用了一些网速……所以，测速结果会偏低（在网速慢的机器上会比较明显）。不过ajax测试比较自由，利用一些jquery框架能够实现一些意想不到的功能，好比后面的压力测试~

 

压力测试：

这个才是压轴~哈哈~压力测试能够仅在使用浏览器的状况下得到当前网络的稳定性。是否是感受很是牛~

大概原理就是，利用ajax测速，让服务器向客户端发送大量数据。由于tcp协议有一个窗口的字段，会限制服务器的发送速度与客户端的接受速度大概一致，以防止数据的丢失。所以，这时在服务器启动一个线程每隔1秒记录这一秒的速度，并利用ajax发送给客户端，就能够在客户端绘制出网络状况的折线图。

因为，要启动线程，还要在结束后释放线程，这使得程序一下复杂很多（后悔又懒得作架构了……）。在不断地删删改改中，程序差很少算是正常了。

这里有两点要注意的是，因为测速部分的代码是写在服务器上，这使得测得的数据要比实际大上10KB左右，通过屡次测试，这10KB貌似是省不了了……

另外一点是，ajax得到网络状况的数据后，要设置返回值类型。这里我用的是flot插件，返回值就要设置成json型（以前不知道，一直是text行，明明服务端将数据格式好，客户端就是不认……弄了一夜才弄出来……）。

 

无论怎样，通过两天的奋斗，网站算是基本完成了，收工睡觉~~