feat: improve app and serve page from node

Rex-82 · Aug 18, 2024 · 7e6b979 · 7e6b979
1 parent 2461a69
commit 7e6b979
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 19 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -23,18 +23,80 @@ html {
   font-size: 1em;
 }
 
+#madeBy {
+  padding: 0.25rem 0;
+  background-color: var(--pico-form-element-background-color);
+  text-align: center;
+  font-size: 0.875rem;
+  color: hsl(240, 30%, 60%);
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+}
+
+#madeBy > a {
+  color: hsl(240, 30%, 80%);
+  text-decoration: none;
+}
+
+#madeBy > a:hover {
+  color: hsl(240, 30%, 100%);
+}
+
+#disclaimer {
+  font-size: 0.75rem;
+  border: 1px solid hsl(240, 30%, 50%);
+  color: hsl(240, 30%, 70%);
+  border-radius: 1rem;
+  opacity: 80%;
+  padding: 0.75rem;
+  max-width: fit-content;
+  margin-bottom: 3rem;
+}
+
+#disclaimer:only-child {
+  font-size: 0.875rem;
+  border: 1px solid hsl(240, 30%, 90%);
+  color: hsl(240, 30%, 90%);
+  border-radius: 1rem;
+  padding: 0.75rem;
+  max-width: fit-content;
+}
+
+#disclaimer > p {
+  margin: 0;
+  color: inherit;
+}
+
+#disclaimer > ul {
+  margin: 0.35rem 0;
+  padding-left: 1.75rem;
+  color: inherit;
+}
+
 .bottom {
-  height: 100vh;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
   padding: 1em;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }
 
+#message-input-area {
+  resize: none;
+  height: 3rem;
+  overflow: hidden;
+}
+
 #chat-buttons-container {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   gap: 1em;
+  margin-left: 1rem;
 }
 
 #connection-button {
@@ -46,13 +108,16 @@ html {
 }
 
 #messages-container {
