<!DOCTYPE html>
<html>
<head>
	<title>websocket testing</title>
  <script>
  var socket = new WebSocket("ws://localhost:8080/ws");
  socket.onmessage = function(event) {
    console.log(event.data);
  }
  socket.onerror = function(event) {
    console.log(event.data);
  }
  function login() {
    var name = document.getElementById("username").value;
    var data = JSON.stringify({type:"login", username:name});
    console.log("Sending: "+data);
    socket.send(data);
  }

  function sendMessage() {
    var text = document.getElementById("text").value;
    var data = JSON.stringify({type:"message", text:text});
    socket.send(data);
  }
  function leave() {
    var data = JSON.stringify({type:"leave"});
    socket.send(data);
    socket.close();
  }
  </script>
</head>
<body>
  <h1>Websocket test page</h1>
  <hr>
  <input id="username" type="text" placeholder="username"><br>
  <button onclick="login();">Login</button><br>
  <hr>

  <input id="text" type="text" placeholder="text"><br>
  <button onclick="sendMessage();">Send Message</button><br>
  <hr>

  <button onclick="leave();">Logout</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>websocket testing</title>
  <script>
  var socket = new WebSocket("ws://localhost:8080/ws");
  socket.onmessage = function(event) {
    console.log(event.data);
    var data = JSON.parse(event.data);
    switch (data.type) {
      case "message":
        var area = document.getElementById("area");
        area.innerHTML = area.innerHTML + '<span style="color: #'+data.color+';">'+data.username+'</span>:  '+data.text+'<br>';
        break;
      case "status":
        break;
    }
  }
  socket.onerror = function(event) {
    console.log(event.data);
  }
  function login() {
    var name = document.getElementById("username").value;
    var data = JSON.stringify({type:"login", username:name});
    console.log("Sending: "+data);
    socket.send(data);
  }

  function sendMessage() {
    var text = document.getElementById("text").value;
    var data = JSON.stringify({type:"message", text:text});
    socket.send(data);
  }
  function leave() {
    var data = JSON.stringify({type:"leave"});
    socket.send(data);
    socket.close();
  }
  </script>
</head>
<body>
  <h1>Websocket test page</h1>
  <hr>
  <input id="username" type="text" placeholder="username"><br>
  <button onclick="login();">Login</button><br>
  <hr>

  <input id="text" type="text" placeholder="text"><br>
  <button onclick="sendMessage();">Send Message</button><br>
  <hr>

  <button onclick="leave();">Logout</button>

  <hr>

  <div id="area">
    
  </div>

</body>
</html>

Test page more of a page now
Test page more of a page now
