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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5 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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
    <script type="text/javascript">
        var w = null
        function runTest() {
            var chart1ctx = document.getElementById('chart1Area').getContext('2d')
            var 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
            }
            var 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
            }
            var 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
            }
            var 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
                            }
                        }]
                    }
                }
            }
            var 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)
            var 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') }, 100)
            w.onmessage = function (event) {
                var data = JSON.parse(event.data)
                var status = data.testState
                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.dlStatus) > 0) {
                    chart1.data.datasets[0].data[~~(20*Number(data.dlProgress))]=(Number(data.dlStatus))
                    chart1.data.labels[chart1.data.datasets[0].data.length - 1] = ''
                    chart1.update()
                }
                if (status === 3 && Number(data.ulStatus) > 0) {
                    chart1.data.datasets[1].data[~~(20*Number(data.ulProgress))]=(Number(data.ulStatus))
                    chart1.data.labels[chart1.data.datasets[1].data.length - 1] = ''
                    chart1.update()
                }
                if (status === 2 && Number(data.pingStatus) > 0) {
                    chart2.data.datasets[0].data.push(Number(data.pingStatus))
                    chart2.data.datasets[1].data.push(Number(data.jitterStatus))
                    chart2.data.labels[chart2.data.datasets[0].data.length - 1] = ''
                    chart2.data.labels[chart2.data.datasets[1].data.length - 1] = ''
                    chart2.update()
                }
                ip.textContent = data.clientIp
            }
            w.postMessage('start')
        }
        function abortTest() {
            if (w) w.postMessage('abort')
        }
    </script>
</head>

<body>
    <h1>HTML Speedtest - Chart.js example</h1>
    <div id="testArea" style="display:none">
        <p id="ip">Please wait...</p>

        <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><br/><br/><a href="https://github.com/adolfintel/speedtest">Source code</a>
</body>
</html>