Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements
###### Demo - Chat Application - Car Tracking Application #### 🚀 Installation ``` bash npm install vue-socket.io --save ``` ``` javascript 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_' } })) 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
If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key
``` javascript 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 ListenlersIf you need consuming events dynamically in runtime, you can use `subscribe` and `unsubscribe` methods in Vue component
``` javascript this.sockets.subscribe('EVENT_NAME', (data) => { this.msg = data.message; }); this.sockets.unsubscribe('EVENT_NAME'); ``` #### 🏆 Vuex IntegrationWhen you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`
``` javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {}, mutations: { "
