50 lines
881 B
HTML
50 lines
881 B
HTML
|
<!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>
|