Apq
/
speedtest
mirror of https://github.com/librespeed/speedtest.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>
<html>
    <head>
        <title>Speedtest</title>
        <style type="text/css">
            html,body{
                margin:0;
                padding:0;
                border:none;
                text-align:center;
            }
            #startBtn{
                display:inline-block;
                border:0.15em solid #000000;
                padding:0.3em 0.5em;
                margin:0.6em;
                color:#000000;
                text-decoration:none;
            }
			#ip{
				margin:0.8em 0;
				font-size:1.2em;
			}
			
			#chart1Area, #chart2Area{
				width:100%;
				max-width:30em;
				height:10em;
				display:block;
				margin:0 auto;
			}
        </style>
		<script src="example5_data/Chart.bundle.min.js"></script>
        <script type="text/javascript">
            var w=null;
            function runTest(){
				var chart1ctx=document.getElementById("chart1Area").getContext('2d'),
					chart2ctx=document.getElementById("chart2Area").getContext('2d');
				var dlDataset={
							label: "Download",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(75,192,192,0.4)",
							borderColor: "rgba(75,192,192,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(75,192,192,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(75,192,192,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [0],
							spanGaps: false,
						},
					ulDataset={
							label: "Upload",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(192,192,75,0.4)",
							borderColor: "rgba(192,192,75,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(192,192,75,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(192,192,75,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [0],
							spanGaps: false,
						},
					pingDataset={
							label: "Ping",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(75,220,75,0.4)",
							borderColor: "rgba(75,220,75,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(75,220,75,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(75,220,75,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [],
							spanGaps: false,
						},
					jitterDataset={
							label: "Jitter",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(220,75,75,0.4)",
							borderColor: "rgba(220,75,75,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(220,75,75,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(220,75,75,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [],
							spanGaps: false,
						}
						;
				var chart1Options={
					type: 'line',
					data: {
						datasets: [dlDataset,ulDataset]
					},
					options:{
						responsive: true,
						legend: {
							position: 'bottom',
						},
						scales: {
							xAxes: [{
									display: true,
									scaleLabel: {
										display: false,
									},
									ticks:{
										beginAtZero: true
									}
								}],
							yAxes: [{
									display: true,
									scaleLabel: "Speed",
									ticks:{
										beginAtZero: true
									}
								}]
						}
					}
				},
				chart2Options={
					type: 'line',
					data: {
						datasets: [pingDataset,jitterDataset]
					},
					options:{
						responsive: true,
						legend: {
							position: 'bottom',
						},
						scales: {
							xAxes: [{
									display: true,
									scaleLabel: {
										display: false,
									},
									ticks:{
										beginAtZero: true
									}
								}],
							yAxes: [{
									display: true,
									scaleLabel: "Latency",
									ticks:{
										beginAtZero: true
									}
								}]
						}
					}
				};		
				
				var chart1 = new Chart(chart1ctx, chart1Options),
					chart2 = new Chart(chart2ctx, chart2Options);
			
                document.getElementById("startBtn").style.display="none";
                document.getElementById("testArea").style.display="";
                document.getElementById("abortBtn").style.display="";
                w=new Worker("speedtest_worker.min.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]);
                    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";
                    }
					if(status==1&&Number(data[1])>0){
						chart1.data.datasets[0].data.push(Number(data[1]));
						chart1.data.labels[chart1.data.datasets[0].data.length-1]="";
						chart1.update();
					}
					if(status==3&&Number(data[2])>0){
						chart1.data.datasets[1].data.push(Number(data[2]));
						chart1.data.labels[chart1.data.datasets[1].data.length-1]="";
						chart1.update();
					}
					if(status==2&&Number(data[3])>0){
						chart2.data.datasets[0].data.push(Number(data[3]));
						chart2.data.datasets[1].data.push(Number(data[5]));
						chart2.data.labels[chart2.data.datasets[0].data.length-1]="";
						chart2.data.labels[chart2.data.datasets[1].data.length-1]="";
						chart2.update();
					}
					ip.innerHTML=data[4];
                }.bind(this);
                w.postMessage("start");
            }
            function abortTest(){
                if(w)w.postMessage("abort");
            }
        </script>
    </head>
    <body>
        <h1>Speedtest</h1>
        <div id="testArea" style="display:none">
			<div id="ip">Please wait...</div>
			<h2>Speed</h2>
			<canvas id="chart1Area"></canvas>
			<h2>Latency</h2>
			<canvas id="chart2Area"></canvas>
            <br/>
            <a href="javascript:abortTest()" id="abortBtn">Abort</a>
        </div>
        <a href="javascript:runTest()" id="startBtn">Run speedtest</a>
		<br/><br/>
		Charts by <a href="http://www.chartjs.org/">Chart.js</a>
    </body>
</html>