Przeglądaj źródła

changed handling of settings

- changed worker: allowing direct message to set options, also timeouts and pingcounts
- examples changed with new set message
Martin 9 lat temu
rodzic
commit
2facf7f096
3 zmienionych plików z 269 dodań i 254 usunięć
  1. 69 66
      example2.html
  2. 98 94
      example3.html
  3. 102 94
      speedtest_worker.js

+ 69 - 66
example2.html

@@ -1,70 +1,73 @@
 <!DOCTYPE html>
 <html>
-<head>
-<title>Speedtest</title>
-<style type="text/css">
-html,body{
-	margin:0;
-	padding:0;
-	border:none;
-	text-align:center;
-}
-div.test{
-	display:inline-block;
-	width:30vw;
-	text-align:center;
-}
-div.testName,div.meterUnit{
-	font-size:3vw;
-}
-div.meter{
-	font-size:6vw;
-	line-height:1.5em;
-	height:1.5em !important;
-}
-.flash{
-	animation:flash 0.6s linear infinite;
-}
-@keyframes flash{
-	0%{opacity:0.6;}
-	50%{opacity:1;}
-}
+    <head>
+        <title>Speedtest</title>
+        <style type="text/css">
+            html,body{
+                margin:0;
+                padding:0;
+                border:none;
+                text-align:center;
+            }
+            div.test{
+                display:inline-block;
+                width:30vw;
+                text-align:center;
+            }
+            div.testName,div.meterUnit{
+                font-size:3vw;
+            }
+            div.meter{
+                font-size:6vw;
+                line-height:1.5em;
+                height:1.5em !important;
+            }
+            .flash{
+                animation:flash 0.6s linear infinite;
+            }
+            @keyframes flash{
+                0%{opacity:0.6;}
+                50%{opacity:1;}
+            }
 
-</style>
-</head>
-<body>
-<h1>Speedtest</h1>
-<div class="test">
-	<div class="testName">Download</div>
-	<div class="meter">&nbsp;<span id="download"></span>&nbsp;</div>
-	<div class="meterUnit">Mbit/s</div>
-</div>
-<div class="test">
-	<div class="testName">Upload</div>
-	<div class="meter">&nbsp;<span id="upload"></span>&nbsp;</div>
-	<div class="meterUnit">Mbit/s</div>
-</div>
-<div class="test">
-	<div class="testName">Latency</div>
-	<div class="meter">&nbsp;<span id="ping"></span>&nbsp;</div>
-	<div class="meterUnit">ms</div>
-</div>
-<script type="text/javascript">
-	var w=new Worker("speedtest_worker.js");
-	var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
-	w.onmessage=function(event){
-		var data=event.data.split(";");
-		var status=Number(data[0]);
-		var dl=document.getElementById("download"),ul=document.getElementById("upload"),ping=document.getElementById("ping");
-		dl.className=status==1?"flash":"";ul.className=status==2?"flash":"";ping.className=status==3?"flash":"";
-		if(status>=4){
-			clearInterval(interval);
-		}
-		dl.innerHTML=data[1];
-		ul.innerHTML=data[2];
-		ping.innerHTML=data[3];
-	}.bind(this);
-	w.postMessage("start garbage.php empty.dat empty.dat");
-</script>
-</body>
+        </style>
+    </head>
+    <body>
+        <h1>Speedtest</h1>
+        <div class="test">
+            <div class="testName">Download</div>
+            <div class="meter">&nbsp;<span id="download"></span>&nbsp;</div>
+            <div class="meterUnit">Mbit/s</div>
+        </div>
+        <div class="test">
+            <div class="testName">Upload</div>
+            <div class="meter">&nbsp;<span id="upload"></span>&nbsp;</div>
+            <div class="meterUnit">Mbit/s</div>
+        </div>
+        <div class="test">
+            <div class="testName">Latency</div>
+            <div class="meter">&nbsp;<span id="ping"></span>&nbsp;</div>
+            <div class="meterUnit">ms</div>
+        </div>
+        <script type="text/javascript">
+            var w=new Worker("speedtest_worker.js");
+            var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
+            w.onmessage=function(event){
+                var data=event.data.split(";");
+                var status=Number(data[0]);
+                var dl=document.getElementById("download"),ul=document.getElementById("upload"),ping=document.getElementById("ping");
+                dl.className=status==1?"flash":"";ul.className=status==2?"flash":"";ping.className=status==3?"flash":"";
+                if(status>=4){
+                    clearInterval(interval);
+                }
+                dl.innerHTML=data[1];
+                ul.innerHTML=data[2];
+                ping.innerHTML=data[3];
+            }.bind(this);
+            w.postMessage("set url_dl garbage.php");
+            w.postMessage("set url_ul empty.dat");
+            w.postMessage("set url_ping empty.dat");
+            w.postMessage("start");
+        </script>
+    </body>
 </html>

+ 98 - 94
example3.html

@@ -1,97 +1,101 @@
 <!DOCTYPE html>
 <html>
-<head>
-<title>Speedtest</title>
-<style type="text/css">
-html,body{
-	margin:0;
-	padding:0;
-	border:none;
-	text-align:center;
-}
-div.test{
-	display:inline-block;
-	width:30vw;
-	text-align:center;
-}
-div.testName,div.meterUnit{
-	font-size:3vw;
-}
-div.meter{
-	font-size:6vw;
-	line-height:1.5em;
-	height:1.5em !important;
-}
-.flash{
-	animation:flash 0.6s linear infinite;
-}
-@keyframes flash{
-	0%{opacity:0.6;}
-	50%{opacity:1;}
-}
-a{
-	display:inline-block;
-	border:0.15em solid #000000;
-	padding:0.3em 0.5em;
-	margin:0.6em;
-	color:#000000;
-	text-decoration:none;
-}
-</style>
-<script type="text/javascript">
-var w=null;
-function runTest(){
-	document.getElementById("startBtn").style.display="none";
-	document.getElementById("testArea").style.display="";
-	document.getElementById("abortBtn").style.display="";
-	w=new Worker("speedtest_worker.js");
-	var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
-	w.onmessage=function(event){
-		var data=event.data.split(";");
-		var status=Number(data[0]);
-		var dl=document.getElementById("download"),ul=document.getElementById("upload"),ping=document.getElementById("ping");
-		dl.className=status==1?"flash":"";ul.className=status==2?"flash":"";ping.className=status==3?"flash":"";
-		if(status>=4){
-			clearInterval(interval);
-			document.getElementById("abortBtn").style.display="none";
-			document.getElementById("startBtn").style.display="";
-			w=null;
-		}
-		if(status==5){
-			document.getElementById("testArea").style.display="none";
-		}
-		dl.innerHTML=data[1];
-		ul.innerHTML=data[2];
-		ping.innerHTML=data[3];
-	}.bind(this);
-	w.postMessage("start garbage.php empty.dat empty.dat");
-}
-function abortTest(){
-	if(w)w.postMessage("abort");
-}
-</script>
-</head>
-<body>
-<h1>Speedtest</h1>
-<div id="testArea" style="display:none">
-<div class="test">
-	<div class="testName">Download</div>
-	<div class="meter">&nbsp;<span id="download"></span>&nbsp;</div>
-	<div class="meterUnit">Mbit/s</div>
-</div>
-<div class="test">
-	<div class="testName">Upload</div>
-	<div class="meter">&nbsp;<span id="upload"></span>&nbsp;</div>
-	<div class="meterUnit">Mbit/s</div>
-</div>
-<div class="test">
-	<div class="testName">Latency</div>
-	<div class="meter">&nbsp;<span id="ping"></span>&nbsp;</div>
-	<div class="meterUnit">ms</div>
-</div>
-<br/>
-<a href="javascript:abortTest()" id="abortBtn">Abort</a>
-</div>
-<a href="javascript:runTest()" id="startBtn">Run speedtest</a>
-</body>
+    <head>
+        <title>Speedtest</title>
+        <style type="text/css">
+            html,body{
+                margin:0;
+                padding:0;
+                border:none;
+                text-align:center;
+            }
+            div.test{
+                display:inline-block;
+                width:30vw;
+                text-align:center;
+            }
+            div.testName,div.meterUnit{
+                font-size:3vw;
+            }
+            div.meter{
+                font-size:6vw;
+                line-height:1.5em;
+                height:1.5em !important;
+            }
+            .flash{
+                animation:flash 0.6s linear infinite;
+            }
+            @keyframes flash{
+                0%{opacity:0.6;}
+                50%{opacity:1;}
+            }
+            a{
+                display:inline-block;
+                border:0.15em solid #000000;
+                padding:0.3em 0.5em;
+                margin:0.6em;
+                color:#000000;
+                text-decoration:none;
+            }
+        </style>
+        <script type="text/javascript">
+            var w=null;
+            function runTest(){
+                document.getElementById("startBtn").style.display="none";
+                document.getElementById("testArea").style.display="";
+                document.getElementById("abortBtn").style.display="";
+                w=new Worker("speedtest_worker.js");
+                var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
+                w.onmessage=function(event){
+                    var data=event.data.split(";");
+                    var status=Number(data[0]);
+                    var dl=document.getElementById("download"),ul=document.getElementById("upload"),ping=document.getElementById("ping");
+                    // dl.className=status==1?"flash":"";ul.className=status==2?"flash":"";ping.className=status==3?"flash":"";
+
+                    if(status>=4){
+                        clearInterval(interval);
+                        document.getElementById("abortBtn").style.display="none";
+                        document.getElementById("startBtn").style.display="";
+                        w=null;
+                    }
+                    if(status==5){
+                        document.getElementById("testArea").style.display="none";
+                    }
+                    dl.innerHTML=data[1];
+                    ul.innerHTML=data[2];
+                    ping.innerHTML=data[3];
+                }.bind(this);
+                w.postMessage("set time_dl 10");    // Timeout download
+                w.postMessage("set time_ul 20");    // Timeout upload
+                w.postMessage("set count_ping 30"); // Count of pings
+                w.postMessage("start");
+            }
+            function abortTest(){
+                if(w)w.postMessage("abort");
+            }
+        </script>
+    </head>
+    <body>
+        <h1>Speedtest</h1>
+        <div id="testArea" style="display:none">
+            <div class="test">
+                <div class="testName">Download</div>
+                <div class="meter">&nbsp;<span id="download"></span>&nbsp;</div>
+                <div class="meterUnit">Mbit/s</div>
+            </div>
+            <div class="test">
+                <div class="testName">Upload</div>
+                <div class="meter">&nbsp;<span id="upload"></span>&nbsp;</div>
+                <div class="meterUnit">Mbit/s</div>
+            </div>
+            <div class="test">
+                <div class="testName">Latency</div>
+                <div class="meter">&nbsp;<span id="ping"></span>&nbsp;</div>
+                <div class="meterUnit">ms</div>
+            </div>
+            <br/>
+            <a href="javascript:abortTest()" id="abortBtn">Abort</a>
+        </div>
+        <a href="javascript:runTest()" id="startBtn">Run speedtest</a>
+    </body>
 </html>

+ 102 - 94
speedtest_worker.js

@@ -1,104 +1,112 @@
 var testStatus=0,dlStatus="",ulStatus="",pingStatus="";
+var settings={time_ul : 15, time_dl:15, count_ping: 15, url_dl:"garbage.php",url_ul:"empty.dat",url_ping:"empty.dat"};
 var xhr=null;
 this.addEventListener('message', function(e){
-	var params=e.data.split(" ");
-	if(params[0]=="status"){
-		postMessage(testStatus+";"+dlStatus+";"+ulStatus+";"+pingStatus);
-	}
-	if(params[0]=="start"){
-		if(testStatus==0){
-			testStatus=1;
-			var dlUrl=params[1]?params[1]:"garbage.php", ulUrl=params[2]?params[2]:"empty.dat", pingUrl=params[3]?params[3]:"empty.dat";
-			dlTest(dlUrl,function(){testStatus=2;ulTest(ulUrl,function(){testStatus=3;pingTest(pingUrl,function(){testStatus=4;});});});
-		}
-	}
-	if(params[0]=="abort"){
-		try{if(xhr)xhr.abort();}catch(e){}
-		testStatus=5;dlStatus="";ulStatus="";pingStatus="";
-	}
+    var params=e.data.split(" ");
+    if(params[0]=="set")
+    {
+        if(params[1] && settings.hasOwnProperty(params[1]) && params[2])
+        {
+            settings[params[1]]=params[2];
+        }
+    }
+    if(params[0]=="status"){
+        postMessage(testStatus+";"+dlStatus+";"+ulStatus+";"+pingStatus);
+    }
+    if(params[0]=="start"){
+        if(testStatus==0){
+            testStatus=1;
+            dlTest(function(){testStatus=2;ulTest(function(){testStatus=3;pingTest(function(){testStatus=4;});});});
+        }
+    }
+    if(params[0]=="abort"){
+        console.warn("Aborting test...")
+        try{if(xhr)xhr.abort();}catch(e){}
+        testStatus=5;dlStatus="";ulStatus="";pingStatus="";
+    }
 });
 
