Package Exports

vuex-socketio

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 (vuex-socketio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vuex-socketio

Vuex plugin for Socket.io-client.

Install

npm install vuex-socketio --save

Usage

Configuration

One socket.io-client instance

import createSocketIoPlugin from 'vuex-socketio';
const socket = socketio('http://socketserver.com:3001');
const socketPlugin = createSocketIoPlugin(socket);

With namespace:

import createSocketIoPlugin from 'vuex-socketio';
const socket = socketio('http://socketserver.com:3001');
const socketNsp = socketio('http://socketserver.com:3001/namespace');
const socketPlugin = createSocketIoPlugin([socket, socketNsp]);

In store:

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    ...
  },
  plugins: [socketPlugin]
})

Vuex Store integration

Set up listeners

You may define prefix for socket.on with options object:

const socketPlugin = createSocketIoPlugin(socket, {onPrefix: 'someOnPrefix'});

The default value is socketOn

mutations: {
        socketOnConnect: (state,  status ) => {
            state.connect = true;
        },
        socketOnMessage: (state,  message) => {
            state.message = message;
        },
        ...
    },
actions: {
        socketOnOtherMessage: (context, message) => {
        ...some code here
        },
        ...
    }

Where socketOn is a prefix for listeners and message is a desired channel name

Set up emiters

Only actions can be used for emitting to socket

Define socket.emit prefix:

const socketPlugin = createSocketIoPlugin(socket, {emitPrefix: 'someEmitPrefix'});

Or use the default value: socketEmit

actions: {
        socketEmitMessage: (context, message) => {},
        ...
     }

Where socketEmit is a prefix for emitting messages and message is a desired channel name

Open and close socket connection Use: socketConnect && socketDisconnect actions

You can also add some prefixes for default functions, e.g.: socketReconnect,

where socket is a mandatory prefix and reconnect is an existing function name

const socketPlugin = createSocketIoPlugin(socket, {defaultFunctions: ['socketReconnect']);

Set up channel name formatter

You can provide your own channel converter function:

const socketPlugin = createSocketIoPlugin(socket, {converter: _.camelCase});

The default channel name will be in UPPER_SNAKE_CASE

Namespaces for store modules and for socket instances are supported.

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        connect: false,
        message: null
    },
    mutations:{
        socketOnConnect: (state,  status ) => {
            state.connect = true;
        },
        socketOnDisconnect: (state,  status ) => {
            state.connect = false;
        },
        socketOnMessage: (state,  message) => {
            state.message = message;
        }
    },
    actions: {
        socketConnect: () => {},
        socketEmitMessage: () => {},
        socketOnOtherMessage: (context, message) => {
        ...some code here
        },
    },
    plugins: [socketPlugin]
})

Socket instance with namespace:

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        connect: false,
        message: null
    },
    mutations:{
        namespaceSocketOnConnect: (state,  status ) => {
            state.connect = true;
        },
        namespaceSocketOnDisconnect: (state,  status ) => {
            state.connect = false;
        },
        namespaceSocketOnMessage: (state,  message) => {
            state.message = message;
        }
    },
    actions: {
        namespaceSocketConnect: () => {},
        namespaceSocketEmitMessage: () => {},
        namespaceSocketOnOtherMessage: (context, message) => {
        ...some code here
        },
    },
    plugins: [socketPlugin]
})

Notes

No support for dynamic registred store modules.
Plugin emits first to the socket channel and then it calls related Vuex store action.

Example

demo