3.0.10 • Published 4 years ago

vue-socket.io v3.0.10

Weekly downloads
11,551
License
MIT
Repository
github
Last release
4 years ago
Demo
  • Chat Application
  • Car Tracking Application

🚀 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'

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')
ParametersType'sDefaultRequiredDescription
debugBooleanfalseOptionalEnable logging for debug
connectionString/Socket.io-clientnullRequiredWebsocket server url or socket.io-client instance
vuex.storeVuexnullOptionalVuex store instance
vuex.actionPrefixStringnullOptionalPrefix for emitting server side vuex actions
vuex.mutationPrefixStringnullOptionalPrefix for emitting server side vuex mutations

🌈 Component Level Usage

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
this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});

this.sockets.unsubscribe('EVENT_NAME');

🏆 Vuex Integration

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

Stargazers over time

wttest@aitheon/apps-ui-components-hostldns20201130ldns_white02ldns_whiteboard04ldns_whiteboard06ldns_whiteboard09ldns_whiteboard10ldns_whiteboard00ldns_whiteboard02ldns_whiteboard03ldns_whiteboard30ldns_whiteboard31ldns_whiteboard32ldns_whiteboard33ldns_whiteboard34ldns_whiteboard37ldns_whiteboard38ldns_whiteboard44ldns_whiteboard46ldns_whiteboard47ldns_whiteboard49ldns_whiteboard50ldns_whiteboard62ldns_whiteboardmonzem@infinitebrahmanuniverse/nolb-vue-soheader_cesi_eatquick-games-vibra@everything-registry/sub-chunk-3092live-chat-takiacademyklklklkkikoeru-quasarldh-componentjepurdeemulo-adminjscatalystnetfere-elementlogistics-trackingltkefuxitongcyjentreeposermchatclienthbdfirewatch-uiets2-dashboard-skinform-editor-clfw-adminnstc_dynamic_formnstc_g6_commonnv4-uinv3-uioneviewloginoneviewlogin2projet-cesi-buttonquasiparticlep-suanbanyunpaper-test-dv1paper-test-dv13paper-test-dv15paper-test-dv2paper_chat_cyj1safe-product-upgrade-browserreq-manager-ui@exia_cesi/ceseat-components@igorepo/vue@frctl/inspector@fortna/fortna-uivue-map-hxzh-dctopological-constructorw_vue_antd_components@jojocoders/jojonomic-ui@jojonomic/jojo-libvue-yznyuan-huoling-browseryuan-nccp-pl-module-browseryuan-risk-management-browseryuan-asset-module-browservue-thorn-shadowtick.chat.uithinvuesantech-galaxy-componentsantech-logistics-trackingrichwayweb-layout@vastiny/remote-control-server@triotech/vue-core@projet-cesi/button@projet-cesi/cart@projet-cesi/create-account@projet-cesi/date-format@projet-cesi/footer@projet-cesi/format-date@projet-cesi/navbar@pure-org/water-template-fawkes@yangzichen/kefu_slient@weave-js/dashboard@weave-js/monitor@windmillcss/client@vinnyfs89/communication-webapp@vinnyfs89/comunication-webappantv-ts-demo
3.0.10

4 years ago

3.0.9

4 years ago

3.0.8

4 years ago

3.0.7

5 years ago

3.0.6

5 years ago

3.0.5

5 years ago

3.0.4

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.1.1-b

6 years ago

2.1.1-a

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago