littlebookboy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    // use vanilla JS because why not
    window.addEventListener("load", function() {

        // create websocket instance
        var mySocket = new WebSocket("ws://localhost:8080/ws");

        // add event listener reacting when message is received
        mySocket.onmessage = function (event) {
            var output = document.getElementById("output");
            // put text into our output div
            output.textContent = event.data;
        };
        var form = document.getElementsByClassName("foo");
        var input = document.getElementById("input");
        form[0].addEventListener("submit", function (e) {
            // on forms submission send input to our server
            input_text = input.value;
            mySocket.send(input_text);
            e.preventDefault()
        })
    });
</script>
<style>
    /* just some super basic css to make things bit more readable */
    div {
        margin: 10em;
    }
    form {
        margin: 10em;
    }
</style>
</head>
<body>
    <form class="foo">
        <input id="input"></input>
        <input type="submit"></input>
    </form>
    <div id="output"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript">
	// use vanilla JS because why not
	window.addEventListener("load", function() {

	// create websocket instance
	var mySocket = new WebSocket("ws://localhost:8080/ws");

	// add event listener reacting when message is received
	mySocket.onmessage = function (event) {
	var output = document.getElementById("output");
	// put text into our output div
	output.textContent = event.data;
	};
	var form = document.getElementsByClassName("foo");
	var input = document.getElementById("input");
	form[0].addEventListener("submit", function (e) {
	// on forms submission send input to our server
	input_text = input.value;
	mySocket.send(input_text);
	e.preventDefault()
	})
	});
	</script>
	<style>
	/* just some super basic css to make things bit more readable */
	div {
	margin: 10em;
	}
	form {
	margin: 10em;
	}
	</style>
	</head>
	<body>
	<form class="foo">
	<input id="input"></input>
	<input type="submit"></input>
	</form>
	<div id="output"></div>
	</body>
	</html>