我正在使用 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}`) 
  }) 
}) 

请您参考如下方法:

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

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

由于您使用的是 Vue-cli webpack，因此应该在 new Vue({}) 之前在 main.js 中完成