metinseylan / vue-socket.io

😻 Socket.io implementation for Vuejs and Vuex

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

Demo

• Chat Application
• Car Tracking Application

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

vue-socket.io's Issues

Uncaught TypeError: Cannot read property 'BlobBuilder' of undefined

Hey,

Yes I know, that is the exact same problem that other issues but I tried to fix it with the uglify.mangle options but that doesn't work.

So, I use socket.io on my Express server and I try to use Vue-socket.io in my app.js like this

import VueSocketio from 'vue-socket.io';

Vue.use(VueSocketio, 'http://socketserver.com:3000'); // i'm listening on port 3000

new Vue ({
sockets : {
connect : function() {
console.log('connected to iosocket');
}
}
})

But when I webpack my project I've the error property blobuilder of undefined.
Does Vue-Socket.io need any dependencies in blob ?

Namespaced SOCKET_ mutations

SOCKET_ mutations are very useful but is there a way to make possible using them in namespaced store modules of Vuex? We can't catch even CONNECT inside the module, because it needs a module prefix. Or I don't understand something...

Registered events called multiple times

if component that includes socket events has a conditional rendering with v-if after rerender event will be called twice, after next rerender - three times and etc.

Example:
ComponentA

<template>
  <component-b v-if="showB"></component-b>
</template>
<script>
import ComponentB from './B.vue'

export default {
  components: { ComponentB },
  data () {
    return { showB: false }
  },
  created () {
    setInterval(() => {
      this.showB = !this.showB
    }, 1000)
  }
}
</script>

ComponentB

<template>hello</template>
<script>
export default {
  sockets: {
    message (message) {
      console.log(message)
    }
  }
}
</script>

I can make a PR that fixes this issue

disconnect event?

you have this example in your readme:

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);
            }
            ...
        }
    }
})

how will connect become false again when e.g. the socket server crashes? Is there a disconnect event on the client?

Great library 👍

sockets property initialize failed

Binding the socket events is not working correctly on vue^2.0.0.

vuejs/vue@71a0f3e#diff-a3983d8041c692bde114459c55b587ebL18

I think this.$options.hasOwnProperty("sockets") should change to this.$options["sockets"] for the prototyped property just like other codes in vuejs.

It dosn't work well when I use vue2.0( I develop the server end with nodejs)

Vue-Socket.io not working

Vue-Socket.io not working mobile

this.store.commit is not a function (using Vuex)

Hello :)

I have an issue when I try to move my socket.io receivers from a component to my vuex store.
I simply added a SOCKET_CONNECT event into my store mutations, and it throws an error everytime its called.

`import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
notes: [],
activeNote: {}
};

const mutations = {

ADD_NOTE (state) {
	const newNote = {
		text: 'New note',
		favorite: false
	};
	state.notes.push(newNote);
	state.activeNote = newNote
},

EDIT_NOTE (state, text) {
	state.activeNote.text = text
},

DELETE_NOTE (state) {
	state.notes.$remove(state.activeNote);
	state.activeNote = state.notes[0]
},

TOGGLE_FAVORITE (state) {
	state.activeNote.favorite = !state.activeNote.favorite
},

SET_ACTIVE_NOTE (state, note) {
	state.activeNote = note
},

SOCKET_CONNECT () {
	console.log('USER IS CONNECTED TO THE SOCKET')
}

};

export default new Vuex.Store({
state,
mutations
});
`

It's not only for the SOCKET_CONNECT event, I tried a custom event 'SOCKET_PING' and I have the same error. I had no problem when those events are located in a component.

The error is "this.store.commit is not a function".

Any ideas ?

Here is how I linked my store the Vue-Socket.io

`
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
import VueSocketio from 'vue-socket.io'

Vue.use(VueSocketio, 'http://localhost:3000/', store);

new Vue({
store,
el: 'body',
components: { App }
});
`

Thanks in advance :)

Proxy is not defined - IE 11

Hello,

in version 2.1.* you add Proxy object, and after that my app not work in IE 11, becouse in IE 11 is no Proxy object.

how do i use room and namespace in vue-socket.io

i try to use this.$socket.to(roomId).emit('sendchat_msg', data) but console.log tell this msg

Uncaught TypeError: this.$socket.to is not a function

how do i use it

