New Project, Monday

    vue-socket-path.io

    2.1.1 • Public • Published

    Vue-Socket.io

    NPM version VueJS v2 compatible Downloads Dependency Badge License

    socket.io implementation for Vuejs 2 and Vuex

    Install

    npm install vue-socket.io --save

    Usage

    Configuration

    Automatic socket connection from an URL string

    import VueSocketio from 'vue-socket.io';
    Vue.use(VueSocketio, 'http://socketserver.com:1923');

    or with namespace

    import VueSocketio from 'vue-socket.io';
    Vue.use(VueSocketio, 'http://socketserver.com:1923/namespace');

    or with urlPath

    import VueSocketio from 'vue-socket.io';
    Vue.use(VueSocketio, { url: 'http://socketserver.com:1923', path: '/your_path' });

    or with both namespace & urlPath

    import VueSocketio from 'vue-socket.io';
    Vue.use(VueSocketio, { url: 'http://socketserver.com:1923/namespace', path: '/your_path' });

    Bind custom socket.io-client instance

    Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));

    Enable Vuex integration

    import store from './yourstore'
    Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);

    On Vuejs instance usage

    var vm = new Vue({
      sockets:{
        connect: function(){
          console.log('socket connected')
        },
        customEmit: function(val){
          console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
        }
      },
      methods: {
        clickButton: function(val){
            // $socket is socket.io-client instance
            this.$socket.emit('emit_method', val);
        }
      }
    })

    Dynamic socket event listeners

    Create a new listener

    this.$options.sockets.event_name = (data) => {
        console.log(data)
    }

    Remove existing listener

    delete this.$options.sockets.event_name;

    Vuex Store integration

    Socket mutations always have SOCKET_ prefix.

    Socket actions always have socket_ prefix and the socket event name is camelCased (ex. SOCKET_USER_MESSAGE => socket_userMessage)

    You can use either one or another or both in your store. Namespaced modules are supported.

    import Vue from 'vue'
    import Vuex from 'vuex'
     
    Vue.use(Vuex);
     
    export default new Vuex.Store({
        state: {
            connect: false,
            message: null
        },
        mutations:{
            SOCKET_CONNECT: (state,  status ) => {
                state.connect = true;
            },
            SOCKET_USER_MESSAGE: (state,  message) => {
                state.message = message;
            }
        },
        actions: {
            otherAction: (context, type) => {
                return true;
            },
            socket_userMessage: (context, message) => {
                context.dispatch('newMessage', message);
                context.commit('NEW_MESSAGE_RECEIVED', message);
                if (message.is_important) {
                    context.dispatch('alertImportantMessage', message);
                }
                ...
            }
        }
    })

    Example

    Realtime Car Tracker System

    Simple Chat App

    Install

    npm i vue-socket-path.io

    DownloadsWeekly Downloads

    1

    Version

    2.1.1

    License

    MIT

    Last publish

    Collaborators

    • plomk