Package Exports

vue-socket.io-extended

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-socket.io-extended) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue-Socket.io-Extended

Socket.io bindings for Vuejs 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 :)

Install

npm install vue-socket.io-extended --save

Usage

Configuration

Automatic socket connection from an URL string

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

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

Bind custom socket.io-client instance

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

Enable Vuex integration

import store from './yourstore'

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

On Vuejs instance usage

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

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);
      }
      // ...
    },
  },
})