ps. sry for my bad english

Demo site broken

On this page: http://metinseylan.com/vuesocketio/ When I click "Join chat" button nothing happens.

I went to the console and saw this: Failed to load resource: the server responded with a status of 404 (Not Found).

Thanks for building this.

How to correctly create a custom socket method?

The details of this question are documented in this stackoverflow post. It seemed like too much to put here.

http://stackoverflow.com/questions/39282843/how-to-correctly-create-a-custom-socket-method-with-vue-socket-io

As a side note, it would be cool if you had more examples including a dirt-simple example in which only localhost is used along with a button and a custom socket.

Openshift hosting

Hello is it possible to specify a different Port when doing the handshake to upgrade from HTTP to WS (or HTTPS to WSS)?

The problem is that OpenShift PaaS uses ports 80/443 for HTTP and HTTPS. However, it listens for WS/WSS traffic on 8000/8443 .

For example this code will not work for OpenShift:

if (process.env.NODE_ENV === 'production') {
Vue.use(VueSocketio, 'https://xxxxxx.rhcloud.com/socket.io/');
}

Since the code detects https it will assume that when upgrading to WSS it will use port 443 and it wont be able to complete the handshake. What I need is to specify HTTPs traffic = 443 but WSS to use 8443.

I would appreciate if someone could point me where to change socket.io client code or the vue-socket.io. THank you.

It dosn't work well when I use vue2.0( I develop the server end with nodejs)

SOS!!! The server-end can receive the event emitted by client-end, but the client-end can't receive the event from server-end. I show my code as below:

// client.vue (client-end)
<template>
   ...
</template>

<script>
export default {
    sockets: {
        connect: function () {
            console.log('socket connected');  //  This cmd dosn't works
        },
        serverEmit: function (msg) {
            console.log("Message："+msg);  //  This cmd dosn't works
        }
    },
    methods: {
        trigger () {
            this.$socket.emit('clientEmit', "I'm a message from client."); //  This cmd works well
        }
    }
}
</script>

// server.js(server-end)
io.on('connection', (socket) => {
        console.log('Socket connect successful.'); //  This cmd works well

        socket.on('clientEmit', (msg) => {
            console.log("Message: " + msg);

            socket.emit('serverEmit', "I'm a message from server."); //  This cmd works well
        });
    });

I think the option 'sockets' is not useful in vue2.0 anymore.

Unique instance

Hi! @MetinSeylan
Thank you for this great package!
In a normal flow, works pretty awesome!
But in my flow, I need start the socket connection when the application starts, I put the connection in my main.js... ok until here... when I open the application window I can see the connection was made in the server console.
I want to use the connection that was opened when the application was started in other application places... Eg. on the dashboard component and set his own listeners on the sockets { }.
This is possible? you know a way to do that?

Best regards

How to create a custom socket vuex mutations?

Hello,
How to create a custom socket mutation? and how to use it ?

Register custom events dynamically

Hi! I'm trying to register custom events dynamically.
Example

const entity = isAdmin ? 'administrator' : 'user'

this.$socket.on(`${entity}Online`, () => ....)

1. Component's "socket" section processes on beforeCreate method, where props data, computed are not available yet.
2. I can't register my events directly on Emitter class because of it's not a singleton.
3. I can't register any event on this.$socket instance because of Observer's class this.Socket.onevent removes standard socket io behavior.

Some ways to solve the issue:

1. Make Emitter class singleton:

// ... emitter class definition
const emitter = new Emitter

export default emitter

Than I can import it in my code

import Emitter from 'vue-socket.io/src/Emitter'

Emitter.addListener...

2. Set a fallback to socketIo's onevent to standard behaviour.
   https://github.com/socketio/socket.io-client/blob/master/dist/socket.io.js#L7868

BTW, I can make pull request

[Improvements]Add possibility to have severals socket.io connections

Hi,
It's possible to have multiple socket.io connections (for example on differents servers) ?
In my case, I work in a microservices architecture and some of them have a socket.io server.

With the current mode of your library, I can't use this for my projects.

Thanks

Is it possible to use this with Vuex?

Wondering how I might implement the sockets property into Vuex, right now I'm basically doing this to work around

