Improve echo web UI

Based on feedback from anon.
This commit is contained in:
Gary Burd 2015-11-02 11:10:34 -08:00
parent c93e5540b8
commit 361d4c0ffd
2 changed files with 12 additions and 6 deletions

View File

@ -14,6 +14,4 @@ Next, start the client:
$ go run client.go $ go run client.go
The server includes a simple web client. To use the client, open The server includes a simple web client. To use the client, open
http://127.0.0.1:8080 in the browser. Click "Open" to open a connection to the http://127.0.0.1:8080 in the browser and follow the instructions on the page.
server, "Send" to send a message to the server and "Close" to close the
connection.

View File

@ -65,9 +65,9 @@ window.addEventListener("load", function(evt) {
var ws; var ws;
var print = function(message) { var print = function(message) {
var p = document.createElement("p"); var d = document.createElement("div");
p.innerHTML = message; d.innerHTML = message;
output.appendChild(p); output.appendChild(d);
}; };
document.getElementById("open").onclick = function(evt) { document.getElementById("open").onclick = function(evt) {
@ -112,13 +112,21 @@ window.addEventListener("load", function(evt) {
</script> </script>
</head> </head>
<body> <body>
<table>
<tr><td valign="top" width="50%">
<p>Click "Open" to create a connection to the server,
"Send" to send a message to the server and "Close" to close the connection.
You can change the message and send multiple times.
<p>
<form> <form>
<button id="open">Open</button> <button id="open">Open</button>
<button id="close">Close</button> <button id="close">Close</button>
<p><input id="input" type="text" value="Hello world!"> <p><input id="input" type="text" value="Hello world!">
<button id="send">Send</button> <button id="send">Send</button>
</form> </form>
</td><td valign="top" width="50%">
<div id="output"></div> <div id="output"></div>
</td></tr></table>
</body> </body>
</html> </html>
`)) `))