vuex-socketio-plugin
Vuex plugin to integrate socket.io client
Install
npm install vuex-socketio-plugin --save
Simple Example
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 storeUsage
createSocketioPlugin
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 it as actionPrefix and mutationPrefix options.
createSocketioPlugin([
'http://localhost:3000/function1',
'http://localhost:3000/function2',
'http://localhost:3000/function3'
], {
actionPrefix: 'socket/soc_',
mutationPrefix: 'socket/SOC_'
})
Mutation and Action
When it receives any SocketIO events, vuex-socketio-plugin triggers Mutation and Action.
SOCKET_ prefix is added on MutationName, prefix socket_ is added on ActionName .
(MutationName and ActionName consists from 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 and Vuex Namespaced Modules
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.
getClients
If you want to get a socket.io client, you can use getClients .
Example
import { getClients } from 'vuex-socketio-plugin'
getClients().forEach(v => v.connect())
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent