index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Lobby</title>
  <link rel="icon" type="image/png" href="./assets/static/favicon.png">
  <link rel="stylesheet" href="./assets/css/style.css">
  <script src="./assets/js/main.js"></script>
</head>
<body>
  <main id="elm-node"></main>

<script type="text/javascript" src="./assets/js/config.js"></script>
<script type="text/javascript">
    
  // prevent backspace from redirecting browser
  window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+0008'||e.keyIdentifier=='Backspace'||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);

  var socket;
  var instance;
  var app = Elm.Lobby.init({node:document.getElementById('elm-node')});
  
  function setupSocket() {
    socket = new WebSocket(server_host) // remove Sec-Websocket-Protocol
    var startct = Date.now();

    socket.onclose = function() {
      var delta = Date.now() - startct; // milliseconds elapsed since start
      alert(Math.floor(delta / 1000)); // in seconds

      alert("Connection to the server has been lost.");
    }

    socket.onerror = function() {
      alert("Server connection has experienced an unknown error.");
    }

    socket.onopen = function() {
      
      app.ports.outputPort.subscribe(function (data) {
        console.log("Message from client:")
        console.log(data);
        socket.send(data);
      });
      
      data = '{"action": "get_rooms", "content": ""}';
      console.log("Message from client:")
      console.log(data);
      socket.send( data );

    }

    // reconnect on socket close?
    socket.addEventListener("close", () => {
      this.setupSocket()
    })

    // got message from server
    socket.addEventListener("message", (event) => {
      console.log("Message from server:" + event.data)
      newJSON = JSON.parse(event.data)
      console.log( newJSON );
      app.ports.inputPort.send( newJSON );
    })

  }


  window.onload = function() {
    setupSocket();
  }
 

</script>


</body>
</html>