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
are you looking for old documentation? it's here
#### 🚀 Installation ``` bash npm install vue-socket.io --save ``` ##### Using Connection String ``` javascript 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" 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') ``` ##### Using socket.io-client Instance ``` javascript 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 vuex.options.useConnectionNamespace |Boolean|`false`|Optional|Use more than one connection namespace #### 🌈 Component Level UsageIf 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 ListenersIf 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: { "When you need to handle more than one namespaced connection, you need to set the `useConnectionNamespace` property of the options object to true. What this does is telling the plugin that you are going to be using more than one namespaced connection and you want to put every connection in their own `$socket` key.
``` 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/mynamespace', vuex: { store, options: { useConnectionNamespace: true } }, options: { path: "/my-app/" } //Optional options })) new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` Then use it like this: ``` javascript Vue.$socket.mynamespace.emit('emit_method', data) ``` ## Stargazers over time [](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
