Vuex plugin to integrate socket.io client
npm install vuex-socketio-plugin --save
store.ts
import Vuex, { Store } from 'vuex'
import Vue from 'vue'
import { createSocketioPlugin } from 'vuex-socketio-plugin'
import * as io from 'socket.io-client'
Vue.use(Vuex)
let _client: (typeof io.Socket) | null = null;
export type State = { messages: string[] }
const store = new Vuex.Store<State>({
plugins: [createSocketioPlugin('http://localhost:3000')],
state: {
messages: []
},
mutations: {
SOCKET_CONNECT(state, { client }) {
console.log('connected')
_client = client;
},
SOCKET_CHAT_MESSAGE(state, { data }) {
state.messages = state.messages.concat([data[0]])
}
},
actions: {
postMessage(context, payload: { message: string }) {
if (!_client) {
throw new Error("don't have connection")
}
_client.emit('CHAT_MESSAGE', payload.message)
}
}
})
export default store
Creates a new instance of the plugin. You can give an URL string or custom socket.io-client instance.
createSocketioPlugin('http://localhost:3000') // apply default as socket-io(auto-connect)
createSocketioPlugin(io('http://localhost:3000', { autoConnect: false }) // if you want to customize you can give any socket.io instance
If you want to use multi connection, you can give an array of it.
createSocketioPlugin([
'http://localhost:3000/function1',
'http://localhost:3000/function2',
'http://localhost:3000/function3'
])
Prefix are set automatically to each Mutation and Action.(See Mutation And Action)
If you want to change prefix name, you can give actionPrefix
and mutationPrefix
options.
createSocketioPlugin([
'http://localhost:3000/function1',
'http://localhost:3000/function2',
'http://localhost:3000/function3'
], {
actionPrefix: 'socket/soc_',
mutationPrefix: 'socket/SOC_'
})
When receive SocketIO event, vuex-socketio-plugin triggered Mutation and Action.
MutationName is added prefix SOCKET_
.
ActionName is added prefix socket_
.
MutationName and ActionName are prefix + EventName.
mutations: {
SOCKET_CONNECT(state, payload) {
console.log('connected on mutation')
},
},
actions: {
socket_connect(context, payload) {
console.log('connected on action')
}
}
Note: In case of mutation, default socket.io events are UpperCase. Pleae ref socket.io docs about type of default events.
Both of mutation and action payload includes client
and data
parameters.
client
is socket.io instance. You can emit any event via this.
data
is received message. It is always array type.
Socket.io namespaces is mapped Vuex namespaced Modules.
If you use socket.io namespaces, you can receive which one of below types.
{
plugins: [
createSocketioPlugin('http://localhost:3000/bar')
],
mutations: {
SOCKET_CONNECT: { ... } // default
SOCKET_bar_CONNECT: { ... } // prefix + namespace + event name
},
modules: {
bar: {
SOCKET_CONNECT: { ... } // namespaced module + prefix + event name
}
}
}
Because this is a convention you don't have to set any configtation. It is triggered to be found mutation and action at first.
If you get socket.io clients on your any context, you can use getClients API.
Example
import { getClients } from 'vuex-socketio-plugin'
getClients().forEach(v => v.connect())