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

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

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.

Answer 2

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!