diff options
| author | davidovski <david@sendula.com> | 2021-07-08 19:26:10 +0100 |
|---|---|---|
| committer | davidovski <david@sendula.com> | 2021-07-08 19:26:10 +0100 |
| commit | b2c4859226aec4e5d26aad21329cc5ea1fb02b79 (patch) | |
| tree | 02e2ff82dd8053ac8d54b840a74998450c310b18 /dist | |
First commit to git
Diffstat (limited to 'dist')
| -rw-r--r-- | dist/default.css | 57 | ||||
| -rw-r--r-- | dist/index.html | 21 | ||||
| -rw-r--r-- | dist/index.js | 85 | ||||
| -rw-r--r-- | dist/test/index.html | 3 |
4 files changed, 166 insertions, 0 deletions
diff --git a/dist/default.css b/dist/default.css new file mode 100644 index 0000000..933b93a --- /dev/null +++ b/dist/default.css @@ -0,0 +1,57 @@ +body { + color: white; + background-color: #222; + font-family: Arial, sans-serif; + overflow: hidden; +} + +.header { + height: 10%; +} +.main { + height: 85%; +} + +.footer { + float: bottom; + height:5% +} + +#messages { + height: 100%; + overflow-y: scroll; + overflow-x: auto; + position: relative; + bottom: 0; +} + +#msgbox { + width: 100%; + height: 100%; +} + +input { + border: 1px solid #45d; + background-color: #45b; + color: white; +} +input:focus { + border: 1px solid #000; + +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0); +} + +::-webkit-scrollbar-thumb { + background: #888; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..c2bcad6 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,21 @@ +<head> + <title>chatroom</title> + <script src="index.js"></script> + <link rel="stylesheet" href="default.css"> + +</head> + +<body> + <div class="header"> + <h1>welcome to discörd</h1> + <label for="nickbox">nickname: </label> + <input id="nickbox" type="text" > + </div> + <div class="main"> + <div id="messages"> + </div> + </div> + <div class="footer"> + <input id="msgbox" type="text"> + </div> +</body> diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..2ad7b15 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,85 @@ +document.addEventListener("DOMContentLoaded", () => { + + // Read parameters in the url and find a nickname from them + const params = new URLSearchParams(window.location.search); + var nick = params.get("nick"); + // preload the nickname into the nickname input box + if (nick) { + var nickbox = document.getElementById("nickbox"); + nickbox.value = nick; + } + + // initialise the websocket connection + const url = `ws://${window.location.hostname}:8081`; + const connection = new WebSocket(url); + + // define functions listening to the websocket + connection.onopen = () => { + + // estimate how many lines should be requested from the client + var lines = Math.round(window.innerHeight / 12); + // send the initial "join" message from the client, with an initial nickname and how many messages should be preloaded + connection.send(JSON.stringify({ + event: "join", + nickname: nick, + lines: lines + })); + } + + // define a listener for errors, to be printed to the console + connection.onerror = error => { + console.log(`WebSocket error: ${error}`); + } + + // define a listener for messages + connection.onmessage = (ev) => { + // parse the message as a json object + var data = JSON.parse(ev.data); + + // If the message is of type "message", we can add it to the screen + if (data.event == "message"){ + addMessage(data.content, data.nickname); + } + } + + // display messages on the screen for the user + function addMessage(content, sender) { + + // Find the "messages" box in the document + var messagesElement = document.getElementById("messages"); + + // create a new message and add it as a child to the messagesElement + var newMessage = document.createElement("div"); + newMessage.innerText = `${sender}: ${content}`; + messagesElement.appendChild(newMessage); + + // update the scroll, so that the client has the newest message visible + messagesElement.scrollTop = messagesElement.scrollHeight; + } + + // send a message to the webserver + function sendMessage(msg) { + // check the nickname box for a value + nick = document.getElementById("nickbox").value; + + // Send a json object to the websocket + connection.send(JSON.stringify({ + content: msg, + nickname: nick, + event: "message" + })); + } + + var inputBox = document.getElementById("msgbox"); + // prefocus the input box when the page is loaded + inputBox.focus(); + // add event listener for enter key on input box + inputBox.addEventListener("keyup", ev => { + if (event.keyCode == 13) { + event.preventDefault(); + sendMessage(inputBox.value); + inputBox.value = ""; + } + }) +}); + diff --git a/dist/test/index.html b/dist/test/index.html new file mode 100644 index 0000000..8c62610 --- /dev/null +++ b/dist/test/index.html @@ -0,0 +1,3 @@ +<body> + <h1>ctest</h1> +</body> |