test_multiple_instances.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8" />
  4. <head>
  5. <title>LibreSpeed - Multiple Instance Test</title>
  6. <style>
  7. body { font-family: Arial, sans-serif; margin: 20px; }
  8. .test-container {
  9. border: 2px solid #333;
  10. padding: 15px;
  11. margin: 20px 0;
  12. border-radius: 5px;
  13. }
  14. .test-container h2 { margin-top: 0; }
  15. button {
  16. padding: 10px 20px;
  17. font-size: 16px;
  18. cursor: pointer;
  19. margin-right: 10px;
  20. }
  21. .results {
  22. margin-top: 10px;
  23. font-family: monospace;
  24. background: #f0f0f0;
  25. padding: 10px;
  26. border-radius: 3px;
  27. }
  28. .status {
  29. font-weight: bold;
  30. margin: 5px 0;
  31. }
  32. </style>
  33. </head>
  34. <script type="text/javascript" src="speedtest.js"></script>
  35. <body>
  36. <h1>LibreSpeed - Multiple Instance Test</h1>
  37. <p>This page tests running multiple Speedtest instances sequentially and simultaneously.</p>
  38. <div class="test-container">
  39. <h2>Test Instance 1</h2>
  40. <button id="start1">Start Test 1</button>
  41. <button id="abort1">Abort Test 1</button>
  42. <div class="results">
  43. <div class="status">Status: <span id="status1">Not started</span></div>
  44. <div>Download: <span id="download1">-</span> Mbit/s</div>
  45. <div>Upload: <span id="upload1">-</span> Mbit/s</div>
  46. <div>Ping: <span id="ping1">-</span> ms</div>
  47. <div>Jitter: <span id="jitter1">-</span> ms</div>
  48. <div>IP: <span id="ip1">-</span></div>
  49. </div>
  50. </div>
  51. <div class="test-container">
  52. <h2>Test Instance 2</h2>
  53. <button id="start2">Start Test 2</button>
  54. <button id="abort2">Abort Test 2</button>
  55. <div class="results">
  56. <div class="status">Status: <span id="status2">Not started</span></div>
  57. <div>Download: <span id="download2">-</span> Mbit/s</div>
  58. <div>Upload: <span id="upload2">-</span> Mbit/s</div>
  59. <div>Ping: <span id="ping2">-</span> ms</div>
  60. <div>Jitter: <span id="jitter2">-</span> ms</div>
  61. <div>IP: <span id="ip2">-</span></div>
  62. </div>
  63. </div>
  64. <div style="margin-top: 20px;">
  65. <h3>Instructions:</h3>
  66. <ol>
  67. <li>Click "Start Test 1" and wait for it to complete</li>
  68. <li>Then click "Start Test 2" - it should work correctly without strange values</li>
  69. <li>You can also run both tests simultaneously</li>
  70. <li>You can run each test multiple times</li>
  71. </ol>
  72. </div>
  73. <script type="text/javascript">
  74. // Create two independent Speedtest instances
  75. var s1 = new Speedtest();
  76. var s2 = new Speedtest();
  77. // Setup Test Instance 1
  78. s1.onupdate = function (data) {
  79. document.getElementById('status1').textContent = getStatusText(data.testState);
  80. document.getElementById('download1').textContent = data.dlStatus || '-';
  81. document.getElementById('upload1').textContent = data.ulStatus || '-';
  82. document.getElementById('ping1').textContent = data.pingStatus || '-';
  83. document.getElementById('jitter1').textContent = data.jitterStatus || '-';
  84. document.getElementById('ip1').textContent = data.clientIp || '-';
  85. };
  86. s1.onend = function (aborted) {
  87. document.getElementById('status1').textContent = aborted ? 'Aborted' : 'Completed';
  88. console.log('Test 1 ended. Aborted:', aborted);
  89. };
  90. // Setup Test Instance 2
  91. s2.onupdate = function (data) {
  92. document.getElementById('status2').textContent = getStatusText(data.testState);
  93. document.getElementById('download2').textContent = data.dlStatus || '-';
  94. document.getElementById('upload2').textContent = data.ulStatus || '-';
  95. document.getElementById('ping2').textContent = data.pingStatus || '-';
  96. document.getElementById('jitter2').textContent = data.jitterStatus || '-';
  97. document.getElementById('ip2').textContent = data.clientIp || '-';
  98. };
  99. s2.onend = function (aborted) {
  100. document.getElementById('status2').textContent = aborted ? 'Aborted' : 'Completed';
  101. console.log('Test 2 ended. Aborted:', aborted);
  102. };
  103. // Helper function to convert testState to readable text
  104. function getStatusText(state) {
  105. switch(state) {
  106. case -1: return 'Not started';
  107. case 0: return 'Starting...';
  108. case 1: return 'Download test';
  109. case 2: return 'Ping + Jitter test';
  110. case 3: return 'Upload test';
  111. case 4: return 'Completed';
  112. case 5: return 'Aborted';
  113. default: return 'Unknown (' + state + ')';
  114. }
  115. }
  116. // Button handlers
  117. document.getElementById('start1').addEventListener('click', function() {
  118. try {
  119. console.log('Starting Test 1');
  120. s1.start();
  121. } catch(e) {
  122. alert('Error starting Test 1: ' + e);
  123. console.error('Error starting Test 1:', e);
  124. }
  125. });
  126. document.getElementById('abort1').addEventListener('click', function() {
  127. try {
  128. s1.abort();
  129. } catch(e) {
  130. alert('Error aborting Test 1: ' + e);
  131. }
  132. });
  133. document.getElementById('start2').addEventListener('click', function() {
  134. try {
  135. console.log('Starting Test 2');
  136. s2.start();
  137. } catch(e) {
  138. alert('Error starting Test 2: ' + e);
  139. console.error('Error starting Test 2:', e);
  140. }
  141. });
  142. document.getElementById('abort2').addEventListener('click', function() {
  143. try {
  144. s2.abort();
  145. } catch(e) {
  146. alert('Error aborting Test 2: ' + e);
  147. }
  148. });
  149. </script>
  150. <a href="https://github.com/librespeed/speedtest">LibreSpeed Source Code</a>
  151. </body>
  152. </html>