-  padding: 0.5em 0;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1em; /* TODO: reduce gap between same user's messages */
+  max-height: 80vh;
+  overflow: scroll;
 }
 
 .chat-message {
+  white-space: pre-wrap;
   padding: 0.5em;
   border-radius: 0.75em;
   max-width: 50vw;

diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>WebSocket chat app</title>
+    <meta name="author" content="Simone Ferretti" />
     <script defer type="module" src="./src/main.js"></script>
     <link
       rel="stylesheet"
@@ -12,12 +13,40 @@
     <link rel="stylesheet" href="./css/style.css" />
   </head>
   <body>
+    <p id="madeBy">
+      Made by
+      <a href="https://github.com/Rex-82">Simone Ferretti</a>
+    </p>
     <div class="bottom">
-      <div id="messages-container" class="container"></div>
-      <input type="textarea" name="message-box" id="message-input-area" />
-      <div id="chat-buttons-container">
-        <button id="connection-button"></button>
-        <button id="send-button" disabled></button>
+      <div id="messages-container" class="container-fluid">
+        <div id="disclaimer" class="container">
+          <p>
+            This project is still under development and may lack some features,
+            including:
+          </p>
+          <ul>
+            <li>Multiple sessions handling</li>
+            <li>Persistent message history</li>
+            <li>Login/Auth</li>
+            <li>Better user id generation</li>
+            <li>Full responsiveness</li>
+          </ul>
+          <p>
+            Expect occasional bugs or interruptions. Your feedback is welcome!
+          </p>
+        </div>
+      </div>
+      <div>
+        <textarea name="message-box" id="message-input-area"> </textarea>
+        <div id="chat-buttons-container">
+          <a href="https://github.com/Rex-82/websocket/issues" class="secondary"
+            >Report bug</a
+          >
+          <div>
+            <button id="connection-button"></button>
+            <button id="send-button" disabled></button>
+          </div>
+        </div>
       </div>
     </div>
   </body>

diff --git a/client/src/main.js b/client/src/main.js
@@ -9,13 +9,16 @@ const messageInputArea = document.getElementById("message-input-area");
 
 connectionButton.textContent = "connect";
 sendButton.textContent = "send";
+messageInputArea.setAttribute("disabled", "");
 
 let socketOpen = false;
 let hasEvents = false;
 
+const userId = Math.ceil(Math.random() * 100); // TODO: improve random Id generator to prevent collisions
+
 function openConnection() {
 	if (!socketOpen) {
-		const userId = Math.ceil(Math.random() * 100);
+		// TODO: handle login?
 
 		connectionButton.textContent = "";
 		connectionButton.setAttribute("aria-busy", "true");
@@ -28,7 +31,15 @@ function openConnection() {
 			socketOpen = true;
 			connectionButton.setAttribute("aria-busy", "false");
 			connectionButton.textContent = "disconnect";
+			messageInputArea.removeAttribute("disabled");
 			console.log("connection opened");
+
+			if (messageInputArea.value.trim() !== "" && socketOpen) {
+				sendButton.removeAttribute("disabled");
+			} else {
+				sendButton.setAttribute("disabled", "");
+			}
+
 			if (!hasEvents) {
 				hasEvents = true;
 				function sendMessage() {
@@ -42,6 +53,7 @@ function openConnection() {
 
 						socket.send(JSON.stringify(message));
 						messageInputArea.value = "";
+						sendButton.setAttribute("disabled", "");
 					}
 				}
 
@@ -55,6 +67,8 @@ function openConnection() {
 						hasEvents = false;
 						socketOpen = false;
 						connectionButton.textContent = "connect";
+						sendButton.setAttribute("disabled", "");
+						messageInputArea.setAttribute("disabled", "");
 					} else {
 						console.log("connection not closed");
 					}
@@ -63,13 +77,21 @@ function openConnection() {
 				sendButton.addEventListener("click", sendMessage);
 				connectionButton.addEventListener("click", closeConnection);
 				messageInputArea.addEventListener("input", () => {
-					if (messageInputArea.value.trim() !== "") {
+					messageInputArea.style.height = "";
+					messageInputArea.style.height = messageInputArea.scrollHeight + "px";
+					if (messageInputArea.value.trim() !== "" && socketOpen) {
 						sendButton.removeAttribute("disabled");
 					} else {
 						sendButton.setAttribute("disabled", "");
 					}
 				});
 
+				messageInputArea.addEventListener("keydown", (e) => {
+					if (e.key === "Enter" && e.shiftKey) {
+						sendMessage();
+					}
+				});
+
 				connectionButton.removeEventListener("click", openConnection);
 			}
 		});
@@ -86,7 +108,7 @@ function openConnection() {
 				timeStamp.classList.add("chat-message-timestamp");
 
 				div.textContent = messageContent.message;
-				user.textContent = `from ${messageContent.user}`;
+				user.textContent = `from ${messageContent.user === userId ? `${messageContent.user} (You)` : messageContent.user}`;
 				const messageDate = timeAgo(new Date(messageContent.timeStamp));
 
 				timeStamp.textContent = messageDate;
@@ -103,10 +125,15 @@ function openConnection() {
 					div.classList.add("others-message");
 				}
 				messagesContainer.appendChild(div);
+				messagesContainer.scrollTop = messagesContainer.scrollHeight;
 			} catch (err) {
 				console.error("Error while parsing incoming message: ", err);
 			}
 		});
+
+		socket.addEventListener("error", (err) => {
+			console.log(err);
+		});
 	}
 }
 
@@ -115,10 +142,12 @@ setInterval(() => {
 	const messages = document.getElementById("messages-container").children;
 
 	for (const message of messages) {
-		const timeStamp = message.getElementsByTagName("time")[0];
-		timeStamp.textContent = timeAgo(
-			new Date(timeStamp.getAttribute("datetime")),
-		);
+		if (message.id !== "disclaimer") {
+			const timeStamp = message.getElementsByTagName("time")[0];
+			timeStamp.textContent = timeAgo(
+				new Date(timeStamp.getAttribute("datetime")),
+			);
+		}
 	}
 }, 60000);
 

diff --git a/server-node/main.js b/server-node/main.js
@@ -1,6 +1,5 @@
 import { WebSocketServer } from "ws";
 
-/*
 import path from "node:path";
 import express from "express";
 const app = express();
@@ -23,7 +22,6 @@ expressServer.on("upgrade", async function upgrade(request, socket, head) {
 		wsServer.emit("connection", ws, request);
 	});
 });
-*/
 
 // TODO: keep messages history
 

diff --git a/server-node/package.json b/server-node/package.json
@@ -5,7 +5,8 @@
 	"main": "main.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"dev": "nodemon ."
+		"dev": "nodemon .",
+		"start": "node ."
 	},
 	"author": "",
 	"license": "ISC",