Vue-Socket.io-Extended

Socket.io bindings for Vue.js and Vuex (based on `Vue-Socket.io`)

🌱 Motivation

I used Vue-Socket.io for a long time and I like it. But bugs, lack of support, no tests, no CI and a huge amount of issues makes me cry. So I decided to create my own fork with all the desirable staff (features/fixes/tests/support etc).

If you'd like to help - create an issue or PR. I will be glad to see any contribution. Let's make the world a better place :)

❕ Requirements

• Vue.js >=2.X
• Socket.io-client >=2.X
• Vuex >=2.X (optional, for integration with Vuex only)

💿 Installation

npm install vue-socket.io-extended

🏁 Initialization

ES2015 (Webpack/Rollup/Browserify/Parcel/etc)

import VueSocketio from 'vue-socket.io-extended';
import io from 'socket.io-client';

Vue.use(VueSocketio, io('http://socketserver.com:1923'));

Note: you have to pass instance of socket.io-client as second argument to prevent library duplication. Read more here.

🚀 Usage

On Vue.js component

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

Dynamic socket event listeners

Create a new listener

this.$options.sockets.event_name = (data) => {
  console.log(data)
}

Remove existing listener

delete this.$options.sockets.event_name;

Vuex Store integration

To enable Vuex integration just pass the store as the third argument, e.g.:

import store from './store'

Vue.use(VueSocketio, io('http://socketserver.com:1923'), store);

Socket mutations always have SOCKET_ prefix.

Socket actions always have socket_ prefix and the socket event name is camelCased (ex. SOCKET_USER_MESSAGE => socket_userMessage)

You can use either one or another or both in your store. Namespaced modules are supported.

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isConnected: false,
    message: null,
  },
  mutations: {
    SOCKET_CONNECT: (state, status) => {
      state.isConnected = true;
    },
    SOCKET_USER_MESSAGE: (state, message) => {
      state.message = message;
    },
  },
  actions: {
    otherAction: (context, type) => {
      return true;
    },
    socket_userMessage: ({ commit, dispatch }, message) => {
      dispatch('newMessage', message);
      commit('NEW_MESSAGE_RECEIVED', message);
      if (message.is_important) {
        dispatch('alertImportantMessage', message);
      }
      // ...
    },
  },
})

⚓ Semantic Versioning Policy

This plugin follows semantic versioning.

📰 Changelog

We're using GitHub Releases.

🍻 Contribution

We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

🔒 License

See the LICENSE file for license rights and limitations (MIT).