<!DOCTYPE html>
<html>
<head>
<style>
body{
background:#1d2021;
color:#bdae93;
}
.page{
height:500px;
width:400px;
overflow-y:scroll;
border:1px solid #a89984;
}
</style>
</head>
<body>
<h1>Messages:</h1>
<div class="page"></div>
<input type="text" placeholder="Enter message" id="area" autofocus>
<script>
var page = document.getElementsByClassName("page")[0]
var host = 'ws://localhost:8080/';
var socket = new WebSocket("ws://localhost:8080");
socket.onmessage = function(e){
page.innerHTML += "<br>" + e.data;
};
socket.onerror = function(e){
page.innerHTML += "<h3>Connection error</h3>";
}
var area = document.getElementById("area");
area.onkeyup = function(e){
if(e.key == "Enter"){
socket.send(area.value);
area.value = "";
area.focus();
}
}
</script>
</body>
</html>