Private Message

index.js

@@ -12,6 +12,7 @@ const loginRoute = require('./routes/login');
 const fs = require('fs');
 const activeUsers = new Map();
 const authenticationRoute = require('./routes/auth');
+const { response } = require('express');
 
 
 //DB Connection
@@ -43,11 +44,8 @@ app.get('/login', (req, res) => {
 
 io.on('connection', (socket) => {
   
-  console.log('connection');
-
   var socketId = socket.id;
 
-
   // Triggered by emit() from client, when entering the chatroom
   // SocketID => name
   socket.on('userLogin', function(response) {
@@ -89,18 +87,28 @@ io.on('connection', (socket) => {
       var name = response.name;
       var dateTime = new Date().toTimeString();
 
-      console.log("index.js Msg: ", msg);
-      console.log("index.js name: ", name);
       io.emit('chat message', {
         msg : msg,
         name : name,
         dateTime: dateTime
       });
   })
-
-
 });
 
+io.on('connection', (socket) => {
+  socket.on('private message', (response) => {
+    var private_msg = response.private_msg;
+    var receiver = response.receiver;
+    var sender = response.name;
+
+    io.emit(receiver, {
+      private_msg: private_msg,
+      receiver: receiver,
+      sender: sender
+    })
+  })
+})
+
 //Logs message from Socket to Console
 io.on('connection', (socket) => {
   socket.on('chat message', (response) => {

views/index.html

@@ -6,14 +6,22 @@
       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); }
+      #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); }
       #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: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; }
 
       #messages { list-style-type: none; margin: 0; padding: 0; }
       #messages > li { padding: 0.5rem 1rem; }
       #messages > li:nth-child(odd) { background: #efefef; }
 
+      #messages_private { list-style-type: none; margin: 0; padding: 0; }
+      #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; }
@@ -24,9 +32,15 @@
     <ul id="activeUsers">Active Users</ul>
 
     <ul id="messages"></ul>
+    <ul id="messages_private"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button>Send</button>
     </form>
+    <form id="form_private" action="">
+      <input id="input_private" autocomplete="off" />
+      <input id="input_private_reciever" autocomplete="off" placeholder="Receiver"/>
+      <button>Send private Message</button>
+    </form>
     <input id="file" type="file"/>
     <script src="/socket.io/socket.io.js"></script>
     <script>
@@ -35,15 +49,46 @@
       var activeUsers = document.getElementById('activeUsers');
       var messages = document.getElementById('messages');
       var form = document.getElementById('form');
+      var form_private = document.getElementById('form_private');
       var input = document.getElementById('input');
       var fileUpload = document.getElementById("file");
+      var receiver = document.getElementById("input_private_reciever");
+      var input_private = document.getElementById("input_private");
 
       var username = getCookie("username");
 
+
       socket.emit('userLogin', {
         name : username
       });
 
+      form_private.addEventListener('submit', function(e){
+        e.preventDefault();
+        if(input_private.value && receiver.value){
+          socket.emit("private message", 
+          {
+            private_msg : input_private.value,
+            receiver : receiver.value,
+            name : username
+          });
+          input_private.value = '';
+          receiver.value = '';
+          input_private.focus;
+          receiver.focus;
+        }
+      })
+      
+      socket.on(username, function(response){
+        console.log("Private Message: ", response.private_msg," From: ", response.sender);
+/* 
+        var item = document.createElement('li');
+        var nameMsg = name + ": " + msg + "   --" + dateTime;
+        item.textContent = nameMsg;
+
+        messages.appendChild(item);
+        window.scrollTo(0, document.body.scrollHeight); */
+      }) 
+
       //Event Listener to trigger emit function. Sends 'chat message' event and Message to Server
       form.addEventListener('submit', function(e) {
         e.preventDefault();
@@ -51,7 +96,6 @@
           upload(fileUpload.files);
         }
         if (input.value) {
-          var username = getUsernameFromCookie();
           socket.emit("chat message",
             { msg : input.value,
               name : username
@@ -68,10 +112,6 @@
         var date = response.dateTime;
         var dateTime = date.split(" ")[0];
 
-        console.log("index.html msg: ", msg);
-        console.log("Index.html name: ", name);
-        console.log("Index.html dateTime: ", dateTime);
-
         var item = document.createElement('li');
         var nameMsg = name + ": " + msg + "   --" + dateTime;
         item.textContent = nameMsg;