Demo

• Chat Application
• Car Tracking Application

🚀 Installation

npm install vue-socket.io --save

import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://metinseylan.com:1992',
    params: {
        query: 'example=value',
        type: ['websocket']
    },
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    }
}))

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

Parameters|Type's|Default|Required|Description -----|-----|-----|-----|----- debug|Boolean|false|Optional|Enable logging for debug connection|String/Socket.io-client|null|Required|Websocket server url or socket.io-client instance vuex.store|Vuex|null|Optional|Vuex store instance vuex.actionPrefix|String|null|Optional|Prefix for emitting server side vuex actions vuex.mutationPrefix|String |null|Optional|Prefix for emitting server side vuex mutations

🌈 Component Level Usage

new Vue({
    sockets: {
        connect: function () {
            console.log('socket connected')
        },
        customEmit: function (data) {
            console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
        }
    },
    methods: {
        clickButton: function (data) {
            // $socket is socket.io-client instance
            this.$socket.emit('emit_method', data)
        }
    }
})

Dynamic Listeners

this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});

this.sockets.unsubscribe('EVENT_NAME');

🏆 Vuex Integration

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    mutations: {
        "<MUTATION_PREFIX><EVENT_NAME>"() {
            // do something
        }
    },
    actions: {
        "<ACTION_PREFIX><EVENT_NAME>"() {
            // do something
        }
    }
})

Stargazers over time