|
@@ -50,6 +50,31 @@ function move() {
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
+
|
|
|
|
+<h1>WebSocket Chat</h1>
|
|
|
|
+<form action="" onsubmit="sendMessage(event)">
|
|
|
|
+ <input type="text" id="messageText" autocomplete="off"/>
|
|
|
|
+ <button>Send</button>
|
|
|
|
+</form>
|
|
|
|
+<ul id='messages'>
|
|
|
|
+</ul>
|
|
|
|
+<script>
|
|
|
|
+ var ws = new WebSocket("ws://localhost:8000/ws");
|
|
|
|
+ ws.onmessage = function(event) {
|
|
|
|
+ var messages = document.getElementById('messages')
|
|
|
|
+ var message = document.createElement('li')
|
|
|
|
+ var content = document.createTextNode(event.data)
|
|
|
|
+ message.appendChild(content)
|
|
|
|
+ messages.appendChild(message)
|
|
|
|
+ };
|
|
|
|
+ function sendMessage(event) {
|
|
|
|
+ var input = document.getElementById("messageText")
|
|
|
|
+ ws.send(input.value)
|
|
|
|
+ input.value = ''
|
|
|
|
+ event.preventDefault()
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
</body>
|
|
</body>
|
|
</html>
|
|
</html>
|
|
|
|
|