vue-socket.io

    3.0.10 • Public • Published

    Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements

    Demo

    are you looking for old documentation? it's here

    🚀 Installation

    npm install vue-socket.io --save
    Using Connection String
    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',
        vuex: {
            store,
            actionPrefix: 'SOCKET_',
            mutationPrefix: 'SOCKET_'
        },
        options: { path: "/my-app/" } //Optional options
    }))
     
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    Using socket.io-client Instance
    import Vue from 'vue'
    import store from './store'
    import App from './App.vue'
    import VueSocketIO from 'vue-socket.io'
     
    const options = { path: '/my-app/' }; //Options object to pass into SocketIO
     
    Vue.use(new VueSocketIO({
        debug: true,
        connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
        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

    If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key

    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

    If you need consuming events dynamically in runtime, you can use `subscribe` and `unsubscribe` methods in Vue component

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

    🏆 Vuex Integration

    When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`

    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

    Stargazers over time

    Install

    npm i vue-socket.io

    DownloadsWeekly Downloads

    11,960

    Version

    3.0.10

    License

    MIT

    Unpacked Size

    142 kB

    Total Files

    8

    Last publish

    Collaborators

    • metinseylan