Redis new features(adrigardi90#3)

* Set and getAll users

* Redis integration and compose

* User redis managment

* Docker compose config for scalling

* Get rooms

* Readme

* Readme

* Logout

* User status

* Tunning

* Tunning

* Deploy config

* Send message

aws/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:8.6 as build
+
+WORKDIR /videochat
+COPY package.json /videochat/
+COPY /aws/default.conf /etc/nginx/conf.d
+RUN npm install
+
+COPY /server /videochat/server
+
+CMD ["npm", "run", "run:server"]

aws/default.conf

@@ -0,0 +1,13 @@
+server {
+    listen       80;
+
+    add_header Access-Control-Allow-Origin *;
+
+    location / {
+        proxy_pass http://localhost:4000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}

docker-compose.aws.yml

@@ -0,0 +1,32 @@
+version: '3'
+
+services:
+
+  redis:
+    image: redis:4.0.5-alpine
+    networks:
+      - video-chat
+    ports:
+      - 6379:6379
+    expose:
+      - "6379"
+    restart: always
+    command: ["redis-server", "--appendonly", "yes"]
+
+  chat-service:
+    build: 
+      context: .
+      dockerfile: ./aws/Dockerfile
+    ports: 
+      - 4000:4000
+    networks:
+      - video-chat
+    depends_on:
+      - redis
+    environment:
+      PORT: 4000
+      REDIS_HOST: redis
+      REDIS_PORT: 6379
+
+networks:
+  video-chat:

server/app.js

@@ -24,7 +24,7 @@ app.use((req, res, next) => {
 /**
  * Routing
  */
-app.use('/user', users)
+app.use('/auth', users)
 app.use('/rooms', rooms)
 
 

server/chat_namespace/events.js

@@ -1,26 +1,43 @@
 
 const ChatRedis = require('../redis')
 
-const joinRoom = (socket, namespace) => ({ username, room }) => {
+const joinRoom = (socket, namespace) => ({ username, room, status }) => {
     console.log(`user ${username} wants to join the room ${room}`);
 
     // Join the room
     socket.join(room, () => {
         console.log(`user ${username} joined the room ${room}`);
 
         // add user for the suitable ROOM
-        ChatRedis.addUser(room, socket.id, { username: username, privateChat: false })
+        ChatRedis.addUser(room, socket.id, {
+            username,
+            status,
+            privateChat: false
+        })
 
         ChatRedis.getUsers(room).then(users => {
             if (users === null) return
 
             // Notify all the users in the same room
-            namespace.sockets.in(room).emit('newUser', users);
+            namespace.sockets.in(room).emit('newUser', { users, username });
         })
     });
 
 }
 
+const changeStatus = (socket, namespace) => ({ username, status, room }) => {
+    console.log(`user ${username} wants to change his status to ${status}`);
+
+    ChatRedis.getUser(room, socket.id)
+        .then(user => ChatRedis.setUser(room, socket.id, { ...user, status }))
+        .then(() => ChatRedis.getUsers(room))
+        .then(users => {
+            if (users === null) return
+            // Notify all the users in the same room
+            namespace.sockets.in(room).emit('newUser', { users, username });
+        })
+}
+
 const publicMessage = (namespace) => ({ room, message, username }) => {
     namespace.sockets.in(room).emit('newMessage', {
         message,
@@ -44,12 +61,34 @@ const leaveRoom = (socket, namespace) => ({ room, username }) => {
                 if (users === null) return
 
                 // Notify all the users in the same room
-                namespace.sockets.in(room).emit('newUser', users);
+                namespace.sockets.in(room).emit('newUser', { users, username });
             })
 
     })
 }
 
+const leaveChat = (socket, namespace) => ({ room, username }) => {
+    console.log(`user ${username} wants to leave the chat`);
+
+    ChatRedis.delUser(room, socket.id)
+        .then(data => {
+            if (data === null) return null
+            return ChatRedis.getUsers(room);
+        })
+        .then(users => {
+            if (users === null) return
+
+            // Notify all the users in the same room
+            namespace.sockets.in(room).emit('leaveChat', { users, username });
+
+            // Leave the socket
+            socket.leave(room, () => {
+                console.log(`user ${username} left the room ${room}`);
+            })
+        })
+}
+
+
 const joinPrivateRoom = (socket, namespace) => ({ username, room, to }) => {
     console.log(`user ${username} wants to have a private chat with ${to}`);
 
@@ -148,5 +187,7 @@ module.exports = {
     joinPrivateRoom,
     leavePrivateRoom,
     privateMessage,
-    privateMessagePCSignaling
+    privateMessagePCSignaling,
+    leaveChat,
+    changeStatus
 }

server/chat_namespace/index.js

@@ -18,6 +18,9 @@ const onConnection = (socket) => {
     // Leave room
     socket.on('leaveRoom', events.leaveRoom(socket, namespace))
 
+    // Leave room
+    socket.on('leaveChat', events.leaveChat(socket, namespace))
+
     // Listening for private chats
     socket.on('joinPrivateRoom', events.joinPrivateRoom(socket, namespace));
 
@@ -30,6 +33,9 @@ const onConnection = (socket) => {
     // Private message for Signaling PeerConnection
     socket.on('privateMessagePCSignaling', events.privateMessagePCSignaling(namespace))
 
+    // Set status
+    socket.on('changeStatus', events.changeStatus(socket, namespace))
+
 }
 
 exports.createNameSpace = (io) => {

server/config/index.js

@@ -3,7 +3,8 @@ const CONFIG = {
     PORT: process.env.PORT || 3000,
     CHAT_NAMESPACE: '/chat',
     REDIS_HOST: process.env.REDIS_HOST || 'localhost',
-    REDIS_PORT: process.env.REDIS_PORT || 6379
+    REDIS_PORT: process.env.REDIS_PORT || 6379,
+    ORIGINS: process.env.ORIGINS || '*:*'
 }
 
 module.exports = CONFIG

server/index.js

@@ -9,6 +9,10 @@ const server = http.createServer(app);
 
 // Atach server to the socket
 app.io.attach(server)
+app.io.origins([config.ORIGINS])
+
+// Using the adapter to pass event between nodes
+app.io.adapter(redis({ host: config.REDIS_HOST, port: config.REDIS_PORT }));
 
 // Using the adapter to pass event between nodes
 app.io.adapter(redis({ host: config.REDIS_HOST, port: config.REDIS_PORT }));

server/routes/user.js

@@ -2,13 +2,33 @@
 const express = require('express');
 const userRouter = express.Router();
 
+// users in memory
+let loggedUsers = []
 
 // Login
+userRouter.post('/login', (req, res) => {
+    const newuser = req.body
+    if(!newuser.username) return res.send({code: 400, message: 'Data is required'})
 
+    console.log(`Login user ${newuser.username}`)
+
+    const isLoggedIn = loggedUsers.some( user => user.username === newuser.username)
+    if(isLoggedIn) return res.send({code: 401, message: 'Username already exists'})
+    loggedUsers.push(req.body)
+    res.send({code: 200, message: 'Logged in succesfully'})
+})
 
 // Logout
-userRouter.get('/', () => {
-    console.log('ok')
+userRouter.post('/logout', (req, res) => {
+    const logoutUser = req.body
+
+    const i = loggedUsers.findIndex( user => user.username === logoutUser.username)
+    if(i < 0) return res.send({code: 400, message: 'User not found'})
+
+    console.log(`Logout user ${logoutUser.username}`)
+
+    loggedUsers.splice(i, 1)
+    res.send({code: 200, message: 'Logged in succesfully'})
 })
 
 

src/components/ChatArea.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="message">
     <div v-for="msg in messages" :key="msg.msg" class="message__container">
-      <p class="message__text" :class="{ own: msg.isMe, other: !msg.isMe}">{{msg.msg}}</p>
+      <p
+        v-if="!msg.join"
+        class="message__text"
+        :class="{ own: msg.isMe, other: !msg.isMe}"
+        v-message="msg.msg"
+      ></p>
+      <p 
+        v-if="msg.join"
+        class="message__joined"> 
+        {{msg.msg}}</p>
     </div>
   </div>
 </template>
@@ -13,6 +22,16 @@ export default {
   props: {
     messages: Array
   },
+  directives: {
+    message: {
+      bind: function(el, binding) {
+        const isObj = typeof binding.value === 'object'
+        isObj ? 
+          el.innerHTML = `<span style="font-weight:bold">${binding.value.username}</span>: ${binding.value.message}`:
+          el.innerHTML = `<span>${binding.value}</span>`
+      }
+    }
+  },
   created() {}
 };
 </script>
@@ -21,6 +40,14 @@ export default {
 .message {
   &__text {
     width: max-content;
+    padding: 0px 7px;
+    border-radius: 10px;
+  }
+
+  &__joined{
+    font-size: 0.9rem;
+    font-style: oblique;
+    margin: 0 auto;
   }
 
   &__container {

src/components/ChatDialog.vue

@@ -41,7 +41,7 @@
             class="chat-dialog__text"
             v-model="privateMessage"
             :disabled="showDialog.closed"
-            @keyup.enter="sendPrivateMessage()">
+            @keyup.enter="sendPrivateMessage(privateMessage)">
           </textarea>
         </md-dialog-actions>
       </div>
@@ -119,10 +119,13 @@ export default {
       };
       this.videoCall = true;
     },
-    sendPrivateMessage() {
+    sendPrivateMessage(msg) {
+      // Do not send empty messages
+      if(typeof msg !== "object" && this.privateMessage.replace(/\s/g, "").length === 0) return
+
       console.log(`${this.$store.state.username} want to send a private message to ${this.showDialog.user}`);
       this.$socket.emit("privateMessage", {
-        privateMessage: this.privateMessage,
+        privateMessage: msg,
         to: this.showDialog.user,
         from: this.$store.state.username,
         room: this.showDialog.room
@@ -144,8 +147,7 @@ export default {
         candidate: undefined,
         close: false
       };
-      this.privateMessage = { msg:`${this.$store.state.username} has closed the video`}
-      this.sendPrivateMessage()
+      this.sendPrivateMessage({msg:`${this.$store.state.username} has closed the video`})
     },
   },
   watch: {

src/components/MessageArea.vue

@@ -21,7 +21,8 @@ export default {
   },
   methods: {
     sendMessage() {
-      this.$emit("send-message", this.message);
+      const msg = this.message.replace(/\n/g,'')
+      this.$emit("send-message", msg);
       this.message = "";
     }
   }
@@ -34,17 +35,21 @@ export default {
   width: 85%;
   margin: 0 auto;
   display: flex;
-  //max-width: 85%;
   max-width: 1300px;
-  margin-top: 1rem;
+  margin-top: 5px;
 
   &__input {
     width: 100%;
     & textarea {
       width: 100%;
-      height: 59px;
+      height: 45px;
       border-color: rgba(0, 0, 0, 0.12);
     }
+  } 
+
+  & .md-button.md-theme-default.md-primary {
+    background: #3961a5;
+    color: white;
   }
 }
 </style>