timer.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Socket.io Timer</title>
    <script
      src="https://cdn.socket.io/4.6.0/socket.io.min.js"
      integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+"
      crossorigin="anonymous"></script>
    <script>
      var socket = io("ws://15.184.79.6:4000");

      var myTimerId = "match1";

      socket.on("connect", function () {
        console.log('connected');
	      socket.emit('set up', myTimerId);
      });

      var sendStartSignal = function () {
        if (socket.connected && myTimerId !== null) {
          socket.emit("start timer", myTimerId);
        }
      };

      var sendStopSignal = function () {
        if (socket.connected && myTimerId !== null) {
          socket.emit("stop timer", myTimerId);
        }
      };

      var sendResetSignal = function () {
        if (socket.connected && myTimerId !== null) {
          socket.emit("reset timer", myTimerId);
        }
      };

      socket.on("update timer", (arg) => {
        document.getElementById("timer-time").innerText = `${arg.hours}:${arg.minutes}:${arg.seconds}`;
        console.log(arg);
      });
      
      socket.on("new user joining", (arg) => {
        console.log(arg);
      });
      
      socket.on("done set up", (arg) => {
        console.log(arg);
      });
      
      socket.on("timer started", (arg) => {
        console.log(arg);
      });
      
      socket.on("timer stopped", (arg) => {
        console.log(arg);
      });
      
      socket.on("timer error", (arg) => {
        console.log(arg);
      });

    </script>
  </head>
  <body>
    <h1>Socket.io Timer</h1>
    <div id="timer-time"></div>
    <div>
      <button onclick="sendStartSignal()">Start</button>
      <button onclick="sendStopSignal()">Stop</button>
      <button onclick="sendResetSignal()">Reset</button>
    </div>
  </body>
</html>