Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/vue-socket.io below:

vue-socket.io - npm

Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements

• Chat Application
• Car Tracking Application

are you looking for old documentation? it's here

npm install vue-socket.io --save

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/" } 
}))
 
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
 
const options = { path: '/my-app/' }; 
 
Vue.use(new VueSocketIO({
    debug: true,
    connection: SocketIO('http://metinseylan.com:1992', options), 
    vuex: {
      store,
      actionPrefix: "SOCKET_",
      mutationPrefix: "SOCKET_"
    }
  })
);
 
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

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

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) {
            
            this.$socket.emit('emit_method', data)
        }
    }
})

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');

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>"() {
            
        }
    },
    actions: {
        "<ACTION_PREFIX><EVENT_NAME>"() {
            
        }
    }
})

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4