example-basic.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8" />
  4. <head>
  5. <title>HTML5 Speedtest</title>
  6. </head>
  7. <body>
  8. <h1>HTML5 Speedtest</h1>
  9. <h4>IP Address</h4>
  10. <p id="ip"></p>
  11. <h4>Download</h4>
  12. <p id="download"></p>
  13. <h4>Upload</h4>
  14. <p id="upload"></p>
  15. <h4>Latency</h4>
  16. <p id="ping"></p>
  17. <script type="text/javascript">
  18. var w = new Worker('speedtest_worker.min.js') // create new worker
  19. setInterval(function () { w.postMessage('status') }, 100) // ask for status every 100ms
  20. w.onmessage = function (event) { // when status is received, split the string and put the values in the appropriate fields
  21. var data = JSON.parse(event.data); //fetch speedtest worker output
  22. document.getElementById('download').textContent = data.dlStatus + ' Mbit/s'
  23. document.getElementById('upload').textContent = data.ulStatus + ' Mbit/s'
  24. document.getElementById('ping').textContent = data.pingStatus + ' ms, ' + data.jitterStatus + ' ms jitter'
  25. document.getElementById('ip').textContent = data.clientIp
  26. }
  27. w.postMessage('start') // start the speedtest (default params. keep garbage.php and empty.dat in the same directory as the js file)
  28. </script>
  29. <a href="https://github.com/adolfintel/speedtest">Source code</a>
  30. </body>
  31. </html>