Redis (adrigardi90#6)

* 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

* Socket namespace

* Text fontsize

* Auto scroll

* Formatting

* Format

* Message fix

* Refactor

server/app.js

@@ -27,11 +27,9 @@ app.use((req, res, next) => {
 app.use('/auth', users)
 app.use('/rooms', rooms)
 
-
 // Static routing
 app.use(express.static(path.join(__dirname, '../dist')));
 
-
 /**
  * Chat socket namespace
  */

server/index.js

@@ -9,10 +9,15 @@ const server = http.createServer(app);
 
 // Atach server to the socket
 app.io.attach(server)
+
+// Origin socket configuration
 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 }));
+app.io.adapter(redis({ 
+    host: config.REDIS_HOST, 
+    port: config.REDIS_PORT 
+}));
 
 server.listen(config.PORT, () => {
     console.log(`Server Listening on port ${config.PORT}`)

src/components/ChatArea.vue

@@ -20,19 +20,45 @@
 export default {
   name: "ChatArea",
   props: {
-    messages: Array
+    messages: Array,
+    maxMessageLength: Number,
+    chatContainer: String
   },
   directives: {
     message: {
-      bind: function(el, binding) {
+      bind: function(el, binding, vnode) {
         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>`
+        let chunks
+        const maxLength = vnode.context.maxMessageLength
+
+        if(isObj) {
+          chunks = Math.ceil(binding.value.message.length / maxLength)
+          el.innerHTML = `<span style="font-weight:bold">${binding.value.username}</span>: 
+            ${vnode.context.getChunkText(binding.value.message, maxLength, chunks)}`
+        } else {
+          chunks = Math.ceil(binding.value.length / maxLength)
+          el.innerHTML = vnode.context.getChunkText(binding.value, maxLength, chunks)
+        }
+      }
+    }
+  },
+  methods: {
+    getChunkText(message, maxLength, index){
+      let newMessage= ''
+      for(let i = 0; i < index; i++){
+        const newChunk = message.slice(i*maxLength, maxLength*(i+1))
+        if (i!==0) newMessage += '<br>'
+        newMessage += `<span> ${newChunk} </span>`
       }
+      return newMessage
     }
   },
-  created() {}
+  watch: {
+    messages: function(){
+      const chatArea = document.getElementsByClassName(this.chatContainer)[0]
+      chatArea.scrollTop = chatArea.scrollHeight
+    }
+  }
 };
 </script>
 

src/components/ChatDialog.vue

@@ -33,7 +33,11 @@
         </div>
         <md-dialog-content>
           <p class="chat-dialog__title">Private chat with {{showDialog.user}}</p>
-          <ChatArea v-bind:messages="showDialog.msg"></ChatArea>
+          <ChatArea 
+            :messages="showDialog.msg"
+            :maxMessageLength="30"
+            :chatContainer="'md-dialog-content'">
+          </ChatArea>
         </md-dialog-content>
 
         <md-dialog-actions>
@@ -53,6 +57,7 @@
 <script>
 import ChatArea from "./ChatArea";
 import VideoArea from "./VideoArea";
+import { WS_EVENTS } from "./../utils/config";
 
 export default {
   name: "ChatDialog",
@@ -124,7 +129,7 @@ export default {
       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", {
+      this.$socket.emit(WS_EVENTS.privateMessage, {
         privateMessage: msg,
         to: this.showDialog.user,
         from: this.$store.state.username,
@@ -155,7 +160,7 @@ export default {
       const val = newVal.chat;
       if (val && val !== oldVal.chat ) {
         // Open private chat
-        this.$socket.emit("joinPrivateRoom", {
+        this.$socket.emit(WS_EVENTS.joinPrivateRoom, {
           ...this.$store.state,
           to: this.showDialog.user
         });

src/components/MessageArea.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="text-area">
     <div class="text-area__input">
-      <textarea name id cols="30" rows="10" v-model="message" @keyup.enter="sendMessage()"></textarea>
+      <textarea 
+        name id 
+        cols="30" 
+        rows="10" 
+        v-model="message" 
+        @keyup.enter="sendMessage()">
+      </textarea>
     </div>
     <div>
       <md-button class="md-primary" @click="sendMessage()">Send</md-button>

src/components/UserList.vue

@@ -17,8 +17,7 @@
             class="md-icon-button md-list-action"
             v-if="$store.state.username !== user.username"
             @click="openChat(user.username)"
-            :disabled="openPrivateChat === true"
-          >
+            :disabled="openPrivateChat === true">
             <md-icon class="md-primary">chat_bubble</md-icon>
           </md-button>
         </md-list-item>

src/components/VideoArea.vue

@@ -55,29 +55,22 @@ export default {
   }),
   async created() {
     this.username = this.$store.state.username;
+    await this.getUserMedia();
+    this.addLocalStream();
+    await this.getAudioVideo();
 
-    // Calling
-    if (!this.videoAnswer.video) {
-      await this.getUserMedia();
-      this.callFriend();
-
-      // Getting the call
-    } else {
-      await this.getUserMedia();
-      this.handleAnser();
-    }
+    !this.videoAnswer.video ? 
+      this.callFriend() : // Caller
+      this.handleAnser() // Callee
   },
   mounted() {
     this.myVideo = document.getElementById("localVideo");
     this.remoteVideo = document.getElementById("remoteVideo");
   },
   methods: {
     async callFriend() {
-      log(`${this.username} wants to start a call`);
-      await this.getAudioVideo();
-      this.createPeerConnection();
-      this.addLocalStream();
-
+      log(`${this.username} wants to start a call`);   
+      this.createPeerConnection();    
       // Event listeners
       this.onIceCandidates();
       this.onAddStream();
@@ -86,9 +79,7 @@ export default {
     },
     async handleAnser() {
       log(`${this.username} gets an offer from ${this.videoAnswer.from}`);
-      await this.getAudioVideo();
       this.createPeerConnection();
-      this.addLocalStream();
 
       // Event listeners
       this.onIceCandidates();
@@ -196,6 +187,7 @@ export default {
       try {
         log(`${this.username} added a candidate`);
         await this.pc.addIceCandidate(candidate);
+        log(`Candidate added`);
       } catch (error) {
         log(`Error adding a candidate in ${this.username}. Error: ${error}`)
       }

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import VueSocketIO from 'vue-socket.io'
-import VueResource from 'vue-resource';
+import VueResource from 'vue-resource'
 import './styles/app.scss'
 import { url } from './utils/config'
 
@@ -17,6 +17,7 @@ Vue.use(new VueSocketIO({
     mutationPrefix: 'SOCKET_'
   },
 }))
+
 // Vue resource for http
 Vue.use(VueResource)
 

src/store.js

@@ -23,8 +23,8 @@ export default new Vuex.Store({
       state.rooms = rooms
     },
     leaveChat(state) {
-      state.room = undefined,
-        state.username = undefined
+      state.room = undefined
+      state.username = undefined
     },
     changeStatus(state) {
       let nextStatus 

src/utils/config.js

@@ -14,7 +14,8 @@ export const WS_EVENTS = {
     publicMessage: 'publicMessage',
     leavePrivateRoom: 'leavePrivateRoom',
     leaveChat: 'leaveChat',
-    changeStatus: 'changeStatus'
+    changeStatus: 'changeStatus',
+    privateMessage: 'privateMessage'
 }
 
 export const STATUS_OPTIONS = {

src/views/Chat.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page-container">
+
     <div class="md-layout-item">
       <md-field>
         <label for="room">Room</label>
@@ -29,14 +30,23 @@
         ></UserList>
       </md-app-drawer>
 
-      <md-app-content>
-        <ChatArea :messages="messages"></ChatArea>
+      <md-app-content id="chat-content">
+        <ChatArea 
+          :messages="messages"
+          :maxMessageLength="120"
+          :chatContainer="'md-app-scroller'">
+        </ChatArea>
       </md-app-content>
     </md-app>
 
-    <MessageArea @send-message="sendMessage($event)"></MessageArea>
+    <MessageArea 
+      @send-message="sendMessage($event)">
+    </MessageArea>
 
-    <ChatDialog :showDialog="openPrivateChat" @close-chat="closePrivateChat()"></ChatDialog>
+    <ChatDialog 
+      :showDialog="openPrivateChat" 
+      @close-chat="closePrivateChat()">
+    </ChatDialog>
   </div>
 </template>
 

src/views/Home.vue

@@ -5,19 +5,31 @@
       <form novalidate class="md-layout" @submit.prevent="submitForm">
         <md-field>
           <label>Username</label>
-          <md-input v-model="username" type="string" id="username"></md-input>
+          <md-input 
+            v-model="username" 
+            type="string" 
+            id="username">
+          </md-input>
         </md-field>
         <md-field>
           <label for="movie">Room</label>
           <md-select v-model="room" name="room" id="room">
-            <md-option v-for="room in rooms" :key="room.id" :value="room.name">{{room.name}}</md-option>
+            <md-option 
+              v-for="room in rooms" 
+              :key="room.id" 
+              :value="room.name">{{room.name}}
+            </md-option>
           </md-select>
         </md-field>
         <div v-if="error" class="options-error">
           <p>{{error}}</p>
         </div>
         <div class="options__submit">
-          <md-button type="submit" class="md-raised md-primary" :disabled="!(username && room)">JOIN</md-button>
+          <md-button 
+            type="submit" 
+            class="md-raised md-primary" 
+            :disabled="!(username && room)">JOIN
+          </md-button>
         </div>
       </form>
     </div>
@@ -29,52 +41,48 @@ import { url, STORE_ACTIONS } from "./../utils/config";
 
 export default {
   name: "home",
-  components: {},
   data: function() {
     return {
       username: undefined,
       room: undefined,
       rooms: [],
-      error: undefined
+      error: undefined,
+      defaultError: 'Something went wrong' 
     };
   },
   async created() {
     try {
-      const data = await this.$http.get(`http://${url}/rooms`);
+      const data = await this.$http.get(`http://${url}/rooms`)
       this.rooms = data.body;
-      this.$store.dispatch(STORE_ACTIONS.setRooms, this.rooms);
+      this.$store.dispatch(STORE_ACTIONS.setRooms, this.rooms)
     } catch (error) {
+      this.error = this.defaultError
       console.log(error);
     }
   },
   methods: {
     async submitForm() {
       if(!(this.username && this.room)) return;
-
       this.error = undefined
+      
       const data = {
         room: this.room,
         username: this.username
-      };
+      }
 
       try {
-        let response = await this.$http.post(`http://${url}/auth/login`, data);
+        let response = await this.$http.post(`http://${url}/auth/login`, data)
         if (response.body.code === 400 || response.body.code === 401 || response.body.code === 500) {
           this.error = response.body.message
           return 
         }
-
-        this.$store.dispatch(STORE_ACTIONS.joinRoom, data);
-        this.$router.push("/chat");
+        this.$store.dispatch(STORE_ACTIONS.joinRoom, data)
+        this.$router.push("/chat")
       } catch (error) {
-        console.log(error);
+        this.error = this.defaultError
+        console.log(error)
       }
     }
-  },
-  computed: {
-    isEmpty: function() {
-      return !(this.username && this.room);
-    }
   }
 };
 </script>