init

Author: annibuliful

package.json

@@ -8,7 +8,10 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "socket.io": "^2.2.0",
+    "socket.io-client": "^2.2.0",
+    "vue": "^2.6.10",
+    "vue-socket.io": "^3.0.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",

src/App.vue

@@ -1,17 +1,47 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div>
+      <input v-model="message">
+    <button @click="createNewMessage">Send</button>
+      <ul v-for="(value,index) in listMessage" :key="index">
+        <li>{{value}}</li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'app',
-  components: {
-    HelloWorld
+  data(){
+    return{
+      listMessage: [],
+      message: ''
+    }
+  },
+  created(){
+    console.log(this.$socket);
+    this.sockets.subscribe('message',(data)=>{
+      console.log(data);
+      this.listMessage = [...this.listMessage,data];
+    })
+  },
+  sockets: {
+    connect() {
+      console.log('connectwwwww')
+    },
+
+    disconnect() {
+      console.log('disconnectssssss')
+    }
+  },
+  methods:{
+    createNewMessage(){
+      console.log('sss')
+      this.$socket.emit('message',this.message);
+      this.listMessage.push(`You : ${this.message}`)
+    }
   }
 }
 </script>

src/main.js

@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import VueSocketIO from 'vue-socket.io';
 
-Vue.config.productionTip = false
-
+Vue.use(new VueSocketIO({
+  // debug: true,
+  connection: 'http://localhost:3030',
+}))
 new Vue({
   render: h => h(App),
 }).$mount('#app')