Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metinseylan/vue-socket.io
😻 Socket.io implementation for Vuejs and Vuex
https://github.com/metinseylan/vue-socket.io
realtime redux socket-io vue vue-socket vuejs vuex websocket
Last synced: 26 days ago
JSON representation
😻 Socket.io implementation for Vuejs and Vuex
- Host: GitHub
- URL: https://github.com/metinseylan/vue-socket.io
- Owner: MetinSeylan
- License: mit
- Created: 2016-05-06T13:51:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-09T02:18:05.000Z (over 1 year ago)
- Last Synced: 2024-09-22T05:02:42.990Z (about 1 month ago)
- Topics: realtime, redux, socket-io, vue, vue-socket, vuejs, vuex, websocket
- Language: JavaScript
- Homepage: https://metin.sh
- Size: 388 KB
- Stars: 3,947
- Watchers: 68
- Forks: 496
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
You can also check my other npm library Nestjs OpenTelemetry
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'
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
#### 🌈 Component Level Usage
If you want to listen socket events from component side, you need to add `sockets` object in Vue component. After that 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 Listeners
If 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');
```
##### Defining handlers for events with special characters
If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way
``` javascript
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)
})
}
}
```
#### 🏆 Vuex Integration
When 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: {
""() {
// do something
}
},
actions: {
""() {
// do something
}
}
})
```
## Stargazers over time
[](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