let socket = io.connect('http://localhost:3000');
const store = new Vuex.Store({
  state: {
    user: {
      loggedIn: false,
      avatar: "",
      displayName: ""
    },
    chatUsers: []
  },
  mutations: {
    setUser (state, {loggedIn, avatar, displayName}) {
      state.user.loggedIn = loggedIn;
      state.user.avatar = avatar;
      state.user.displayName = displayName;
    },
    addChatUser (state, displayName) {
      if (state.chatUsers.indexOf(displayName) !== -1) return;
      state.chatUsers.push(displayName);
    },
    remChatUser (state, displayName) {
      let index = state.chatUsers.indexOf(displayName);
      if (index !== -1) {
        state.chatUsers.splice(index, 1);
      }
    }
  }
})

socket.on('addUserToList', function(user) {
  store.commit('addChatUser', user);
});

socket.on('remUserFromList', function(user) {
  store.commit('remChatUser', user);
})

The only thing is that it's creating 2 socket connections per person

Is it possible to use sockets from Vuex commits

E.g.

store.commit('enterQueue');

enterQueue: function(state) {
    state.socket.emit("enterQueue");
   // bunch of other code
}

Right now I'm working around it like this

const socket = io('http://localhost:3000');
const store = new Vuex //blah blah
Vue.use(VueSocketio, socket, store);

So I can use the socket global variable from within the store, as well as the socket functionality provided from this package

Vuex + IE

Hi to all
Get error in IE11: SCRIPT5009: "Proxy" is not defined. File: eval code (4200), string: 1, column: 30095. Sample of code there :

