example.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>server-date Example</title>
  </head>

  <body>
    <h1>server-date Example</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";

      let lastSample = {};

      const synchronize = async () => {
        lastSample = await getServerDate();
      };

      // Display two real time clocks, the server's and the client's, and show
      // the difference between them in milliseconds.
      const updateClocks = () => {
        const { offset, uncertainty } = lastSample;
        const clientDate = new Date();
        const serverDate = new Date(clientDate.getTime() + offset);

        document.getElementById("client").innerHTML = String(clientDate);
        document.getElementById("server").innerHTML = String(serverDate);

        document.getElementById(
          "difference"
        ).innerHTML = `${offset} &plusmn; ${uncertainty} ms`;
      };

      synchronize();
      setInterval(synchronize, 10 * 60 * 1000);

      // Display the clocks and update them every second.
      updateClocks();
      setInterval(updateClocks, 1000);
    </script>
  </body>
</html>