Multiple MSG

index.js

@@ -107,40 +107,23 @@ io.on('connection', (socket) => {
     var private_msg = response.private_msg;
     var receiver = response.receiver;
     var sender = response.name;
-    
-    recieverSocketID = getKeyFromVal(receiver);
-
-    if(recieverSocketID == "false"){
-      io.to(socket.id).emit('test', {
-        status : 401
-       }) 
-    }
-
-    io.to(recieverSocketID).emit('test', function(){console.log("emit priv. msg")} /* {
-      private_msg: private_msg,
-      receiver: receiver,
-      sender: sender
-    } */)
-  })
-})
-
-async function getKeyFromVal(receiver){
-  return new Promise( () => {
     var array = Array.from(activeUsers);
-    console.log("usersArray: " + array);
-    var receiverSocketId;
+ 
     for(var i = 0; i<array.length; i++){
-      console.log("array[i] ", array[i][0]);
       if(array[i][1] == receiver){
-        receiverSocketId = array[i][0];
-        console.log("Receiver ID in if: ",  receiverSocketId);
-        resolve(receiverSocketId);
-      }else{
-        resolve("false");
+        io.emit(receiver, {
+          private_msg : private_msg,
+          sender : sender
+        })
+        return 0;
       }
     }
+    io.emit(sender, {
+      status: 401
+    })       
   })
-}
+})
+
 
 //Logs message from Socket to Console
 io.on('connection', (socket) => {

views/index.html

@@ -7,12 +7,16 @@
 
       #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); }
       #form_private { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 3em; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
+      #form_multiple_receiver { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 6em; 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_private { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
       #input_private_reciever { border: none; padding: 0 1rem; border-radius: 2rem; margin: 0.25rem; }
+      #input_multiple { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
+      #input_multiple_receiver { border: none; padding: 0 1rem; 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; }
       #form_private > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
+      #form_multiple_receiver > 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; }
@@ -22,6 +26,7 @@
       #messages_private > li { padding: 0.5rem 1rem; }
       #messages_private > li:nth-child(odd) { background: #efefef; }
 
+
       #activeUsers { list-style-type: none; margin: 0; padding: 0; }
       #activeUsers > li { padding: 0.5rem 1rem; }
       #activeUsers > li:nth-child(odd) { background: #efefef; }
@@ -34,7 +39,7 @@
     <ul id="messages"></ul>
     <ul id="messages_private"></ul>
     <form id="form" action="">
-      <input id="input" autocomplete="off" /><button>Send</button>
+      <input id="input" autocomplete="off" placeholder="Send to all"/><button>Send</button>
     </form>
     <form id="form_private" action="">
       <input id="input_private" autocomplete="off" placeholder="Private Message"/>
@@ -42,8 +47,8 @@
       <button>Send private Message</button>
     </form>
     <form id="form_multiple_receiver" action="">
-      <input id="input_multiple_receiver" autocomplete="off" placeholder="Private Message"/>
-      <input id="input_multiple_receiver" autocomplete="off" placeholder="Receiver"/>
+      <input id="input_multiple" autocomplete="off" placeholder="Group Message"/>
+      <input id="input_multiple_receiver" autocomplete="off" placeholder="Receiver1, Receiver2, ..."/>
       <button>Send group message</button>
     </form>
     <input id="file" type="file"/>
@@ -59,6 +64,8 @@
       var fileUpload = document.getElementById("file");
       var receiver = document.getElementById("input_private_reciever");
       var input_private = document.getElementById("input_private");
+      var input_multiple = document.getElementById('input_multiple');
+      var multiple_reeceivers = document.getElementById('input_multiple_receiver');
 
       var username = getCookie("username");
 
@@ -83,11 +90,16 @@
       })
 
       //Receive private Messages
-      socket.on('test' ,function(response){
-        console.log("Received priv. msg.");
+      socket.on(username ,function(response){
+       
+        if(response.status == 401){
+          alert("User does not exists");
+          return 0;
+        }
+
         var private_msg =  response.private_msg;
         var sender = response.sender;
-        var private_msg = response.private_msg;
+        //var private_msg = response.private_msg;
         console.log("New private Message: ", response.private_msg," From: ", response.sender);
 
         var item = document.createElement('li');
@@ -99,6 +111,15 @@
 
       });
 
+      form_multiple_receiver.addEventListener('submit', function(e){
+        e.preventDefault();
+
+        var group_msg = input_multiple.value;
+        var receivers = input_multiple_receiver.value;
+
+        console.log("Multiple Shit: ", group_msg, receivers);
+      })
+
       //Event Listener to trigger emit function. Sends 'chat message' event and Message to Server
       form.addEventListener('submit', function(e) {
         e.preventDefault();