😻 Socket.io implementation for Vuejs and Vuex
MIT License
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',
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
options: { path: "/my-app/" } //Optional options
}))
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
const options = { path: '/my-app/' }; //Options object to pass into SocketIO
Vue.use(new VueSocketIO({
debug: true,
connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
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 |
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)
}
}
})
this.sockets.subscribe('EVENT_NAME', (data) => {
this.msg = data.message;
});
this.sockets.unsubscribe('EVENT_NAME');
export default {
name: 'Test',
sockets: {
connect: function () {
console.log('socket to notification channel connected')
},
},
data () {
return {
something: [
// ... something here for the data if you need.
]
}
},
mounted () {
this.$socket.subscribe("kebab-case", function(data) {
console.log("This event was fired by eg. sio.emit('kebab-case')", data)
})
}
}
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
}
}
})