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

Demo

• Chat Application
• Car Tracking Application

are you looking for old documentation? it's here

???? Installation

1npm install vue-socket.io --save

Using Connection String

1import Vue from 'vue'
2import store from './store'
3import App from './App.vue'
4import VueSocketIO from 'vue-socket.io'
5
6Vue.use(new VueSocketIO({
7    debug: true,
8    connection: 'http://metinseylan.com:1992',
9    vuex: {
10        store,
11        actionPrefix: 'SOCKET_',
12        mutationPrefix: 'SOCKET_'
13    },
14    options: { path: "/my-app/" } //Optional options
15}))
16
17new Vue({
18    router,
19    store,
20    render: h => h(App)
21}).$mount('#app')

Using socket.io-client Instance

1import Vue from 'vue'
2import store from './store'
3import App from './App.vue'
4import VueSocketIO from 'vue-socket.io'
5
6const options = { path: '/my-app/' }; //Options object to pass into SocketIO
7
8Vue.use(new VueSocketIO({
9    debug: true,
10    connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
11    vuex: {
12      store,
13      actionPrefix: "SOCKET_",
14      mutationPrefix: "SOCKET_"
15    }
16  })
17);
18
19new Vue({
20    router,
21    store,
22    render: h => h(App)
23}).$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

1new Vue({
2    sockets: {
3        connect: function () {
4            console.log('socket connected')
5        },
6        customEmit: function (data) {
7            console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
8        }
9    },
10    methods: {
11        clickButton: function (data) {
12            // $socket is socket.io-client instance
13            this.$socket.emit('emit_method', data)
14        }
15    }
16})

Dynamic Listeners

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

1this.sockets.subscribe('EVENT_NAME', (data) => {
2    this.msg = data.message;
3});
4
5this.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`

1import Vue from 'vue'
2import Vuex from 'vuex'
3
4Vue.use(Vuex)
5
6export default new Vuex.Store({
7    state: {},
8    mutations: {
9        "<MUTATION_PREFIX><EVENT_NAME>"() {
10            // do something
11        }
12    },
13    actions: {
14        "<ACTION_PREFIX><EVENT_NAME>"() {
15            // do something
16        }
17    }
18})

Stargazers over time