Private chat

server/server.js

@@ -7,7 +7,7 @@ const cors = require('cors');
 const io = require('socket.io')(server);
 
 const users = {
-    general : [
+    general: [
 
     ],
     sports: [
@@ -31,7 +31,7 @@ app.use((req, res, next) => {
 io.on('connection', (socket) => {
 
     // Listening for joining a room
-    socket.on('joinRoom', ({username, room}) => {
+    socket.on('joinRoom', ({ username, room }) => {
         console.log(`user ${username} wants to join the room ${room}`);
 
         // Join the room
@@ -55,40 +55,62 @@ io.on('connection', (socket) => {
         });
     })
 
-    socket.on('leaveRoom', ({room, username}) => {
+    // Leave room
+    socket.on('leaveRoom', ({ room, username }) => {
         console.log(`user ${username} wants to leave the room ${room}`);
 
         socket.leave(room, () => {
             console.log(`user ${username} left the room ${room}`);
 
             let usersRoom = users[room]
             // delete user from the suitable array
-            usersRoom = usersRoom.filter( (user) => (user.username !== username))
+            usersRoom = usersRoom.filter((user) => (user.username !== username))
 
             // Notify all the users in the same room
             io.sockets.in(room).emit('newUser', usersRoom);
         })
     })
 
     // Listening for private chats
-    socket.on('joinPrivateRoom', ({username, room, to}) => {
+    socket.on('joinPrivateRoom', ({ username, room, to }) => {
         console.log(`user ${username} wants to have a private chat with ${to}`);
 
         // Join the room
         socket.join(to, () => {
-
-            // Notify the user to talk with
-            io.sockets.in(room).emit('privateChat', {
-                username,
-                to
-            });
+
+            if (room !== null) {
+                // Notify the user to talk with (in the same main room)
+                io.sockets.in(room).emit('privateChat', {
+                    username,
+                    to
+                });
+            }
         });
+    });
 
-         // io.to(to).emit('privateChat', {
-            //     username,
-            // })
+    // Leave private chat
+    socket.on('leavePrivateRoom', ({ room, from, to }) => {
+        console.log(`user ${from} wants to leave the private chat with ${room}`);
 
-    });
+        io.to(room).emit('leavePrivateRoom', {
+            to,
+            privateMessage: `${from} has closed the chat`,
+            from,
+            room
+        })
+
+        socket.leave(room, () => {
+            console.log(`user ${from} left the private chat with ${room}`);
+        })
+    })
+
+    // Private message listener
+    socket.on('privateMessage', ({ privateMessage, to, from, room }) => {
+        console.log(`User ${from} wants sends a message to ${to}`);
+
+        // Private message to the user
+        io.to(room).emit('privateMessage', { to, privateMessage, from, room })
+    })
 })
 
 server.listen(PORT, () => console.log(`Server Listening on port ${PORT}`));

src/components/ChatArea.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="message">
     <div v-for="msg in messages" v-bind:key="msg.msg" class="message__container">
-      <p class="message__text" v-bind:class="{ own: msg.own, other: !msg.own}">{{msg.msg}}</p>
+      <p class="message__text" v-bind:class="{ own: msg.isMe, other: !msg.isMe}">{{msg.msg}}</p>
     </div>
   </div>
 </template>

src/components/ChatDialog.vue

@@ -5,33 +5,50 @@
       :md-fullscreen="false"
       :md-click-outside-to-close="false"
     >
+    <div v-if="videoCall" class="chat-dialog__left">
+      hahsdfhashfd
+    </div>
+    <div class="chat-dialog__right">
       <div class="chat-dialog__options">
-        <md-button class="md-icon-button chat-dialog__video" v-on:click="closeChat()">
+        <md-button class="md-icon-button chat-dialog__video" v-on:click="videoCall = true">
           <md-icon>video_call</md-icon>
         </md-button>
         <md-button class="md-icon-button chat-dialog__exit" v-on:click="closeChat()">
           <md-icon>close</md-icon>
         </md-button>
       </div>
-      <md-dialog-content>Private chat with {{showDialog.user}}</md-dialog-content>
+      <md-dialog-content>
+        <p class="chat-dialog__title">Private chat with {{showDialog.user}}</p> 
+        <ChatArea v-bind:messages="showDialog.msg"></ChatArea>
+      </md-dialog-content>
 
       <md-dialog-actions>
         <textarea
           class="chat-dialog__text"
           v-model="privateMessage"
+          :disabled="showDialog.closed"
           v-on:keyup.enter="sendPrivateMessage()"
         ></textarea>
       </md-dialog-actions>
+
+    </div>
+
     </md-dialog>
   </div>
 </template>
 
 
 <script>
+import ChatArea from "./ChatArea";
+
 export default {
   name: "ChatDialog",
+  components: {
+    ChatArea
+  },
   props: {
-    showDialog: Object
+    showDialog: Object,
+    videoCall: false
   },
   data: function() {
     return {
@@ -43,13 +60,23 @@ export default {
       this.$emit("close-chat");
     },
     sendPrivateMessage() {
-      console.log(`${this.$store.state.username} want to send a private message to ${this.showDialog.user}`
-      );
+      console.log(`${this.$store.state.username} want to send a private message to ${this.showDialog.user}`);
+
+      this.$socket.emit("privateMessage", {
+        privateMessage: this.privateMessage,
+        to: this.showDialog.user,
+        from: this.$store.state.username,
+        room: this.showDialog.room
+      });
+
+      this.privateMessage = "";
     }
   },
   watch: {
-    showDialog: function(newVal) {
-      if (newVal) {
+    showDialog: function(newVal, oldVal) {
+      const val = newVal.chat;
+      if (val && val !== oldVal.chat) {
+        
         // Open private chat
         this.$socket.emit("joinPrivateRoom", {
           ...this.$store.state,
@@ -74,6 +101,11 @@ button {
     height: 60px;
     border: 1px solid #8080804a;
   }
+  &__title{
+    text-align: center;
+    font-size: .9rem;
+    font-style: oblique;
+  }
 
   &__options {
     background: #00800073;
@@ -86,6 +118,17 @@ button {
   &__exit {
     float: right;
   }
+
+  &__right{
+        display: flex;
+    flex-flow: column;
+    flex: 1;
+    width: 300px;
+  }
+
+  &__left{
+    width: 300px;
+  }
 }
 </style>
 

src/components/UserList.vue

@@ -24,7 +24,6 @@ export default {
   props: {
     users: Array,
     openPrivateChat: Boolean
-
   },
   created() {},
   methods: {

src/styles/app.scss

@@ -5,13 +5,21 @@
 }
 
 .md-dialog{
+    // top: calc(100vh - 180px);
+    // right: -135px;
+    // height: 350px;
+    // left: unset;
+
     top: calc(100vh - 180px);
-    right: -135px;
     height: 350px;
+    position: fixed;
+    right: 6px;
+    transform: translate(0%,-50%);
     left: unset;
 }
 .md-dialog-container{
     border: 1px solid gainsboro;
+        flex-flow: row;
 }
 
 .md-dialog-actions {
@@ -29,4 +37,9 @@
 body{
     min-height: unset;
     overflow: hidden;
+}
+
+textarea:disabled {
+    cursor: not-allowed;
+    background: #80808021;
 }

src/views/Chat.vue

@@ -30,7 +30,7 @@
 
     <MessageArea v-on:send-message="sendMessage($event)"></MessageArea>
 
-    <ChatDialog v-bind:showDialog="openPrivateChat" v-on:close-chat="openPrivateChat.chat = false"></ChatDialog>
+    <ChatDialog v-bind:showDialog="openPrivateChat" v-on:close-chat="closePrivateChat()"></ChatDialog>
   </div>
 </template>
 
@@ -53,32 +53,66 @@ export default {
       this.users.length = 0;
       this.users = data;
     },
+
     newMessage: function({ message, username }) {
       const isMe = this.$store.state.username === username;
-      const msg = isMe
-        ? ` ${message}`
-        : `${username.toUpperCase()} - ${message} `;
-      const msgObj = {
-        msg,
-        own: isMe
-      };
+      const msg = isMe ? ` ${message}`: `${username.toUpperCase()} - ${message} `;
+      const msgObj = { msg, isMe };
       this.messages.push(msgObj);
     },
+
     privateChat: function({ username, to }) {
       const isMe = this.$store.state.username === to;
       if (isMe && !this.openPrivateChat.chat) {
-
         // Join private room
         this.$socket.emit("joinPrivateRoom", {
           to: this.$store.state.username,
-          room: this.$store.state.room,
+          room: null,
           username
         });
+      }
+    },
+
+    privateMessage: function({ privateMessage, to, from, room }) {
+      console.log(`New private message from ${from} in the room ${room}`);
+
+      // Open private chat with the info
+      if (!this.openPrivateChat.chat) {
+        this.openPrivateChat = {
+          ...this.openPrivateChat,
+          chat: true,
+          user: from,
+          room: room
+        };
+      }
+      // else if (
+      //   this.openPrivateChat.chat &&
+      //   this.$store.state.username !== to &&
+      //   this.openPrivateChat.room !== room &&
+      //   this.openPrivateChat.room !== from
+      // ) {
+      //   console.log("talking with someone else");
 
-        // open dialog
-        this.openPrivateChat.chat = true
-        this.openPrivateChat.user = username
+      //   return;
+      // }
 
+      const isMe = this.$store.state.username === to;
+      const msgObj = {
+        msg: privateMessage,
+        isMe: !isMe
+      };
+      this.openPrivateChat.msg.push(msgObj);
+    },
+
+    leavePrivateRoom: function({ privateMessage, to, from, room }) {
+      if (from === this.openPrivateChat.user) {
+        this.openPrivateChat.msg.push({
+          msg: privateMessage
+        });
+        this.openPrivateChat = {
+          ...this.openPrivateChat,
+          closed: true
+        };
       }
     }
   },
@@ -92,7 +126,10 @@ export default {
       messages: [],
       openPrivateChat: {
         chat: false,
-        user: null
+        user: null,
+        msg: [],
+        room: null,
+        closed: false
       }
     };
   },
@@ -113,10 +150,28 @@ export default {
     },
     openChat(user) {
       this.openPrivateChat = {
+        ...this.openPrivateChat,
         chat: true,
-        user: user
+        user: user,
+        room: user // The room is the username who talk with
+      };
+    },
+    closePrivateChat() {
+      // leavePrivate room emit
+      this.$socket.emit("leavePrivateRoom", {
+        room: this.openPrivateChat.room,
+        to: this.openPrivateChat.room,
+        from: this.$store.state.username
+      });
+
+      this.openPrivateChat = {
+        ...this.openPrivateChat,
+        chat: false,
+        closed: false,
+        user: null,
+        msg: [],
+        room: null
       };
-      console.log(user);
     }
   }
 };