vuex-socketio

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