MetinSeylan/Vue-Socket.io
Fork: 499 Star: 3947 (更新于 2024-11-22 09:11:49)
license: MIT
Language: JavaScript .
😻 Socket.io implementation for Vuejs and Vuex
最后发布版本: 3.0.10 ( 2020-08-23 05:10:07)
Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements.
Demo
You can also check my other npm library Nestjs OpenTelemetry
are you looking for old documentation? it's here
🚀 Installation
npm install vue-socket.io --save
Using Connection String
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
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
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
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
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`
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {
"<MUTATION_PREFIX><EVENT_NAME>"() {
// do something
}
},
actions: {
"<ACTION_PREFIX><EVENT_NAME>"() {
// do something
}
}
})
Stargazers over time
最近版本更新:(数据更新于 2024-10-17 03:35:23)
2020-08-23 05:10:07 3.0.10
2019-03-07 09:41:53 3.0.7
2019-03-07 01:25:42 3.0.6
2019-01-25 14:24:48 3.0.5
2018-11-27 14:28:07 3.0.4
2018-11-26 02:35:39 3.0.3
2018-11-23 23:32:30 3.0.2
2018-11-18 23:08:42 3.0.0
2017-03-30 20:56:09 2.1.1-a
2016-12-31 06:30:56 2.1.0
主题(topics):
realtime, redux, socket-io, vue, vue-socket, vuejs, vuex, websocket
MetinSeylan/Vue-Socket.io同语言 JavaScript最近更新仓库
2024-11-22 16:46:00 meshery/meshery
2024-11-21 23:03:24 bia-pain-bache/BPB-Worker-Panel
2024-11-21 22:46:48 MHSanaei/3x-ui
2024-11-21 07:00:59 nodejs/node
2024-11-21 00:49:46 FortAwesome/Font-Awesome
2024-11-18 14:26:02 projectdiscovery/nuclei-templates