Working.

script.js

@@ -0,0 +1,65 @@
+import moment from "https://jspm.dev/moment"
+import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js"
+const socket = io(":3000")
+const messageButton = document.querySelector("#send")
+const nameButton = document.querySelector("button")
+const nameInput = document.querySelector("input")
+const messageInput = document.querySelector("textarea")
+
+setInterval(
+    () =>
+        document.querySelectorAll(".message-timestamp").forEach((element) => {
+            element.innerText = moment(
+                new Date(Number(element.closest(".message").dataset.time))
+            ).fromNow()
+        }),
+    45000
+)
+
+const addMessage = (messageObject) => {
+    const { message, isYours, isSystem, user } = messageObject
+    const messageDiv = document
+        .querySelector("template")
+        .content.cloneNode(true)
+        .querySelector(".message")
+
+    if (isYours) messageDiv.classList.add("message-right")
+    else if (isSystem) messageDiv.classList.add("system")
+    messageDiv.querySelector(".message-text").innerText = message
+    const time = Date.now()
+    messageDiv.dataset.time = time
+    messageDiv.querySelector(".message-timestamp").innerText =
+        moment(time).fromNow()
+    if (user) messageDiv.querySelector(".message-user").innerText = `${user} • `
+    document.querySelector("#messages").prepend(messageDiv)
+}
+
+nameButton.addEventListener("click", () => {
+    if (!nameInput.value) return (nameInput.required = true)
+    document.querySelector("#login").classList.add("done")
+    socket.emit("new-user", nameInput.value)
+    addMessage({
+        message: "You joined",
+        isYours: true,
+        isSystem: true,
+    })
+})
+
+messageButton.addEventListener("click", () => {
+    if (!messageInput.value) return (messageInput.required = true)
+    socket.emit("send-chat-message", messageInput.value)
+    addMessage({ user: "you", message: messageInput.value, isYours: true })
+    messageInput.value = ""
+})
+
+socket.on("chat-message", (message, user) => {
+    addMessage({ message, user })
+})
+
+socket.on("user-connected", (name) => {
+    addMessage({ message: `${name} joined`, isSystem: true })
+})
+
+socket.on("user-disconnected", (name) => {
+    addMessage({ message: `${name} disconnected`, isSystem: true })
+})