3.0.4 • Published 5 years ago
vue-socket.io-params v3.0.4
Demo
- Chat Application
- Car Tracking Application
🚀 Installation
npm install vue-socket.io --save
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://metinseylan.com:1992',
params: {
query: 'example=value',
type: ['websocket']
},
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
}
}))
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Parameters | Type's | Default | Required | Description |
---|---|---|---|---|
debug | Boolean | false | Optional | Enable logging for debug |
connection | String/Socket.io-client | null | Required | Websocket server url or socket.io-client instance |
vuex.store | Vuex | null | Optional | Vuex store instance |
vuex.actionPrefix | String | null | Optional | Prefix for emitting server side vuex actions |
vuex.mutationPrefix | String | null | Optional | Prefix for emitting server side vuex mutations |
🌈 Component Level Usage
new Vue({
sockets: {
connect: function () {
console.log('socket connected')
},
customEmit: function (data) {
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
}
},
methods: {
clickButton: function (data) {
// $socket is socket.io-client instance
this.$socket.emit('emit_method', data)
}
}
})
Dynamic Listeners
this.sockets.subscribe('EVENT_NAME', (data) => {
this.msg = data.message;
});
this.sockets.unsubscribe('EVENT_NAME');
🏆 Vuex Integration
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {
"<MUTATION_PREFIX><EVENT_NAME>"() {
// do something
}
},
actions: {
"<ACTION_PREFIX><EVENT_NAME>"() {
// do something
}
}
})
Stargazers over time
3.0.4
5 years ago