VueJ: 트리거 시 커스텀 Socket.io에서 내보내는 기능이 처리되지 않음

VueJ: 트리거 시 커스텀 Socket.io에서 내보내는 기능이 처리되지 않음

npm 다운로드 페이지의 지시에 따르고 있습니다.하지만, 나는 그 정보를 얻을 수 없습니다.this.$socket.emit작업 방법을 참조하십시오.

이건 내 안에 있어Main.vue컴포넌트:

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

셋업했습니다VueSocketio내 안에서main.js다음과 같은 파일:

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

에 전달된 값이 무엇이든 기록할 예정입니다.getAllOnline()기능.단,connect()에서 콜백하다sockets오브젝트가 트리거되고 있습니다.

왜 콜백이 안 되는 거죠?getAllOnline발화시킬까요?

---

완성하다main.js파일:

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

// The Vue build version to load with the `import` command
// (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 './components/Main'
import Auth from './components/Auth'
import Register from './components/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
            },
            component: Main
        },
        {
            path: '/auth',
            props: {
                apiUrl: apiUrl
            },
            component: Auth
        },
        {
            path: '/register',
            props: {
                apiUrl: apiUrl
            },
            component: 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>'
})

이 커스텀이벤트를 처리할 코드를 서버에서 올바르게 설정하지 않은 것 같습니다.

그this.$socket.emit('getAllOnline', '123213')을 호출하다createdVue 컴포넌트의 훅이 서버에 신호를 송신하고 있습니다.'http://localhost:8080/'서버가 수신 대기 중이지 않은 경우getAllOnline이벤트, 아무 일도 일어나지 않습니다.

서버 코드는 이벤트를 수신하고 클라이언트에 이벤트를 반환해야 합니다.다음과 같이 됩니다.

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

위의 예에서는 서버는,getAllOnline클라이언트에 대한 이벤트 반환token값. 이 값은 이 값에서 처리됩니다.sockets콜백:

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

해라this.$socket.emit('getAllOnline', '123213')

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

언급URL : https://stackoverflow.com/questions/44063655/vuejs-custom-socket-io-emits-are-not-getting-handled-when-triggered