Further improvements on sockets.

Client/src/components/Projects/ViewProjects.vue

@@ -169,16 +169,15 @@
             <v-list two-line>
               <template v-for="(item, index) in messages">
                 <v-list-tile
-                  @click="toggle(index)"
-                  :key="item.title"
+                  :key="index"
                 >
                   <v-list-tile-content>
-                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+                    <v-list-tile-title>{{ item.username }}</v-list-tile-title>
                     <v-list-tile-sub-title class="text--primary">{{ item.headline }}</v-list-tile-sub-title>
-                    <v-list-tile-sub-title>{{ item.subtitle }}</v-list-tile-sub-title>
+                    <v-list-tile-sub-title>{{ item.text }}</v-list-tile-sub-title>
                   </v-list-tile-content>
                   <v-list-tile-action>
-                    <v-list-tile-action-text>{{ item.action }}</v-list-tile-action-text>
+                    <v-list-tile-action-text>{{ }}</v-list-tile-action-text>
                   </v-list-tile-action>
                 </v-list-tile>
                 <v-divider v-if="index + 1 < messages.length" :key="index"></v-divider>
@@ -189,12 +188,15 @@
         <div class="layout row">
           <v-flex md11>
             <v-text-field
+              v-model="textMessage"
               label="Enter your message here"
             ></v-text-field>
           </v-flex>
           <v-flex md1>
             <div class="text-xs-right">
-              <v-btn>Send</v-btn>
+              <v-btn
+                @click="startConnection"
+              >Send</v-btn>
             </div>
           </v-flex>
         </div>
@@ -220,6 +222,7 @@
         date1: new Date(Date.now()).toISOString().slice(0, 10),
         events: [],
 
+        textMessage: '',
         messages: []
 
       }
@@ -307,22 +310,29 @@
             this.events.push(obj.deadline);
           }
         }
+      },
+
+      startConnection() {
+        const socket = io('http://localhost:3000');
+        socket.emit('my other event', {username: this.cUser.Username, text: this.textMessage});
+        socket.on('hello', (data) => {
+          console.log(data.messages[0]);
+          this.messages.push(data.messages[0]);
+        });
       }
 
     },
 
     mounted() {
       this.getProject();
-      const socket = io('http://localhost:3000');
-      socket.on('hello', (data) => {
-        console.log(data);
-        socket.emit('my other event', {my: 'data'})
-      });
+      this.startConnection();
 
 
     },
 
-    computed: {}
+    computed: {
+
+    }
   }
 
 </script>

Server/app.js

@@ -20,10 +20,14 @@ app.use(bodyParser.json());
 const io = socketIO(server);
 
 //socket.io connection
-io.on('connection',(socket)=>{
-    socket.emit('hello', {
-        greeting: 'Hello Rakhitha'
-    })
+io.on('connection', (socket) => {
+    var projRef = firebase.database.ref('/messages');
+    projRef.once("value", (snapshot) => {
+        socket.emit('hello', {
+            messages: snapshot.val()
+        })
+    });
+
     socket.on('my other event', function (data) {
         console.log(data);
     });
@@ -33,22 +37,22 @@ io.on('connection',(socket)=>{
 const users = require('./routes/user');
 const project = require('./routes/project');
 
-app.use('/users',users);
+app.use('/users', users);
 app.use('/project', project);
 
 
-app.get('/',(req,res) => {
+app.get('/', (req, res) => {
     res.send("Invalid Endpoint");
 });
 
 
 //firebase connection check
 var fireConnection = firebase.database.ref('.info/connected');
-fireConnection.on("value", (con) =>{
-    if(con.val() === true){
+fireConnection.on("value", (con) => {
+    if (con.val() === true) {
         console.log("Connected to Firebase...");
     }
-    else{
+    else {
         console.log("Not connected to Firebase!");
     }
 });