Created
August 2, 2022 21:19
-
-
Save BlazerYoo/ab45a991447d9311a1230b4c48206da9 to your computer and use it in GitHub Desktop.
tornado
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Chat application</title> | |
| </head> | |
| <body> | |
| <div style="width:100%; padding: 20px; overflow-y: scroll;"> | |
| <div id="messages"></div> | |
| <div style="padding-top: 20px;"> | |
| <form onsubmit="return sendMessage()"> | |
| <input id="message" type="text" style="width: 70%;"><button style="width: 25%">Send</button> | |
| </form> | |
| </div> | |
| <script> | |
| var ws = new WebSocket("ws://localhost:8888/websocket"); | |
| var username = prompt("What's your name?"); | |
| function sendMessage() { | |
| var messageInput = document.getElementById("message"); | |
| var message = messageInput.value; | |
| var payload = { | |
| "message": message, | |
| "user": username | |
| } | |
| // Make the request to the WebSocket. | |
| ws.send(JSON.stringify(payload)); | |
| // Clear the message from the input. | |
| messageInput.value = ""; | |
| return false; | |
| } | |
| ws.onmessage = function(evt) { | |
| var messageDict = JSON.parse(evt.data); | |
| // Create a div with the format `user: message`. | |
| var messageBox = document.createElement("div"); | |
| messageBox.innerHTML = messageDict.user + ": " + messageDict.message; | |
| document.getElementById("messages").appendChild(messageBox); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment