From cf7e0630c77b8f0e9660e3e633e10ea3db116387 Mon Sep 17 00:00:00 2001 From: Santo Cariotti Date: Tue, 26 Jul 2022 15:41:36 +0200 Subject: Usernames and exclude sender --- Year_3/Web/chat-socket-io/assets/chat.js | 37 ++++++++++++++++++++++ Year_3/Web/chat-socket-io/assets/style.css | 50 ++++++++++++++++++++++++++++++ Year_3/Web/chat-socket-io/chat.js | 16 ---------- Year_3/Web/chat-socket-io/index.js | 23 +++++++++++--- Year_3/Web/chat-socket-io/views/404.pug | 6 ++++ Year_3/Web/chat-socket-io/views/index.pug | 13 ++------ 6 files changed, 114 insertions(+), 31 deletions(-) create mode 100644 Year_3/Web/chat-socket-io/assets/chat.js create mode 100644 Year_3/Web/chat-socket-io/assets/style.css delete mode 100644 Year_3/Web/chat-socket-io/chat.js create mode 100644 Year_3/Web/chat-socket-io/views/404.pug (limited to 'Year_3') diff --git a/Year_3/Web/chat-socket-io/assets/chat.js b/Year_3/Web/chat-socket-io/assets/chat.js new file mode 100644 index 0000000..2dfdd62 --- /dev/null +++ b/Year_3/Web/chat-socket-io/assets/chat.js @@ -0,0 +1,37 @@ +var form = document.getElementById("form"); +var input = document.getElementById("input"); +const messages = document.getElementById("messages"); + +form.addEventListener("submit", function(e) { + e.preventDefault(); + let value = input.value; + if (value) { + if (value[0] == "/") { + let command = value.split(" "); + if (command.length == 2 && command[0] == "/user") { + socket.emit("set user", command[1]); + } else { + socket.emit("handle error", "Command not found"); + } + } else { + socket.emit("chat message", value); + } + input.value = ""; + } +}); +socket.on("chat message", (msg) => { + var item = document.createElement("li"); + item.textContent = msg; + messages.appendChild(item); + window.scrollTo(0, document.body.scrollHeight); +}); + +socket.on("handle error", (msg) => { + alert(msg); +}); + +socket.on("set user", (username) => { + const userBox = document.getElementById("userBox"); + userBox.innerHTML = username; + alert("Username changed"); +}); diff --git a/Year_3/Web/chat-socket-io/assets/style.css b/Year_3/Web/chat-socket-io/assets/style.css new file mode 100644 index 0000000..85f7376 --- /dev/null +++ b/Year_3/Web/chat-socket-io/assets/style.css @@ -0,0 +1,50 @@ +body { + margin: 0; + padding-bottom: 3rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; +} + +#form { + background: rgba(0, 0, 0, 0.15); + padding: 0.25rem; + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + height: 3rem; + box-sizing: border-box; + backdrop-filter: blur(10px); +} +#input { + border: none; + padding: 0 1rem; + flex-grow: 1; + border-radius: 2rem; + margin: 0.25rem; +} +#input:focus { + outline: none; +} +#form > button { + background: #333; + border: none; + padding: 0 1rem; + margin: 0.25rem; + border-radius: 3px; + outline: none; + color: #fff; +} + +#messages { + list-style-type: none; + margin: 0; + padding: 0; +} +#messages > li { + padding: 0.5rem 1rem; +} +#messages > li:nth-child(odd) { + background: #efefef; +} diff --git a/Year_3/Web/chat-socket-io/chat.js b/Year_3/Web/chat-socket-io/chat.js deleted file mode 100644 index 8aa1b4d..0000000 --- a/Year_3/Web/chat-socket-io/chat.js +++ /dev/null @@ -1,16 +0,0 @@ -var form = document.getElementById("form"); -var input = document.getElementById("input"); - -form.addEventListener("submit", function(e) { - e.preventDefault(); - if (input.value) { - socket.emit("chat message", input.value); - input.value = ""; - } -}); -socket.on("chat message", (msg) => { - var item = document.createElement("li"); - item.textContent = msg; - messages.appendChild(item); - window.scrollTo(0, document.body.scrollHeight); -}); diff --git a/Year_3/Web/chat-socket-io/index.js b/Year_3/Web/chat-socket-io/index.js index 6224c50..b59cb72 100644 --- a/Year_3/Web/chat-socket-io/index.js +++ b/Year_3/Web/chat-socket-io/index.js @@ -13,19 +13,34 @@ app.get("/", (req, res) => { res.render("index"); }); -app.get("/chat.js", (req, res) => { - res.sendFile(__dirname + "/chat.js"); +app.use(express.static("assets")); + +app.get("*", (req, res) => { + res.render("404"); }); +const users = {}; + io.on("connection", (socket) => { - console.log("A user is connected"); + console.log("A user is connected: " + socket.id); + io.to(socket.id).emit("set user", socket.id); + users[socket.id] = socket.id; socket.on("disconnect", () => { console.log("A user is disconnected"); }); socket.on("chat message", (message) => { - io.emit("chat message", message); + socket.broadcast.emit("chat message", message); + }); + + socket.on("handle error", (msg) => { + io.emit("handle error", msg); + }); + + socket.on("set user", (username) => { + users[socket.id] = username; + io.to(socket.id).emit("set user", username); }); }); diff --git a/Year_3/Web/chat-socket-io/views/404.pug b/Year_3/Web/chat-socket-io/views/404.pug new file mode 100644 index 0000000..b131902 --- /dev/null +++ b/Year_3/Web/chat-socket-io/views/404.pug @@ -0,0 +1,6 @@ +doctype +html + head + title 404 error + body + h1 This page does not exist diff --git a/Year_3/Web/chat-socket-io/views/index.pug b/Year_3/Web/chat-socket-io/views/index.pug index 484d151..1133e0a 100644 --- a/Year_3/Web/chat-socket-io/views/index.pug +++ b/Year_3/Web/chat-socket-io/views/index.pug @@ -2,23 +2,14 @@ doctype html head title Chat - style - | body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } - - | #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); } - | #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; } - | #input:focus { outline: none; } - | #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; } - - | #messages { list-style-type: none; margin: 0; padding: 0; } - | #messages > li { padding: 0.5rem 1rem; } - | #messages > li:nth-child(odd) { background: #efefef; } + link(rel="stylesheet" href="./style.css") script(src="/socket.io/socket.io.js") script | var socket = io() body ul#messages form#form(action="") + #userBox input#input(autocomplete="off") button Send -- cgit v1.2.3-18-g5258