-function dlTest(serverURL,done){
-	var firstTick=true,startT=new Date().getTime(), prevT=new Date().getTime(),prevLoaded=0,speed=0.0;
-	xhr=new XMLHttpRequest();
-	xhr.onprogress=function(event){
-		var instspd=(event.loaded-prevLoaded)/((new Date().getTime()-prevT)/1000.0);
-		if(isNaN(instspd)||!isFinite(instspd)) return;
-		if(firstTick){
-			speed=instspd;
-			firstTick=false;
-		}else{
-			speed=speed*0.9+instspd*0.1;
-		}
-		prevLoaded=event.loaded;
-		prevT=new Date().getTime();
-		dlStatus=((speed*8)/1048576.0).toFixed(2);
-		if(((prevT-startT)/1000.0)>15){try{xhr.abort();}catch(e){} xhr=null; done();}
-	}.bind(this);
-	xhr.onload=function(){
-		dlStatus=((speed*8)/1048576.0).toFixed(2);
-		xhr=null;
-		done();
-	}.bind(this);
-	xhr.onerror=function(){
-		dlStatus="Fail";
-		xhr=null;
-		done();
-	}.bind(this);
-	xhr.open("GET", serverURL+"?random="+Math.random(),true);
-	xhr.send();
+function dlTest(done){
+    var firstTick=true,startT=new Date().getTime(), prevT=new Date().getTime(),prevLoaded=0,speed=0.0;
+    xhr=new XMLHttpRequest();
+    xhr.onprogress=function(event){
+        var instspd=(event.loaded-prevLoaded)/((new Date().getTime()-prevT)/1000.0);
+        if(isNaN(instspd)||!isFinite(instspd)) return;
+        if(firstTick){
+            speed=instspd;
+            firstTick=false;
+        }else{
+            speed=speed*0.9+instspd*0.1;
+        }
+        prevLoaded=event.loaded;
+        prevT=new Date().getTime();
+        dlStatus=((speed*8)/1048576.0).toFixed(2);
+        if(((prevT-startT)/1000.0)>settings.time_dl){;try{xhr.abort();}catch(e){} xhr=null; done();}
+    }.bind(this);
+    xhr.onload=function(){
+        dlStatus=((speed*8)/1048576.0).toFixed(2);
+        xhr=null;
+        done();
+    }.bind(this);
+    xhr.onerror=function(){
+        dlStatus="Fail";
+        xhr=null;
+        done();
+    }.bind(this);
+    xhr.open("GET", settings.url_dl+"?r="+Math.random(),true);
+    xhr.send();
 }
 
-function ulTest(serverURL,done){
-	var firstTick=true,startT=new Date().getTime(), prevT=new Date().getTime(),prevLoaded=0,speed=0.0;
-	xhr=new XMLHttpRequest();
-	xhr.upload.onprogress=function(event){
-		var instspd=(event.loaded-prevLoaded)/((new Date().getTime()-prevT)/1000.0);
-		if(isNaN(instspd)||!isFinite(instspd)) return;
-		if(firstTick){
-			firstTick=false;
-		}else{
-			speed=speed*0.7+instspd*0.3;
-		}
-		prevLoaded=event.loaded;
-		prevT=new Date().getTime();
-		ulStatus=((speed*8)/1048576.0).toFixed(2);
-		if(((prevT-startT)/1000.0)>15){try{xhr.abort();}catch(e){} xhr=null; done();}
-	}.bind(this);
-	xhr.onload=function(){
-		ulStatus=((speed*8)/1048576.0).toFixed(2);
-		done();
-	}.bind(this);
-	xhr.onerror=function(){
-		ulStatus="Fail";
-		done();
-	}.bind(this);
-	xhr.open("POST", serverURL+"?random="+Math.random(),true);
-	xhr.send(new ArrayBuffer(10485760));
+function ulTest(done){
+    var firstTick=true,startT=new Date().getTime(), prevT=new Date().getTime(),prevLoaded=0,speed=0.0;
+    xhr=new XMLHttpRequest();
+    xhr.upload.onprogress=function(event){
+        var instspd=(event.loaded-prevLoaded)/((new Date().getTime()-prevT)/1000.0);
+        if(isNaN(instspd)||!isFinite(instspd)) return;
+        if(firstTick){
+            firstTick=false;
+        }else{
+            speed=speed*0.7+instspd*0.3;
+        }
+        prevLoaded=event.loaded;
+        prevT=new Date().getTime();
+        ulStatus=((speed*8)/1048576.0).toFixed(2);
+        if(((prevT-startT)/1000.0)>settings.time_ul){try{xhr.abort();}catch(e){} xhr=null; done();}
+    }.bind(this);
+    xhr.onload=function(){
+        ulStatus=((speed*8)/1048576.0).toFixed(2);
+        done();
+    }.bind(this);
+    xhr.onerror=function(){
+        ulStatus="Fail";
+        done();
+    }.bind(this);
+    xhr.open("POST", settings.url_ul+"?r="+Math.random(),true);
+    xhr.send(new ArrayBuffer(10485760));
 }
 
-function pingTest(pingUrl,done){
-	var prevT=null,ping=0.0,i=0;
-	var doPing=function(){
-		prevT=new Date().getTime();
-		xhr=new XMLHttpRequest();
-		xhr.onload=function(){
-			if(i==0){
-				prevT=new Date().getTime();
-			}else{
-				var instspd=new Date().getTime()-prevT;
-				if(i==1) ping=instspd; else ping=ping*0.9+instspd*0.1;
-			}
-			pingStatus=ping.toFixed(2);
-			i++;
-			if(i<50) doPing(); else done();
-		}.bind(this);
-		xhr.onerror=function(){
-			pingStatus="Fail";
-			done();
-		}.bind(this);
-		xhr.open("GET", pingUrl+"?random="+Math.random(),true);
-		xhr.send();
-	}.bind(this);
-	doPing();
+function pingTest(done){
+    var prevT=null,ping=0.0,i=0;
+    var doPing=function(){
+        prevT=new Date().getTime();
+        xhr=new XMLHttpRequest();
+        xhr.onload=function(){
+            if(i==0){
+                prevT=new Date().getTime();
+            }else{
+                var instspd=new Date().getTime()-prevT;
+                if(i==1) ping=instspd; else ping=ping*0.9+instspd*0.1;
+            }
+            pingStatus=ping.toFixed(2);
+            i++;
+            if(i<settings.count_ping) doPing(); else done();
+        }.bind(this);
+        xhr.onerror=function(){
+            pingStatus="Fail";
+            done();
+        }.bind(this);
+        xhr.open("GET", settings.url_ping+"?r="+Math.random(),true);
+        xhr.send();
+    }.bind(this);
+    doPing();
 }