I'm following the instructions on the vue-socket.io npm download page. However, I can't get the this.$socket.emit method to work.

I have this in my Main.vue ponent:

sockets: {
    connect() {
        console.log('socket connected')
    },
    getAllOnline(token) {
        console.log(`Your token is ${token}`)
    }
},
created() {
    this.$socket.emit('getAllOnline', '123213')
}

I set up VueSocketio in my main.js file like this:

import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://localhost:8080/');

I'm expecting to log whatever value was passed to the getAllOnline() function. But only the connect() callback in sockets object is being triggered.

Why isn't the callback for the getAllOnline emit being triggered?

Complete main.js file:

// require some files
require('./assets/css/reset.css')
require('./assets/css/mon.css')

// The Vue build version to load with the `import` mand
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import VueSocketio from 'vue-socket.io';

// Files import
import Main from './ponents/Main'
import Auth from './ponents/Auth'
import Register from './ponents/Register'

// Config of Vue
Vue.config.productionTip = false
Vue.config.devtools = true

// Config of Axios
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// Register to vue
Vue.use(VueRouter)
Vue.use(VueAxios, axios)
Vue.use(VueSocketio, 'http://localhost:8080/');

// API URL
const apiUrl = 'http://localhost/vue-dev/first-app/src/api/'

// Router
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            props: {
                apiUrl: apiUrl
            },
            ponent: Main
        },
        {
            path: '/auth',
            props: {
                apiUrl: apiUrl
            },
            ponent: Auth
        },
        {
            path: '/register',
            props: {
                apiUrl: apiUrl
            },
            ponent: Register
        }
    ]
})

// Check if the route is exist on the routes
router.beforeEach((to, from, next) => {
    if(to.matched.length === 0) {
        return router.push('/auth')
    }
    return next()
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<router-view></router-view>'
})

I'm following the instructions on the vue-socket.io npm download page. However, I can't get the this.$socket.emit method to work.

I have this in my Main.vue ponent:

sockets: {
    connect() {
        console.log('socket connected')
    },
    getAllOnline(token) {
        console.log(`Your token is ${token}`)
    }
},
created() {
    this.$socket.emit('getAllOnline', '123213')
}

I set up VueSocketio in my main.js file like this:

import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://localhost:8080/');

I'm expecting to log whatever value was passed to the getAllOnline() function. But only the connect() callback in sockets object is being triggered.

Why isn't the callback for the getAllOnline emit being triggered?

Complete main.js file:

// require some files
require('./assets/css/reset.css')
require('./assets/css/mon.css')

// The Vue build version to load with the `import` mand
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import VueSocketio from 'vue-socket.io';

// Files import
import Main from './ponents/Main'
import Auth from './ponents/Auth'
import Register from './ponents/Register'

// Config of Vue
Vue.config.productionTip = false
Vue.config.devtools = true

// Config of Axios
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// Register to vue
Vue.use(VueRouter)
Vue.use(VueAxios, axios)
Vue.use(VueSocketio, 'http://localhost:8080/');

// API URL
const apiUrl = 'http://localhost/vue-dev/first-app/src/api/'

// Router
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            props: {
                apiUrl: apiUrl
            },
            ponent: Main
        },
        {
            path: '/auth',
            props: {
                apiUrl: apiUrl
            },
            ponent: Auth
        },
        {
            path: '/register',
            props: {
                apiUrl: apiUrl
            },
            ponent: Register
        }
    ]
})

// Check if the route is exist on the routes
router.beforeEach((to, from, next) => {
    if(to.matched.length === 0) {
        return router.push('/auth')
    }
    return next()
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<router-view></router-view>'
})

• javascript
• node.js
• sockets
• socket.io
• vuejs2

• Try moving the sockets: { ... property definition to the new Vue instance in main.js – thanksd Commented May 22, 2017 at 21:05
• 1 Thanks for the help, I used RxJS to solve my problem. – Jrey Commented May 23, 2017 at 1:52

2 Answers 2

It appears that you didn't correctly configure the code on the server to handle this custom event.

The this.$socket.emit('getAllOnline', '123213') call in the created hook of your Vue ponent is emitting a signal to the server at 'http://localhost:8080/'. If the server isn't listening for a getAllOnline event, nothing will happen.

The server code needs to listen for the event and also emit an event back to the client. It would look something like this:

io.on('connection', function(socket){
  socket.on('getAllOnline', function(token){
    // code to handle the token goes here
    io.emit('getAllOnline', token);
  });
});

In the above example, the server emits the getAllOnline event back to the client with a token value. That value is what gets handled in the sockets callback for that event:

sockets: {
  getAllOnline(tokenFromServer) {
    console.log('getAllOnline', tokenFromServer);
  }
},

Try this.$socket.emit('getAllOnline', '123213')

https://github./MetinSeylan/Vue-Socket.io