summaryrefslogtreecommitdiff
path: root/Year_3/Web/chat-socket-io
diff options
context:
space:
mode:
Diffstat (limited to 'Year_3/Web/chat-socket-io')
-rw-r--r--Year_3/Web/chat-socket-io/assets/chat.js37
-rw-r--r--Year_3/Web/chat-socket-io/assets/style.css50
-rw-r--r--Year_3/Web/chat-socket-io/chat.js16
-rw-r--r--Year_3/Web/chat-socket-io/index.js23
-rw-r--r--Year_3/Web/chat-socket-io/views/404.pug6
-rw-r--r--Year_3/Web/chat-socket-io/views/index.pug13
6 files changed, 114 insertions, 31 deletions
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