add working groups sender

4 files changed, 49 insertions, 4 deletions

diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue
index 160ca76..ba36949 100644
--- a/src/components/group/GroupSender.vue
+++ b/src/components/group/GroupSender.vue
@@ -19,12 +19,13 @@ export default {
   data() {
     return {
       message: "",
-      messages: []
+      messages: [],
     }
   },
 
   props: {
-    group: Object
+    group: Object,
+    socket: Object
   },
 
   methods: {
@@ -35,6 +36,7 @@ export default {
     send_message(e) {
       e.preventDefault()
       console.log(this.message)
+      this.socket.emit("send_group_message", {message: this.message, group: this.group})
       this.message = ""
     },
 
@@ -45,6 +47,11 @@ export default {
 
       if(status===200)
         this.messages = data.messages
+    },
+
+    push_message(message) {
+      if(message.receiver == this.group.id)
+        this.messages.push(message)
     }
   },
 
@@ -56,6 +63,10 @@ export default {
     this.$nextTick(function () {
       this.$refs.input.focus()
 
+      this.socket.emit("join_group", {group_id: this.group.id})
+      this.socket.on("receive_group_message", ({message}) => {
+        this.push_message(message)
+      })
       this.get_messages()
     })
   }
@@ -63,5 +74,12 @@ export default {
 </script>
 
 <style scoped>
+.group_view {
+  width: 25%;
+}
 
+.messages {
+  overflow:auto;
+  height: 300px;
+}
 </style>
diff --git a/src/components/group/Message.vue b/src/components/group/Message.vue
index 56e2805..eedcc6e 100644
--- a/src/components/group/Message.vue
+++ b/src/components/group/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="message">
+  <div class="message" :class="{mine: is_message_mine}">
       <div class="sender">{{ get_message_user }}</div>
       <div class="content">{{ get_message_content }}</div>
       <div class="date">{{ get_message_date }}</div>
@@ -19,6 +19,8 @@ export default {
       let date = new Date(this.message.create_date)
       return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}`
     },
+
+    is_message_mine() { return this.message.is_mine }
   },
 
   created() {
@@ -31,5 +33,11 @@ export default {
 <style scoped>
 .message {
   width: 100%;
+  margin-bottom: 10px;
+  color: white;
+}
+
+.mine {
+  color: red;
 }
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 02e3efa..c131271 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -29,6 +29,10 @@ const store = new Vuex.Store({
      
     get_user: (state) => {
       return state.user
+    },
+
+    get_token: (state) => {
+      return state.token
     }
   },
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7bd99a2..d85760b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,6 +5,7 @@
       <div v-for="group in groups" :key="group.name" >
           <GroupSender
               :group="group"
+              :socket="socket"
           />
       </div>
 
@@ -26,6 +27,7 @@
 import Searcher from '@/components/searcher/Searcher.vue'
 import GroupMaker from '@/components/group/GroupMaker.vue'
 import GroupSender from  '@/components/group/GroupSender.vue'
+import io from 'socket.io-client'
 
 const popups = {
     searcher_show: false,
@@ -36,7 +38,8 @@ export default {
   data() {
     return {
         popups,
-        groups: []
+        groups: [],
+        socket: Object
     }
   },
 
@@ -92,6 +95,18 @@ export default {
     if(!this.$store.getters['is_logged_in']) {
       this.$router.push('/login')
     }
+
+    this.socket = io()
+    this.socket.auth = { token: this.$store.getters.get_token };
+    this.socket.connect();
+
+    this.socket.on("connect", () => {
+        console.log("Socket connected!")
+    });
+
+    this.socket.on("disconnect", () => {
+        console.log("Scoket dsiconected")
+    })
   }
   
 }