Почему vue-socket.io не отправляет сообщение на сервер, - PullRequest
Новая
       18

Почему vue-socket.io не отправляет сообщение на сервер,

0 голосов
/ 14 апреля 2019

пожалуйста, помогите для моей проблемы.Я пытаюсь создать чат в реальном времени на Vue, Vuex и NodeJS (сначала сообщения должны быть получены методом POST, затем через сокет).Почему vue-socket.io не отправляет сообщение на сервер?Как я могу добавить событие на vuex и нужен ли для этого сокет-клиент?

Vue main.js 

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 => h(App)
})

app.vue 

<template>
<div id="app">
<div class="messagesTable">
  <table>
    <tr v-for="(item, index) in allMessages" :key="index">
      <td>{{item.name}}</td>
      <td>{{item.message}}</td>
    </tr>
  </table>
</div>
<br>
<v-flex xs12 md4>
  <v-text-field
    v-model="name"
    label="Name"
    required
  ></v-text-field>
</v-flex>
<br>
<v-flex xs12 md4>
  <v-text-field
    v-model="message"
    label="Message"
    required
  ></v-text-field>
</v-flex>
<br>
<v-btn color="info" @click="createMessage">Send</v-btn>
 </div>
</template>
<script>
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);
   }
  }
}
</script>
<style>
 .messagesTable{
 border: 1px solid black;
}
</style>

index.js (из NodeJS) 

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,()=>{
    console.log("Server is running at PORT 8080")
});
let io = socket(server);

app.get('/message', (req, res) => {
    res.send(servise.getAll());
});

io.on("connection", (socket) => {
    console.log("Socket Connection Established with ID :"+ socket.id)
    socket.on('anyMessage', (message) => {
        console.log(message);
        servise.add(message);
        socket.broadcast.emit('message', message);
        socket.emit('message', message);
    })
  });

1 Ответ

0 голосов
/ 15 апреля 2019

Извините за беспокойство, параметр "connection" в main.js должен быть http://localhost:8080.

...