Vuejs not firing code when receiving message from socket.io server - node.js

Question

I've been working on allowing a vuejs app talk to a remote, standalone socket.io server. I've managed to get the vuejs app to send messages to the socket.io server (confirmed through console logs on the nodejs instance), and I appear to be getting the responses back, but I can't seem to get it to fire code based on the responses.
I'm using Vue-socket.io, in the most basic form and i've added localhost and null to origins to hopefully rule out that issue.
I'm running socket.io server on localhost:3000
I'm running vuejs app
on localhost:8888
Why aren't the listeners firing in the following code? I also don't get any of the console logs for sockets.connect and sockets.customMessage in app.vue.
socket.io (nodejs) server:
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 (entry point for vuejs app):
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')
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>

Answer 1

I created an VueApp, then copied, pasted your code to use. It's working well.
Checked in network tab on browser, the vueApp connected to the socket on localhost:3000 - check this image: https://prnt.sc/skbglc
Console tab: https://prnt.sc/skbhjz
Sent a message: https://prnt.sc/skbi1y https://prnt.sc/skbiij
Got the message from server: https://prnt.sc/skbj19
So what I changed in your code is just: comment out the unused code:
Hope this helps!

Answer 2

Can you try to put this configuration in your app.js
Just add a option for connection, and use it when instantiating the VueSocketIO instance.
const options = { path: '/socket.io/' }; //<--
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://localhost:3000',
options //<--
})
);
And try again? If it does not work, I can post mine solution.