![](\"https://raw.githubusercontent.com/MetinSeylan/Vue-Socket.io/master/docs/logo.png\"){kind=logo}
\n \n\n \n \n \n
\n ![](\"https://img.shields.io/npm/v/vue-socket.io.svg\"/)
![](\"https://img.shields.io/npm/dt/vue-socket.io.svg\"/)
\n ![](\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\"/){kind=icon}
\n ![](\"https://img.shields.io/badge/vue-2.x-brightgreen.svg\"/){kind=icon}
\n ![](\"http://npm.packagequality.com/shield/vue-socket.io.svg\"/)
\n ![](\"https://img.shields.io/npm/l/vue-socket.io.svg\"/)
\n ![](\"https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg\"/)
\n
Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements
\n\n###### Demo\n- Chat Application\n- Car Tracking Application\n\n
\nare you looking for old documentation? it's here\n
\n\n#### 🚀 Installation\n``` bash\nnpm install vue-socket.io --save\n```\n##### Using Connection String\n``` javascript\nimport Vue from 'vue'\nimport store from './store'\nimport App from './App.vue'\nimport VueSocketIO from 'vue-socket.io'\n\nVue.use(new VueSocketIO({\n debug: true,\n connection: 'http://metinseylan.com:1992',\n vuex: {\n store,\n actionPrefix: 'SOCKET_',\n mutationPrefix: 'SOCKET_'\n },\n options: { path: \"/my-app/\" } //Optional options\n}))\n\nnew Vue({\n router,\n store,\n render: h => h(App)\n}).$mount('#app')\n```\n\n##### Using socket.io-client Instance\n``` javascript\nimport Vue from 'vue'\nimport store from './store'\nimport App from './App.vue'\nimport VueSocketIO from 'vue-socket.io'\n\nconst options = { path: '/my-app/' }; //Options object to pass into SocketIO\n\nVue.use(new VueSocketIO({\n debug: true,\n connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional\n vuex: {\n store,\n actionPrefix: \"SOCKET_\",\n mutationPrefix: \"SOCKET_\"\n }\n })\n);\n\nnew Vue({\n router,\n store,\n render: h => h(App)\n}).$mount('#app')\n```\n\n**Parameters**|**Type's**|**Default**|**Required**|**Description**\n-----|-----|-----|-----|-----\ndebug|Boolean|`false`|Optional|Enable logging for debug\nconnection|String/Socket.io-client|`null`|Required|Websocket server url or socket.io-client instance\nvuex.store|Vuex|`null`|Optional|Vuex store instance\nvuex.actionPrefix|String|`null`|Optional|Prefix for emitting server side vuex actions\nvuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex mutations\n\n#### 🌈 Component Level Usage\n\nIf 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
\n\n``` javascript\nnew Vue({\n sockets: {\n connect: function () {\n console.log('socket connected')\n },\n customEmit: function (data) {\n console.log('this method was fired by the socket server. eg: io.emit(\"customEmit\", data)')\n }\n },\n methods: {\n clickButton: function (data) {\n // $socket is socket.io-client instance\n this.$socket.emit('emit_method', data)\n }\n }\n})\n```\n\n##### Dynamic Listeners\n\nIf you need consuming events dynamically in runtime, you can use `subscribe` and `unsubscribe` methods in Vue component
\n\n``` javascript\nthis.sockets.subscribe('EVENT_NAME', (data) => {\n this.msg = data.message;\n});\n\nthis.sockets.unsubscribe('EVENT_NAME');\n```\n\n#### 🏆 Vuex Integration\nWhen 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`
\n\n``` javascript\nimport Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex)\n\nexport default new Vuex.Store({\n state: {},\n mutations: {\n \"\n \n ![](\"https://media.giphy.com/media/11jlnltQgUi2mQ/giphy.gif\")
\n \n