【问题标题】:Why vue-socket.io doesn't send the message on the server, [closed]为什么 vue-socket.io 不在服务器上发送消息,[关闭]
【发布时间】:2019-09-04 19:17:56
【问题描述】:

请帮助解决我的问题。我尝试在 Vue、Vuex 和 NodeJS 上创建实时聊天(最初,应该通过 POST 方法接收消息,然后通过套接字)。为什么 vue-socket.io 不在服务器上发送消息?我如何在 vuex 上添加事件,我需要一个 socket.io-client 吗?

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);
    })
  });

【问题讨论】:

  • const messageServise = require('./servise'); 来自哪里?看起来拼写错误..(不确定这是不是故意的)

标签: node.js rest vue.js socket.io vuex


【解决方案1】:

打扰了,main.js中的参数“connection”应该是http://localhost:8080

【讨论】:

    猜你喜欢
    • 2014-03-16
    • 1970-01-01
    • 1970-01-01
    • 2012-04-22
    • 2013-06-30
    • 1970-01-01
    • 2012-11-18
    • 2013-09-09
    • 1970-01-01
    相关资源
    最近更新 更多