mirror of
https://github.com/MetinSeylan/Vue-Socket.io.git
synced 2025-04-16 15:21:28 +02:00
Compare commits
No commits in common. "master" and "3.0.10" have entirely different histories.
4 changed files with 10 additions and 57 deletions
41
README.md
41
README.md
|
@ -12,17 +12,13 @@
|
||||||
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
|
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
|
||||||
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
|
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
|
||||||
</p>
|
</p>
|
||||||
<p align="center">
|
|
||||||
<a href="https://www.patreon.com/MetinSeylan">
|
<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
|
||||||
<img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements.<p>
|
|
||||||
|
|
||||||
###### Demo
|
###### Demo
|
||||||
- <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
|
- <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
|
||||||
- <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
|
- <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
|
||||||
<p>You can also check my other npm library <a href="https://github.com/MetinSeylan/Nestjs-OpenTelemetry">Nestjs OpenTelemetry</a></p>
|
|
||||||
<p>
|
<p>
|
||||||
are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
|
are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
|
||||||
</p>
|
</p>
|
||||||
|
@ -94,7 +90,7 @@ vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex
|
||||||
|
|
||||||
#### 🌈 Component Level Usage
|
#### 🌈 Component Level Usage
|
||||||
|
|
||||||
<p>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</p>
|
<p>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</p>
|
||||||
|
|
||||||
``` javascript
|
``` javascript
|
||||||
new Vue({
|
new Vue({
|
||||||
|
@ -127,35 +123,6 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
|
||||||
this.sockets.unsubscribe('EVENT_NAME');
|
this.sockets.unsubscribe('EVENT_NAME');
|
||||||
```
|
```
|
||||||
|
|
||||||
##### Defining handlers for events with special characters
|
|
||||||
|
|
||||||
<p>If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way</p>
|
|
||||||
|
|
||||||
``` 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
|
#### 🏆 Vuex Integration
|
||||||
<p>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`</p>
|
<p>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`</p>
|
||||||
|
|
||||||
|
|
10
dist/vue-socketio.js
vendored
10
dist/vue-socketio.js
vendored
File diff suppressed because one or more lines are too long
4
index.d.ts
vendored
4
index.d.ts
vendored
|
@ -50,10 +50,6 @@ export interface VueSocketOptions {
|
||||||
options?: {
|
options?: {
|
||||||
useConnectionNamespace?: boolean
|
useConnectionNamespace?: boolean
|
||||||
}
|
}
|
||||||
},
|
|
||||||
// type declarations for optional options
|
|
||||||
options?:{
|
|
||||||
path?: string;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
12
src/index.js
12
src/index.js
|
@ -28,16 +28,8 @@ export default class VueSocketIO {
|
||||||
*/
|
*/
|
||||||
install(Vue){
|
install(Vue){
|
||||||
|
|
||||||
const version = Number(Vue.version.split('.')[0])
|
Vue.prototype.$socket = this.io;
|
||||||
|
Vue.prototype.$vueSocketIo = this;
|
||||||
if (version >= 3) {
|
|
||||||
Vue.config.globalProperties.$socket = this.io;
|
|
||||||
Vue.config.globalProperties.$vueSocketIo = this;
|
|
||||||
} else {
|
|
||||||
Vue.prototype.$socket = this.io;
|
|
||||||
Vue.prototype.$vueSocketIo = this;
|
|
||||||
}
|
|
||||||
|
|
||||||
Vue.mixin(Mixin);
|
Vue.mixin(Mixin);
|
||||||
|
|
||||||
Logger.info('Vue-Socket.io plugin enabled');
|
Logger.info('Vue-Socket.io plugin enabled');
|
||||||
|
|
Loading…
Add table
Reference in a new issue