because shithub doesnt have ipv6 support
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
Go to file
Даниил Пронин d7ddfb23ef
Update README.md (#271)
4 years ago
dist revert changes & delete issues folder 4 years ago
docs added old documentation for ^2.0.0 6 years ago
src revert changes & delete issues folder 4 years ago
.gitignore added vuex support 6 years ago
.npmignore added vuex support 6 years ago
LICENSE small changes and logo 6 years ago
README.md Update README.md (#271) 4 years ago
index.d.ts add types definition (#218) 5 years ago
package.json revert changes & delete issues folder 4 years ago
webpack.config.js small changes and logo 6 years ago

README.md

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'
import SocketIO from 'socket.io-client'

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