t.prototype.$socket=r.Socket,t.mixin({beforeCreate:function(){var t=this,e=this.$options.sockets;this.$options.sockets=new Proxy({},{set:function(e,n,r){return a.default.addListener(n,r,t),e[n]=r,!0},deleteProperty:function(e,n){return a.default.removeListener(n,t.$options.sockets[n],t),delete e.key,!0}})

Error is on this.$options.sockets=new Proxy moment. How to solve this ?

Also I`m using babel-polyfill to make promises work on IE

Emit socket event from vuex store

Hi again, can you give an example how to emit an event from a vuex store action

Socket.io + Vue-Socket.io

All custom handlers added in "native" style wont work:

MySocket.on('myEvent',()=>{
   console.log('It will never fired');
})
I think it happens because you redefine the native function Socket.onevent

I solved it like this:

onEvent() {
        this.Socket.onevent = (packet) => {
            Emitter.emit(packet.data[0], packet.data[1]);

            if (this.store) this.passToStore('SOCKET_' + packet.data[0], packet.data[1])
        };

        let _this = this;
        let nativeEvents = ["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"]

        nativeEvents.forEach((value) => {
                _this.Socket.on(value, (data) => {
                    Emitter.emit(value, data);
                    if(_this.store) _this.passToStore('SOCKET_'+value, data)
                })
            })

        for (let event in this.Socket._callbacks) {
            this.Socket._callbacks[event].forEach(fn => {
                if(!nativeEvents.includes(event)){
                    Emitter.addListener(event, fn);
                }
            })
        }

        this.Socket.on = function (event, fn) {
            Emitter.addListener(event, fn);
        }
        this.Socket.off = function (event, fn) {
            Emitter.removeListener(event, fn);
        }
    }

How to correctly setup Vue-Socket.io with the official vue webpack-template

Hi, I have never used socket.io. I am struggling with setting up Vue-Socket.io with the official Vue webpack template (working locally). I am getting the following errors in the console:

I am also using vue-router, I hope is not the cause of this problem.

The main.js file:

import Vue from 'vue';
import VueSocketio from 'vue-socket.io';

Vue.use(VueSocketio, 'http://http://localhost:4000/'); // Is this correct?

Thanks!

socket with vuex not work

On Server

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
      console.log('user disconnected');
  });

  socket.emit("SOCKET_USER_MESSAGE",'hi');

  socket.on('emit_method', function(data){
      console.log(data);
  });
});

On Vuex

SOCKET_CONNECT : (state,status) => {
		state.connect = true;
		alert('connect with socket.io')
	},
	SOCKET_USER_MESSAGE : (state,message) => {
		alert(message)
		state.newMessage = message
	}

connect is success, but i can't get message.

And in this way,it's work

sockets: {
            SOCKET_USER_MESSAGE : function (data) {
                console.log(data)
            }
        }

What did I do wrong ??

Force websocket

How force to use websocket ?

On the server node with socket.io :

import * as socket from 'socket.io'
const port = 1337
const io = socket(port, {
  transports: ['websocket']
})

In my app electron-vue i have this error :

http://localhost:4100/socket.io/?EIO=3&transport=polling&t=Lmnk47U 400 (Bad Request)

Sry for my english

Error building project from vue-cli webpack

Hi there,

I used vue-cli to create the standard webpack scaffolding.

I'm using vue2 and vue-socket.io.

Running on the dev server, everything works perfectly. But when I build and run the built server, I get:

build.js:2Uncaught ReferenceError: f is not defined(…)

The problem isn't there when I don't include vue-socket.io (but then I can't use this awesome library)

ie , android phone error

Vue-Socket.io and Cordova ?

Hi,

Vue--Socket.io not work with Cordova ?

Problem listning socket events on vuex actions

Hi, thank you for your work in this package.
I'm not been able to listning socket events on vuex actions , tell me if i'm doing it wrong .

vuex action function :

socket_myEvent: (context) => {
   //some code
  }

socket.io emit

socket.emit('myEvent');

thanks

socket functions should be hooked on 'created', not on 'beforeCreate'

I think the socket functions in the Main.js mixin should be hooked on created, not on beforeCreate (here), otherwise the custom functions don't get initialized. I'm willing to do a PR.

Could also be related to #8 and #10.

Thoughts?

can i use Vue-socket.io in vuex state, actions or other

Can i use Vue-socket io in vuex file?
if it's can use how to?

Thanks

Unable to use Vue-socket io with multiple stores

When I try to use vue-socket io like this :

Vue.use(VueSocketIo, SocketIoConnection, UsersStore);
Vue.use(VueSocketIo, SocketIoConnection, ProjectsStore);

ProjectStore doesn't receive message, expect if I comment first Vue.use(...)

Thanks for your help.

this context is not VueComponent

Hi,

export default {
        data() {
            return {
                test_message: '',
            };
        },
        mounted() {
            this.user = this.$auth.user();
            this.$socket.emit('test');
        },

        sockets: {
            onTest: (test_message) => {
                window.console.log(this); // {default: beforeCreate: [..], sockets: {...}}, but should be VueComponent
//                this.test_message = test_message;
            },
        },
    };

ie problem

Hello,
I have this problem width ie ;
L’objet ne gère pas la propriété ou la méthode « startsWith »

Trigger Vuex action with on socket event

Hello,

Currently, you can trigger vuex mutations with the "SOCKET_" prefix and this is nice !

But sometime, socket events must do more that just change the vuex state. for me it's also very important to be able to trigger Vuex actions by a similar way. Somehting like "event-name" triggering "socketEventName" action.

Refresh the browser, will have to listen to a number of repeated socket events

Refresh the browser, will have to listen to a number of repeated socket events. Refresh, how to maintain socket connection or how to close the connection

Uncaught TypeError: Cannot read property 'BlobBuilder' of undefined

Hi, when I use vue-socket.io 2.0.0 in my project that is building by vue 2.0, an error occurred that Uncaught TypeError: Cannot read property 'BlobBuilder' of undefined in chrome console. I don't know why. Please help me. Q&A!

Support namespaced module instead of prefix SOCKET_

Hello

I find the SOCKET_ prefix for mutations somewhat counterintuitive. I didn't know this library and came across these strange mutation names in our code which appeared to make no sense.

I would prefer to define a module that is namespaced and would handle the socket requests.

So instead of

const store = new Vuex.Store({
  state: {
    someArray: [],
  },
  mutations: {
    // SOCKET_ prefix handles SOCKET requests
    SOCKET_rental: (state, msg) => {
      ...
    },
  },
});

we can optionally define a SOCKET submodule by passing the module name as 4th parameter
Vue.use(VueSocketio, url, store, 'SOCKET');

const store = new Vuex.Store({
  state: {
    someArray: [],
  },
  modules: {
    SOCKET: {
      // this submodule handles SOCKET requests
      namespaced: true,
      mutations: {
        rental: function rental(state) {
          console.log('SOCKET/rental', state);
        },
      },
    },
  }
});

Build.js should be rebuild, the package.json still references to an old build.

At the moment the package.json still references to an old Build.js that has been updated a month ago. The build.js should be rebuild so you directly have the new version of Vue-Socket.io

plugin.apply is not a function

Hello. I do not know much english, so I use a translator. I have extensive experience in backend, but little experience frontend.

I have a simple project and easy task, I do not need to use webpack or other.
That's where I started:

index.html

<div id="app">
	<input v-model="name"><br>
	<textarea v-model="message"></textarea><br>
	<button @click.prevent="send">Send</button>
</div>
<script src="js/vendor/vue.js"></script>
<script src="js/vendor/build.js"></script>
<script src="js/main.js"></script>

main.js

console.log(VueSocketio);
Vue.use(VueSocketio, 'http://host:8080');

console

Object {default: Object, __esModule: true}
vue.js:3450 Uncaught TypeError: plugin.apply is not a function

Of course I was looking for ways to solve this problem, try install webpack and rebuilt the project - did not help.

Uncaught TypeError: Cannot read property 'BlobBuilder' of undefined

I'm sorry but my Issue isn't closed so I must re-open a new one ...

Here is my webpack.config.js

var config = {
    entry: {
        app: ['./app/appLogin.js']
    },
    output: {
        path: __dirname + '/public/js',
        filename: 'preapp-bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel'
        },{
          test : /\.vue$/,
          loader : 'vue'
        }]
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress : {
          warnings : false
        },
        mangle : false
      })
    ]
}

Here is my main.js

import Vue from 'vue'
import VueSocketio from 'vue-socket.io';
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import PreApp from './views/components/PreApp.vue'

Vue.use(VueSocketio, 'http://localhost');
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [{
        path: '/',
        component: require('./views/components/PreApp.vue')
    }]
});

new Vue({
    el: '#preappvue',
    router: router,
    sockets: {
        connect: function() {
            console.log('socket connected')
        },
        customEmit: function(val) {
            console.log('this method fired by socket server. eg: io.emit("customEmit", data)')
        }
    },
    render: h => h(PreApp)

})

And i've still the problem of BloBuilder undefined. :(

var i = e.BlobBuilder || e.WebKitBlobBuilder || e.MSBlobBuilder || e.MozBlobBuilder,

is not assignable to parameter of type 'ComponentOptions<Vue>

Hello,
I just installed the package and set it up in my main.ts (yes typescript) as:

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

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

But my compiler and complains that:

./src/main.ts
(43,1): error TS2345: Argument of type '{ sockets: {}; router: VueRouter; store: Store<{ AppName: string; UserID: number; Crumb: string; ...' is not assignable to parameter of type 'ComponentOptions'.
Object literal may only specify known properties, and 'sockets' does not exist in type 'ComponentOptions'.

Is there a way to instantiate connection inside a component?

Is possible to connect inside a component? I mean, not in main.js but in a module, something like Login.vue

Broadcasting

It would be great if vm.$socket.emit() would allow for broadcasting to all other clients in one way or another, e.g. following the socket.io API like vm.$socket.broadcast.emit() .

My current workaround is to first emit from Vue, then broadcast using the original client on the server.

Can’t pass multiple arguments

I wrote like this on the server side:

io.emit('test', 'param1', 'param2', 'param3')

I can get all the three arguments when using socket.io-client

socket.on('test', function () {
  console.log(arguments)
})

// result:
["param1", "param2", "param3"]

But I can only get the first argument with vue-socket

sockets: {
    test: function () {
      console.log(arguments)
    }
}

// result:
["param1"]

how to refresh the connection

when session is changed , what can i do to refresh the connection

how can i use vuex

connect_error missed

Hi,
I don't see connect_error event on sources.

I propose to fix it with :

["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed"]
.forEach((value) => {
_this.Socket.on(value, (data) => {
Emitter.emit(value, data)
})
})
_this.Socket.io.on('connect_error', (error) => {
Emitter.emit('connect_error', error)
})

to listen connection error first time when we don't need to reconnect.

Difference between Vuex Actions and Mutations

I don't understand between Vuex Actions and Mutations with sockets:

I fully understood this #42 (Actions are called when socket server send an event).
But how to uses Mutations with sockets?

Thanks!