server/integration-tests/listener.html

<!DOCTYPE html>
<meta charset="utf-8"/>
<title>A simple Websocket listener</title>
<h3>A simple Websocket listener</h3>
<style>
  body { font-family: 'Helvetica', 'Arial', sans-serif; }
</style>
<fieldset>
  <legend>Configuration</legend>
  URL: <input id="url" type="url" value="ws://localhost:3000"/>
  <button id="reload" type="button">Reload</button>
</fieldset>
<fieldset>
  <legend>Status</legend>
  <!-- we set the status dynamically from the websocket data -->
  <pre id="status"></pre>
</fieldset>

<script>
  (function() {
    var urlField = document.getElementById("url");
    var reloadButton = document.getElementById("reload");
    var statusField = document.getElementById("status");

    var webSocket = null;
    var reload = function() {
      if (webSocket !== null) {
        webSocket.close();
      }
      webSocket = new WebSocket(urlField.value);
      webSocket.addEventListener("close", function (event) {
        statusField.textContent = "CLOSED: " + event.code;
      });
      webSocket.addEventListener("message", function (event) {
        var msg = JSON.parse(event.data);
        console.log('Received data: ' + event.data);
        console.log('status: ' + status);
        statusField.textContent = JSON.stringify(msg, null, 4);
      });
    };

    reloadButton.addEventListener("click", function() {
      reload();
    });

    reload();
  })();
</script>