title: Why vue-socket.io doesn't send the message on the server,
body: <p>please help for my problem.  I try to create real-time chat on Vue, Vuex and NodeJS (initially, messages should be received through the POST method, then through the socket).  Why vue-socket.io doesn't send the message on the server?  How can i add event on vuex and do I need a socket.io-client for this?</p>
  
  <p>Vue main.js</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import store from './state/store.js'
  import Vuetify from 'vuetify'
  import 'vuetify/dist/vuetify.min.css'
  import VueSocketIO from 'vue-socket.io'
  
  Vue.use(Vuetify)
  Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://localhost:8080/message',
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  }
  }))
  new Vue({
    store,
    el: '#app',
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>app.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div id="app"&gt;
  &lt;div class="messagesTable"&gt;
    &lt;table&gt;
      &lt;tr v-for="(item, index) in allMessages" :key="index"&gt;
        &lt;td&gt;{{item.name}}&lt;/td&gt;
        &lt;td&gt;{{item.message}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;v-flex xs12 md4&gt;
    &lt;v-text-field
      v-model="name"
      label="Name"
      required
    &gt;&lt;/v-text-field&gt;
  &lt;/v-flex&gt;
  &lt;br&gt;
  &lt;v-flex xs12 md4&gt;
    &lt;v-text-field
      v-model="message"
      label="Message"
      required
    &gt;&lt;/v-text-field&gt;
  &lt;/v-flex&gt;
  &lt;br&gt;
  &lt;v-btn color="info" @click="createMessage"&gt;Send&lt;/v-btn&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
   name: 'app',
   data () {
     return {
       name: null,
       message: null
     }
   },
   computed: {
     allMessages(){
       return this.$store.getters.getAllMessages
     }
   },
   beforeMount(){
     this.$store.dispatch('loadAllMessages');
   },
   sockets: {
     connect(){
       console.log('socket connected');
     },
     message(message){
       this.$store.dispatch("addMessage", message);
     }
   },
   methods: {
     createMessage(){
       var message = {
         name: this.name,
         message: this.message
       }
       this.$socket.emit('anyMessage', message);
     }
    }
  }
  &lt;/script&gt;
  &lt;style&gt;
   .messagesTable{
   border: 1px solid black;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>index.js (from NodeJS)</p>
  
  <pre><code>const express = require('express');
  const app = express();
  const bodyParser = require('body-parser');
  const cors = require('cors');
  const socket = require('socket.io');
  const messageServise = require('./servise');
  var servise = new messageServise();
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended : false}));
  app.use(cors());
  
  var server = app.listen(8080,()=&gt;{
      console.log("Server is running at PORT 8080")
  });
  let io = socket(server);
  
  app.get('/message', (req, res) =&gt; {
      res.send(servise.getAll());
  });
  
  io.on("connection", (socket) =&gt; {
      console.log("Socket Connection Established with ID :"+ socket.id)
      socket.on('anyMessage', (message) =&gt; {
          console.log(message);
          servise.add(message);
          socket.broadcast.emit('message', message);
          socket.emit('message', message);
      })
    });
  </code></pre>