Question

我正在使用Vue-cli webpack模板生成关于使用socket.io的聊天室的项目。

当我点击按钮时，我用一个简单的实例测试了它，客户端将向服务器端发送参数。但是当我点击按钮时服务器端没有任何东西。

有谁可以告诉我我的编码是什么问题？我该怎么做才能解决这个问题？

非常感谢！

这是客户端

<template>
 <div id="app">
 <input type='button' value='button' @click='clickButton()'>
</div>
</template>

<script>
  import Vue from 'vue'
  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

  export default {
    name: 'app',
    data() {
      return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  sockets: {
    connect: function() {
     console.log('socket connected')
  },
  customEmit: function(val) {
     console.log('this method was fired by the socket server. eg: 
     io.emit("customEmit", data)')
    }
  },
  methods: {
     clickButton: function(val) {
     // $socket is socket.io-client instance
     this.$socket.emit('a', 12, 5);
  }
  }
  }
  </script>

这是服务器

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io');

server.listen(8070);

const ws = io.listen(server);

ws.on('connection',(sock)=>{
  sock.on('a',(num1,num2)=>{
    console.log(`${num1},${num2}`)
  })
})

Answer 1

  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

在创建Vue实例之前，这应该只执行一次。不在组件中。

由于您使用的是Vue-cli webpack，因此应在main.js

之前new Vue({})完成

Answer 2

import socketio from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
export const SocketInstance = socketio('http://localhost:8081');
 Vue.use(VueSocketIO, SocketInstance)

Answer 3

在main.js中导入vue-socket.io软件包之后，您可能必须将其实例化为新类

import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({ 
  connection: io('localhost') 
}))

根据文档https://www.npmjs.com/package/vue-socket.io

如何从Vue.js组件连接到socket.io？

3 个答案: