Save messages and users + /who command

Camroku · Jun 19, 2022 · 82d3aa7 · 82d3aa7
1 parent 9666e6a
commit 82d3aa7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/index.js b/index.js
@@ -14,37 +14,54 @@ app.use(session({
   saveUninitialized: true
 }));
 
+var users = {};
+var messages = [];
+
 app.get('/', (req, res) => {
-    res.redirect('/login');
+    return res.redirect('/login');
 });
 
 app.get('/login', (req, res) => {
+    if (req.session.username != null) {
+        return res.redirect('/chat');
+    }
     res.render('login');
 });
 
 app.post('/login', (req, res) => {
     req.session.username = req.body.username;
-    res.redirect('/chat');
+    return res.redirect('/chat');
 });
 
 app.get('/chat', (req, res) => {
     if (req.session.username == null) {
-        res.redirect('/login');
+        return res.redirect('/login');
     }
-    res.render('chat', { username: req.session.username });
+    res.render('chat', { username: req.session.username, messages: messages });
 });
 
 app.use(express.static('static'))
 
 io.on('connection', (socket) => {
     var username = socket.request._query['username'];
-    io.emit('chat message', "User " + username + " has joined.", "System");
+    users[socket.id] = username;
+    var msg = "User " + username + " has joined.";
+    messages.push({id: "System", msg: msg});
+    io.emit('chat message', msg, "System");
     socket.on('disconnect', () => {
-        io.emit('chat message', "User " + username + " has left.", "System");
+        delete users[socket.id];
+        var msg = "User " + username + " has left.";
+        messages.push({id: "System", msg: msg});
+        io.emit('chat message', msg, "System");
     });
     socket.on('chat message', (msg, id) => {
+        messages.push({id: id, msg: msg});
         io.emit('chat message', msg, id);
     });
+    socket.on('get online', () => {
+        var userstr = Object.values(users).join(", ")
+        io.to(socket.id).emit('sys message', "Online: " + userstr, "System");
+    });
 });
 
 server.listen(3000, () => {

diff --git a/static/script/script.js b/static/script/script.js
@@ -1,4 +1,4 @@
-var table = document.getElementById('messages');
+var tbody = document.getElementById('mtb');
 var form = document.getElementById('form');
 var input = document.getElementById('input');
 
@@ -14,10 +14,11 @@ function gotMessage(msg, id) {
     username.className = "username";
     message.textContent = msg;
     message.innerHTML = message.innerHTML.replace(/(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)[-A-Z0-9+&@#%?\/=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, "<a href='$1' target='_blank'>$1</a>");
+    message.innerHTML = message.innerHTML.replace(/&lt;br&gt;/g, "<br>");
     message.className = "message";
     row.appendChild(username);
     row.appendChild(message);
-    table.appendChild(row);
+    tbody.appendChild(row);
     window.scrollTo(0, document.body.scrollHeight);
     return row;
 }
@@ -28,7 +29,9 @@ form.addEventListener('submit', function (e) {
         if (input.value[0] == '/') {
             var argv = input.value.split(" ");
             if (argv[0] == "/help") {
-                gotMessage("There are not any commands yet.", "System");
+                gotMessage("Commands:<br>who - Get a list of online users", "System");
+            } else if (argv[0] == "/who") {
+                socket.emit('get online');
             } else {
                 var message = gotMessage("Unknown command " + argv[0], "System");
                 setTimeout(function () {
@@ -45,4 +48,8 @@ form.addEventListener('submit', function (e) {
 
 socket.on('chat message', function (msg, id) {
     gotMessage(msg, id);
+});
+
+socket.on('sys message', function (msg, id) {
+    gotMessage(msg, id);
 });
diff --git a/views/chat.ejs b/views/chat.ejs
@@ -9,7 +9,13 @@
 
 <body>
     <table id="messages">
-        <tbody>
+        <tbody id="mtb">
+            <% for(var i=0; i < messages.length; i++) { %>
+            <tr>
+                <td class="username"><%= messages[i].id %></td>
+                <td class="message"><%= messages[i].msg %></td>
+            </tr>
+            <% } %>
         </tbody>
     </table>
     <form id="form" action="" data-username="<%= username %>">