我正在使用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}`)
})
})
发布于 2018-05-03 15:19:56
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://localhost:8070/');
这应该只在创建Vue实例之前执行一次。不在组件中。
由于您使用的是Vue-cli,所以应该在new Vue({})
之前在main.js
中完成
发布于 2018-08-12 00:59:32
import socketio from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
export const SocketInstance = socketio('http://localhost:8081');
Vue.use(VueSocketIO, SocketInstance)
发布于 2019-01-02 03:27:22
在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://stackoverflow.com/questions/50148977
复制相似问题