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

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
vuex.options.useConnectionNamespace	Boolean	false	Optional	Use more than one connection namespace

🌈 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. The prefix for mutations and actions are both optional and will default to none. The prefix may be useful in differentiating what type of event should be sent to the store in the case of an action and mutation with the same name.

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
    }
  }
});

Vuex Namespaced Modules

When using namespaced modules, the prefix, if one exists, will be parsed into the action name. For example, if the emitted event it `jobs/runTask` and the action prefix is `SOCKET_`, then the vuex action should be `SOCKET_runTask` in the jobs namespace. In this example the vuex store will receive the dispatched action: `jobs/SOCKET_runTask`.

Stargazers over time