我一直在努力让 vuejs 应用程序与远程、独立的 socket.io 服务器通信。我已经设法让 vuejs 应用程序将消息发送到 socket.io 服务器（通过 nodejs 实例上的控制台日志确认），我似乎得到了回复，但我似乎无法让它触发基于响应的代码。
我正在以最基本的形式使用 Vue-socket.io，并且我已将 localhost 和 null 添加到 origin 以希望排除该问题。
- 我在 localhost:3000 上运行 socket.io 服务器
- 我在 localhost:8888 上运行 vuejs 应用程序
为什么监听器没有在下面的代码中触发？我也没有在 app.vue 中获得任何 sockets.connect 和 sockets.customMessage 的控制台日志。
socket.io (nodejs) 服务器：
var http = require('http').createServer({
origins: ['localhost','null',null]
});
var io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('a user connected');
socket.broadcast.emit('hi, welcome to live chat');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chatMessage', (msg) => {
console.log('chatMessage: ' + msg);
io.emit('chatMessage', msg);
});
})
http.listen(3000, () => {
console.log('listening on port 3000');
});
app.js（vuejs 应用程序的入口点）：
import Vue from 'vue'
//import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://localhost:3000'
}))
new Vue({
render: h => h(App)
}).$mount('#app')
应用程序.vue：
<template>
<div>
hello chat app
<input type="text" v-model="message"/>
<button @click="clickButton()">Send Msg</button>
</div>
</template>
<script>
export default {
name: "Home",
sockets: {
connect: function () {
console.log('socket connected')
},
chatMessage: function(data) {
console.log('this method was fired by the socket server. eg: io.emit("chatMessage", data)')
}
},
methods: {
clickButton: function () {
console.log('button clicked');
console.log(this.message);
// $socket is socket.io-client instance
this.$socket.emit('chatMessage', this.message)
}
},
data: () => {
return {
message: '',
};
},
computed: {
},
mounted() {
this.$socket.on('chatMessage',data => {
console.log('listen fired')
console.log(data);
});
}
}
</script>
