vue-socket.io 应用没有收到来自 express socket.io 应用的发射
vue-socket.io app not receiving emit from express socket.io app
我正在尝试在使用 socket.io (localhost:8000) 的快速应用程序和使用 vue-socket.io (localhost:8080) 的 vue 应用程序之间创建 socket.io 通信。 Express 应用程序正在接收来自 vue 应用程序的排放,但反之则不然。这是我的快速应用程序,但我很确定问题出在 vue 应用程序中:
后端快递
const port = 8000
const express = require("express")
const socket = require("socket.io")
const app = express()
const server = app.listen(port, () => {
console.log(`App is lisening to port ${port}...`)
} )
const io = socket(server)
io.on("connection", (socket) => {
console.log("connected to " + socket.id) //this is successfully getting logged
socket.on("chat", (msg) => {
console.log(socket.id + ": " + msg) //this is successfully getting logged when I click send
io.sockets.emit("chat", msg)
} )
} )
我猜问题出在下面的某处:
前端 Vue(使用 CLI)
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO( {
debug: true,
connection: SocketIO('http://localhost:8000')
} )
)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
聊天组件(Chat.vue)
<template lang="html">
<div>
<input type="text" v-model="input"/>
<button @click="send">Send</button>
</div>
</template>
<script>
export default {
sockets: {
//These dont work, nothing is printed to the console
connect: function () {
console.log('socket connected')
},
chat: function (msg) {
console.log("chat message recieved!: " + msg)
}
},
data(){
return {
input: ""
}
},
methods: {
send(){
this.$socket.emit('chat', this.input) //This works and is recieved by the express app!
}
}
}
</script>
我已经试了一天了,但没有成功。
再一次,我唯一的目标是能够在 Express 应用程序前接收排放。作为旁注,如果有更好的方法在不使用 vue-socket.io 的情况下在 vue 中使用 socket.io,我很乐意调查。
我可以通过使用 vue-socket.io-extended instead of vue-socket.io 来简单地完成这项工作。就是这样,不需要对代码进行重大更改。我知道从技术上讲,这并不能解决使用 vue-socket.io 的问题,但在有人弄清楚之前,我会将其作为未来搜索者的答案。
我正在尝试在使用 socket.io (localhost:8000) 的快速应用程序和使用 vue-socket.io (localhost:8080) 的 vue 应用程序之间创建 socket.io 通信。 Express 应用程序正在接收来自 vue 应用程序的排放,但反之则不然。这是我的快速应用程序,但我很确定问题出在 vue 应用程序中:
后端快递
const port = 8000
const express = require("express")
const socket = require("socket.io")
const app = express()
const server = app.listen(port, () => {
console.log(`App is lisening to port ${port}...`)
} )
const io = socket(server)
io.on("connection", (socket) => {
console.log("connected to " + socket.id) //this is successfully getting logged
socket.on("chat", (msg) => {
console.log(socket.id + ": " + msg) //this is successfully getting logged when I click send
io.sockets.emit("chat", msg)
} )
} )
我猜问题出在下面的某处:
前端 Vue(使用 CLI)
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO( {
debug: true,
connection: SocketIO('http://localhost:8000')
} )
)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
聊天组件(Chat.vue)
<template lang="html">
<div>
<input type="text" v-model="input"/>
<button @click="send">Send</button>
</div>
</template>
<script>
export default {
sockets: {
//These dont work, nothing is printed to the console
connect: function () {
console.log('socket connected')
},
chat: function (msg) {
console.log("chat message recieved!: " + msg)
}
},
data(){
return {
input: ""
}
},
methods: {
send(){
this.$socket.emit('chat', this.input) //This works and is recieved by the express app!
}
}
}
</script>
我已经试了一天了,但没有成功。
再一次,我唯一的目标是能够在 Express 应用程序前接收排放。作为旁注,如果有更好的方法在不使用 vue-socket.io 的情况下在 vue 中使用 socket.io,我很乐意调查。
我可以通过使用 vue-socket.io-extended instead of vue-socket.io 来简单地完成这项工作。就是这样,不需要对代码进行重大更改。我知道从技术上讲,这并不能解决使用 vue-socket.io 的问题,但在有人弄清楚之前,我会将其作为未来搜索者的答案。