index.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <title>Latency Test | Red5 Pro</title>
       <link rel="stylesheet" href="normalize.min.css">
       <style>
         body {
           background-color: white;
           color: black;
         }
       </style>
     </head>
   
     <body>
       <h1>Red5 Pro Latency Test</h1>
   
       <table border="1">
         <!--
         <tr>
           <td>client</td>
           <td id="client"></td>
         </tr>
        -->
         <tr>
           <td>server</td>
           <td id="server"></td>
         </tr>
         <tr>
           <td>difference</td>
           <td id="difference" style="text-align: right"></td>
         </tr>
       </table>
   
       <script type="module">
         import { getServerDate } from "./serverDate.js.php";
   
         let lastSample = {};
   
         const synchronize = async () => {
           lastSample = await getServerDate();
           console.log("Synchronized lastSample: " + JSON.stringify(lastSample));           
         };
   
         // Display two real time clocks, the server's and the client's, and show
         // the difference between them in milliseconds.
         function updateClocks() {
           var { offset, uncertainty } = lastSample;
           var clientDate = new Date();
           var serverDate = new Date(clientDate.getTime() + offset);

           try {
             var clientDateISO = clientDate.toISOString();
             var serverDateISO = serverDate.toISOString();
             // console.log("clientDate: " + clientDate.toISOString() + " serverDate: " + serverDate.toISOString());
           } catch (error) {
             var clientDateISO = "";
             var serverDateISO = "";
           }

           // document.getElementById("client").innerHTML = clientDateISO;
           document.getElementById("server").innerHTML = serverDateISO;
   
           document.getElementById(
             "difference"
           ).innerHTML = `${offset} &plusmn; ${uncertainty} ms`;
         };
   
         synchronize();
         setInterval(synchronize, 10 * 60 * 1000);
   
         // Display the clocks and update them 100 times a second.
         updateClocks();
         setInterval(updateClocks, 10);
       </script>
     </body>
   </html>
   