IE didn't support startsWith at all.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

Possible workaround - use lodash:
https://lodash.com/docs/4.17.5#startsWith

Hey there,

I want to develop a client in vue, where the user can input the server's address. So the server address is not available when vue is initialized. Is this even possible?

Thanks in advance!
Nick

Hi, I have been trying to fixing this issue for 2 days. It always Triggers Mutation but not actions.

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

Vue.use(Vuex);

const roommsgs = {
  state: {
    roommsgs: []
  },
  mutations: {
    SOCKET_CONNECT(state, status) {},
    SOCKET_ROOMCHAT(state, roomchat) {
      state.roommsgs.push(roomchat);
    }
  },
  actions: {
    socket_roomChat: async ({
      commit,
      dispatch
    }, message) => {
      dispatch('socket_roomChat', message);
      commit('SOCKET_ROOMCHAT', message);
    }
  },
  getters: {
    getChatByRoom: (state) => (room_name) => {
      return state.roommsgs.find(roommsgs => roommsgs.roomname === room_name)
    }
  }
};

const notifications = {
  state: {
    notifications: []
  },
  mutations: {
    SOCKET_NOTIFICATIONS(state, message) {
      state.notifications.push({
        type: 'notifications',
        payload: message
      });
    }
  },
}

export default new Vuex.Store({
  modules: {
    roommsgs,
    notifications,
  }
})

Is there anything else should I consider?

There is an issue with the latest version (v3.2.0) in IE11. It seems as though the 'camelcase' module is no longer being transpiled correctly to ES5 (I'm seeing usages of 'fat arrows'). The previous version (v3.1.0) seems to be working just fine.

Thanks in advance!

Example

// store.js
export default {
  mutation: {
    SOCKET_GREETING_MESSAGE(state, message) {
      console.log(message);
    },
  },
}

// server.js
io.emit('GREETING_MESSAGE', 'Hi there');

Expected result: SOCKET_GREETING_MESSAGE receives message as 'Hi there'
Actual result: SOCKET_GREETING_MESSAGE receives message as ['Hi there']

Versions

vue-socket.io-extended: 2.0.0
vue: 2.5.13
vuex: 3.0.1

I've made investigation today using vue cli, and that's what I got:

vue                                                    : 61.77 kb
vue + vue-socket.io-extended                           : 132.10 kb
vue + vue-socket.io-extended + custom socket.io-client : 190.87 kb

There is a duplication of socket.io-client library when you pass socket.io-client instance to the plugin.
So if you use it this way, you probably have extra ~70kb of useless data in your build.

The only way to fix it is to force library user to pass socket.io-client instance always.

Advantages:

• less build size with custom socket.io-client (e.g. ~70Kb)
• no force version of socket.io-client for user
• no need to support socket.io-client inside the library (update library just because socket.io-client updated)
• user can pass any library compatible with socket.io-client, for example, socket.io-client/dist/socket.io.slim.js which is ~8kb smaller than socket.io-client but drops IE6-8

Disadvantages:

• little harder to setup

Hi,
I have following mutations:

 import $socket from '../../socket';

const state = {
  isConnected: false,
  message: null,
}

const mutations = {
  SOCKET_CONNECT: (state, status) => {
    state.isConnected = true;
    console.log("Connected");
  },
  SOCKET_USER_MESSAGE: (state, message) => {
    state.message = message;
    console.log("Usermessage from server:" + message);
  },
  Login: (state, message) => {
    state.message = message;
    console.log(message);
    $socket.emit('Login',message);
  },
}

if I send a message from server to my client like so:
socket.emit('USER_MESSAGE', 'Logged in successfully')

the message gets not caught. But I can see the message in the WS-Debugger window.
I'm I wrong here? My understanding is, that the message should be caught.

I'm able to send messages via Login() mutation to the server.

I don't get a SOCKET_CONNECT neither. Is that a standard message and should be caught or is it a user message as well?

Let me know if you need further information.

Thx,
Sven

Hi Probil!

Thanks for forking this project.
I try this and previous project (vue-socket.io) with vuex, but it's not working. SOCKET_CONNECT is working properly, but i can't trigger other event name such as SOCKET_RESPONSE

Any chance that i missing something?

Thanks!

Hi, pls provide typings initialization for typescript something like

npm install @types/vue-socket.io-extended

thank U

Hi!

My problem is:
I have a Vuex application with store and i have a simple socketio server.
If the server receives a message, it will broadcast it. The server logs that this has happened, the client does not received it.

SERVER:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection', function(socket) {
  console.log(`Client connected [id=${socket.id}]`);

  socket.on('server_message', function(data) {
    console.log(`server_message: `, JSON.stringify(data));
    socket.emit('server_message', { msg: data.msg });
  });

  socket.on('disconnect', function() {
    console.log(`Client disconnected [id=${socket.id}]`);
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

FRONTEND:

main.js

import Vue from 'vue';
import App from './App.vue';
import socketio from 'socket.io-client';
import VueSocketIO from 'vue-socket.io-extended';
import store from './store';

Vue.use(VueSocketIO, socketio('http://localhost:3000', {
            store: store,
            format: 'json',
            reconnection: true, // (Boolean) whether to reconnect automatically (false)
            reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
            reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
        }), store);

new Vue({
    store,
    render: h => h(App)
}).$mount('#app');

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        isConnected: false,
        message: '',
        reconnectError: false,
        event: null,
        count: 0,
        serverMessage: ''
    },
    mutations: {
        SOCKET_CONNECT(state) {
            state.reconnectError = false;
            state.isConnected = true;
            state.event = 'connected';
            state.serverMessage = 'socket connected';
        },
        SOCKET_ERROR (state)  {
            state.isConnected = false;
            state.event = 'error';
            state.serverMessage = 'socket error';
        },
        SOCKET_DISCONNECT(state) {
            state.isConnected = false;
            state.reconnectError = false;
            state.event = 'disconnect';
            state.serverMessage = 'socket disconnect';
        },
        SOCKET_RECONNECT(state) {
            state.reconnectError = false;
            state.serverMessage = 'socket reconnect';
        },
        SOCKET_RECONNECT_ERROR(state) {
            state.reconnectError = true;
            state.serverMessage = 'socket reconnect error';
        },
        SOCKET_RECONNECT_ATTEMPT(state) {
            state.reconnectError = true;
            state.count = state.count + 1 ;
            state.serverMessage = 'socket reconnect error';
        },
        SOCKET_CONNECT_ERROR (state)  {
            state.isConnected = false;
            state.event = 'connect error';
            state.serverMessage = 'socket connect error';
        },
        
        SOCKET_SERVER_MESSAGE (state, message)  {
            console.log(message);
            state.message = message;
            state.serverMessage = 'message received';
        },
    },
    actions: {
        socket_serverMessage: function(message) {
             console.log(message);
        }
    }
});

+1 event listener in a component:

this.$options.sockets.server_message = (data) => console.log(data);

What could be the problem?
THX!

I've a .vue file like this:

<template>
  <div class="home">
    <h1>Hello</h1>
  </div>
</template>
<script>
export default {
  sockets: {
    connect: () => {
      this.$socket.emit("join_room", "abc");
    },
  }
};
</script>

and I'm getting an error: Uncaught TypeError: Cannot read property 'emit' of undefined

main.js

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

import App from './App.vue';

Vue.use(VueSocketio, io('http://localhost:4000'));

new Vue({
  render: h => h(App),
}).$mount('#app');

Unknown error ，Maybe the code doesn't support it。
3.1.0 can work

We have a long running great app on Socket.io. And when we decided to move some of our clients to Vue.js faced such a problem.

server:

socket.on('tests.message', function() {
  // No errors:
  socket.emit('tests.message', [1, 2, 3]) 
  socket.emit('tests.message', {a:1})
  socket.emit('tests.message', 'data as string')
  // Send error:
  socket.emit('tests.message', false, 'Error data')
  socket.emit('tests.message', null, 'Error data')
  socket.emit('tests.message', undefined, 'Error data')
})

client:

const socketMutations = {
  'socket_tests.message' (state, data, error) {
    if (error) {
      throw new Error(error)
    }
    console.log('work with', data)
  }
...

But on reception the sequence of arguments is broken

work with  [1, 2, 3]
work with {a: 1}
work with data as string
work with [false, "Error data"]
work with [null, "Error data"]
work with [null, "Error data"]

Why spoiled the standard mechanism of Socket.io?

I don't think this is a bug with vue-socket.io-extended, but I wanted to post this question in case someone has run into a similar problem and can possibly help me.

I am trying to use web sockets with a chart that displays live time series data. The chart posts a new data point every second and I have logs that display the information for each data point in both the server-side terminal and the browser console. I am using the component configuration (i.e., no Vuex integration) because I only need a web socket connection on the page with the chart.

When I start the app, a message gets logged to the terminal showing that a web socket connection was made with the server. (Actually, three messages get logged each time I start my app and each message shows a different socket ID. I don't know why that is.) No other logs get printed to the terminal. Then when I navigate to the page that contains the chart, I expect there to be logs printed for each new data point, but no logs are printed in either the terminal or the browser console. However, while still on the page with the chart, if I refresh the browser, then the data starts coming through in the terminal and the browser console and the chart even gets populated with the correct data points.

Has anyone had a similar experience or does anyone know why the data does not flow into my app until after I refresh the page that has both the socket configuration and the chart where the data is displayed?

I am using hapi.js as my Node server, in case that helps.

Hi @probil,

Hope you are doing good. Now, I have a use case for having a pushing notification to the particular user and also in future I might implement chat system.

In that case, I would have to emit/receive data to a particular user right. How would I achieve it with the package? If you could throw me some docs or examples, would be useful.

I have a home page where I'm not using sockets at all. I'm using this with Vuex. Is there a way to prevent the socket from trying to connect on my home page or until it at least has the auth info in my store? There might be something obvious, it's late.

I try to use vue-socket.io-extended behind a nginx reverse proxy but I always end with a 502 error.
With socket.io I used the "path" option. Is it also available on vue-socket.io-extended ?
For instance: Vue.use(VueSocketIO, io('http://192.168.1.1', {path: '/ws'}), { store })

Thanks for your help

I am still sort of new to creating issues to github so i apologize.
I am getting a connection to the server, but any server-side emits are not being captured by vuex. They do show up in my browser console.

*** SOLVED ***
Vue.use(VueSocketio, io('http://127.0.0.1:3000', {store}));
vs
Vue.use(VueSocketio, io('http://127.0.0.1:3000'), {store});

// store/modules/courier.js
const state = {
    isConnected : false
}
const mutations = {
    console: (state, status) => {
        console.log('lel')
    },
    SOCKET_UPDATE_OPEN_ORDERS(state,status){
        state.isConnected = true
        console.log('done')
    },
}
const getters = {
    getConnection:(state)=>{
        return state.isConnected
    }
}
const actions = {
    socket_updateOpenOrders(state) {
        console.log('EVENT RECEIVED: UPDATE_OPEN_ORDERS')
        state.commit('console')
    },
}
export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import courier from './modules/courier'
Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    plugins: [createPersistedState()],
    modules: {
        courier,
    },
    strict: debug,
})

// main.js 
import store from './store'
Vue.use(VueSocketio, io('http://127.0.0.1:3000', {store}));

// BACKEND
// socket.js
const socket_io = require('socket.io');
const io = socket_io();

const socketApi = {};

socketApi.io = io;

io.on('connection', function (socket) {
    socket.emit('UPDATE_OPEN_ORDERS')
});
module.exports = socketApi;

If anyone can figure out where I went wrong please help. I had it working earlier, but i forgot to stash my changes.

Hi,

I use EsLint to lint my code. EsLint requires actions to be "camelcased" but vue-socket.io(-extend) does not respect this requirement... How could I fix that?
SERVER:

socket.emit('myTestSocket', 'this is a test socket')

ACTIONS:

actions: {
  socket_myTestSocket (values) { // -> error: should be socketMyTestSocket ?
    console.log('this is the response of the server: ' + values)
  }
}

I want multiple namespace on socket.io

but i can't find multiple namespace config

so can i use it without vuex store?

Hi,

I'm using the same code as in #65. After solving that issue in 65, my frontend says, it's connected(identified using the console).

But, in my backend, the connect action is not working. Also, it's not listening to any function from the frontend.

What am I doing wrong?

Backend

io.on('connection', function(socket){
  console.log('An user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });  
  
  socket.on('emit_method', function(msg){
    console.log('message: ' + msg);
  }); 
  
});

Frontend

      this.$socket.emit('emit_method', 'handshake')

Hey @probil,
Hope you are doing good.

This is my code which helped me to run the app locally: #67 (comment)
When I have successfully deployed to the server, I changed the URL from localhost:3000 to mydomain.com, it throws an error as below. What should I do more?

GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MHV7jPy 0 ()

Hey There!

Shouldn't this library merge it's socket object with a potential mixin-defined sockets object?
If i want to factorise code between two components recieving the same events, but also specific ones, i can't put that in a mixin as of for now.

When i console.log this.$options.sockets, it only contains the callbacks of the child component, not the mixin.

Here's a sandbox to reproduce

https://codesandbox.io/s/lrmk8m5lmq

I haven't found any issue about this?

Cheers !

Hi,

In my project's folder structure I splitted my Vuex actions (and also mutations, getters and state) into separate files, like suggested here.

Here is an example of an action.js file:

export const saveUserLog = ({ commit, rootState }, data) => {
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  this.$socket.emit('saveUserLog', data) // this doesn't work
}

How can I access to the $socket instance from within my action ?

I tried

export const saveUserLog = ({ commit, rootState, Vue }, data) => { // adding Vue here
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  Vue.$socket.emit('saveUserLog', data) // to access from here
}

and like suggested in this post

export const saveUserLog = ({ commit, rootState }, data) => {
  data.user = rootState.globalModule.userConnected._id
  commit('addUserLogToTempMemory', data)
  this._vm.$socket.emit('saveUserLog', data) // doesn't work
}

Can you help me?
Thanks

I have included Vue-socket.io with the following code:

import VueSocketIO from 'vue-socket.io-extended'
import io from 'socket.io-client'
const socketInstance = io('http://localhost:8080')
socketInstance.on('connect', client => {
  console.log('A')
}}

Vue.use(VueSocketIO, socketInstance)

And in my single-file component, I use the following to listen to a connected event:

<script>
export default {
  sockets: {
    connect: function () {
      console.log('B')
    }
  },

Unfortunately, while my socket.io-client instance itself does trigger a connect event (A is printed), the code in the component is not triggered (B is not printed). Any clue as to what I may be doing wrong here?

The only other library (vue-websocket) that claims to have websocket support I can't get to work.

Adding this feature would be awesome, though I imagine it wouldn't be trivial.

Hey, thanks for this plugin. Works great and the upgrade from vue-socket.io was much needed.

I've noticed that the $socket.connected and `$socket.disconnected`` properties are not reactive. Any way to do this or can I request this feature? :)

Thanks

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Possible workaroud - use Vue's build-in reactivity system.

Thx for your library, if it's possible to have connection with socket, which I've registered as "global" through not Vue code, so if it's possible to have access to socket which I've registered not through your library?

Thx

augmentMethod(Socket, 'onevent', (packet) => {
  const [eventName, ...args] = packet.data;
  GlobalEmitter.emit(eventName, ...args);
  passToStore(eventName, args);
});

Socket.onevent function already have emit call (emit.apply(...))
Above augmentMethod function you call emit again. I confused about this. Can you clarify

I want to use JWT token for Authentication. Actually I'm looking for this. Is there any way of getting this?

Hello,

So recently I created a StackOverflow post about the issue I am having. My socket.io URL is set during build time and I am somehow unable to change that. Do you know of a way where I can dynamically change the IP based on the current machine's IP? So lets say I am developing the app on 192.168.0.123 and I move the app to machine 192.168.0.234, it should detect that and connect the app to that machine.

Hello. I have something like this. How i can make this working?

export const getters = {
    isAuthenticated(state) {
      return state.auth.loggedIn
    },
  
    loggedInUser(state) {
      return state.auth.user
    },
    isAdmin(state) {
      return state.auth.user.is_admin
    }
  }

  export const state = () => ({
    isConnected: false,
    coin: ''
  })
  
  export const mutations = {
    SOCKET_CONNECT(state, socket) {
      state.isConnected = true;
        

 **this.$socket.emit('deposit_withdraw')**

    },
    SOCKET_DISCONNECT(state){
      state.isConnected = false;
    },
    SOCKET_DEPOSIT_WITHDRAW(state, coins) {
      state.coin = coins;
    }
  }

Hi,

I was very worried about the vue-socket.io as it seems to unmaintained. And you come for the rescue. Thanks a lot for this.

In my project, I'm using node.js for backend API running at localhost:3000 and Vue for frontend running at localhost:8080. I have added the basic socket code to print console on connecting. But it's not working.

Below is my code

Node backend: app.js

const http = require('http');
const io = require('socket.io')(http);

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

and Vue frontend: main.js

import VueSocketio from 'vue-socket.io-extended'
import io from 'socket.io-client'

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


new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
  sockets: {
    connect () {
      console.log('socket connected')
    },
    customEmit (val) {
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)', val)
    }
  },
  methods: {
    clickButton (val) {
      // this.$socket is `socket.io-client` instance
      this.$socket.emit('emit_method', val)
    }
  }
})

What am I doing wrong?

The socket has been connected on the server but the SOCKET_CONNECT in my store.js is not firing. Copied example from docs. In fact it doesn't fire the connect or any other events. Connected event does fire on server. I tried adding the code to the main.js too but that doesn't work. At a loss.

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import nav from './_nav'
import Vuex from 'vuex'

import io from 'socket.io-client';
import VueSocketIO from 'vue-socket.io-extended';

Vue.use(Vuex);

const socket = io(process.env.API_URL, { autoConnect: true });

Vue.use(VueSocketIO, socket, { store } );

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App
  },
  sockets: {
    connect() {
      debugger;  //doesn't get here
      console.log('socket connected')
    },
    customEmit(val) {
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
    }
  }
})

store.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isConnected: false
  }
  mutations: {
    SOCKET_CONNECT(state) {
      debugger;  //doesn't get here
    }
  }
});

If I want to use the SSR under nuxt, how should I design the socket connection and disconnect?

Hi, I am trying to use vue-socket.io-extended with the Vuex Module Decorators library, with the following setup:

store/DataStream.ts

import { Module, VuexModule, MutationAction, Mutation, Action} from 'vuex-module-decorators';
import axios from 'axios';

@Module({ namespaced: true, name: 'DataStream'})
export default class DataStream extends VuexModule {
  public num: number = 1;

  @Mutation
  public SOCKET_RANDOM(num: number) {
    this.num = num;
    console.log('Mutation', this.num);
  }

  @Action({ rawError: true })
  public socket_random(num: number) {
    console.log(num);
  }
}

store/store.ts

import Vue from 'vue';
import Vuex from 'vuex';
import DataStream from './dataStream';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    DataStream,
  },
});

main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';
import VueSocketio from 'vue-socket.io-extended';
import io from 'socket.io-client';

const baseURL = 'http://localhost:5000';

Vue.config.productionTip = false;
Vue.use(VueSocketio, io(baseURL), { store });

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

I have a web server emitting random numbers, and for the mutation function everything is working fine. The socket_random function outputs Mutation 1 etc. as expected. The action function on the other hand, does not work and outputs the following error (with rawError: true):

index.js?6fc5:232 Uncaught (in promise) Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
should be decorated with store in decorator, i.e. @module({store: store}) or
store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)
at value (index.js?6fc5:232)
at getModule (index.js?6fc5:20)
at Store.eval (index.js?6fc5:295)
at step (index.js?6fc5:107)
at Object.eval [as next] (index.js?6fc5:88)
at eval (index.js?6fc5:81)
at new Promise ()
at __awaiter (index.js?6fc5:77)
at Store.action (index.js?6fc5:287)
at Array.wrappedActionHandler (vuex.esm.js?2f62:704)

Do you have any suggestions on how to fix this error? I don't know it this belongs more here or in Vuex Module Decorators, so let me know if it does not.

Thanks!

I think in the README documentation, it should be "Prepend to event name while converting event to action." instead of "Append to event name while converting event to action." in order to make it clear that the prefixes are in fact put before the mutation/action names and not after.

i'm able to receive emitted data from nodejs to vuejs via mutators.

how to emit data from vuejs to nodejs?
Please let me know. i'm not able to find any docs related to this.

Hello @probil,

I am wondering if I wrote this incorrectly but I can't get the socket to connect to my server. My server address is http://0.0.0.0:3000 and this is the socket.io.js code I have:

import Vue from 'vue'
import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io-extended'

export default ({ store }) => {
  Vue.use(VueSocketIO, io("http://0.0.0.0:3000"), { store })
}

Hi,
I need help because I cant't find answers on the internet...
I'm trying to synchronize 2 clients via sockets. So when client A changes $route (e.g clicking on a menu that changes the $route), it should trigger a $socket call to client B. But when I'm calling socket it turns into error.

Here's my watcher in my component:

  watch: {
    $route (to, from) {
      console.log('CHANGING ROUTE') // -> this is working
      this.$socket.emit('syncRoutes', {from: from, to: to}) // -> error "Maximum call stack size exceed
    }
  }

Here's the error

[Vue warn]: Error in callback for watcher "$route": "RangeError: Maximum call stack size exceeded"

RangeError: Maximum call stack size exceeded
    at Function.[Symbol.hasInstance] (<anonymous>)
    at hasBinary (index.js?e7e2:46)
    at hasBinary (index.js?e7e2:46)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)

If instead of calling $socket.emit I call another function (e.g a Vuex store action) it works. But each time I insert a socket call, it goes wrong.

I also tried this

  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    console.log('CHANGING ROUTE')
    this.$socket.emit('syncRoutes', {from: from, to: to})
    // don't forget to call next()
    next()
  }

... ant the error:

[vue-router] uncaught error during route navigation

RangeError: Maximum call stack size exceeded
    at Function.[Symbol.hasInstance] (<anonymous>)
    at hasBinary (index.js?e7e2:46)
    at hasBinary (index.js?e7e2:46)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)
    at hasBinary (index.js?e7e2:58)

Any idea ?
Thanks

Thanks so much for the library! It looks very promising. Unfortunately, I can’t get this running with Nuxt. This is what my store looks like:

import Vue from 'vue'
import Vuex from 'vuex'
import VueSocketio from 'vue-socket.io-extended'
import io from 'socket.io-client'

Vue.use(Vuex)

const store = () => new Vuex.Store({
  state: {
    connect: false,
    message: null
  },
  mutations: {
    SOCKET_CONNECT (state, status) {
      console.log('mutations: SOCKET_CONNECT')
      state.connect = true
    },
    SOCKET_USER_MESSAGE (state, message) {
      console.log('mutations: SOCKET_USER_MESSAGE')
      state.message = message
    }
  },
  actions: {
    socket_userMessage (context, message) {
      console.log('Action: socket_userMessage')
    }
  }
})

Vue.use(VueSocketio, io('http://localhost:8080'), { store })

export default store

Whenever I open the website it crashes with this message:

project/node_modules/vue-socket.io-extended/dist/vue-socket.io-ext.min.js:1
(function (exports, require, module, __filename, __dirname) { !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueSocketIOExt=e()}(this,function(){"use strict";var t=function(t){return"function"==typeof t},e=function(){for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];return function(t){return e.reduce(function(t,e){return e(t)},t)}},n=function(t){return function(e){return t+e}},r=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r 

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at t.value (project/node_modules/vue-socket.io-extended/dist/vue-socket.io-ext.min.js:1:4003)
    at Socket.<anonymous> (project/node_modules/vue-socket.io-extended/dist/vue-socket.io-ext.min.js:1:3687)
    at Socket.Emitter.emit (project/node_modules/socket.io-client/node_modules/component-emitter/index.js:131:20)
    at Socket.emit (project/node_modules/socket.io-client/lib/socket.js:136:10)
    at Manager.emitAll (project/node_modules/socket.io-client/lib/manager.js:81:27)
    at Socket.<anonymous> (project/node_modules/socket.io-client/lib/manager.js:230:10)
    at Socket.Emitter.emit (project/node_modules/engine.io-client/node_modules/component-emitter/index.js:134:20)
    at Socket.onError (project/node_modules/engine.io-client/lib/socket.js:673:8)
    at XHR.<anonymous> (project/node_modules/engine.io-client/lib/socket.js:264:10)
    at XHR.Emitter.emit (project/node_modules/engine.io-client/node_modules/component-emitter/index.js:134:20)
    at XHR.Transport.onError (project/node_modules/engine.io-client/lib/transport.js:65:8)
    at Request.<anonymous> (project/node_modules/engine.io-client/lib/transports/polling-xhr.js:127:10)
    at Request.Emitter.emit (project/node_modules/engine.io-client/node_modules/component-emitter/index.js:134:20)
    at Request.onError (project/node_modules/engine.io-client/lib/transports/polling-xhr.js:300:8)
    at Timeout._onTimeout (project/node_modules/engine.io-client/lib/transports/polling-xhr.js:247:18)

I’m not sure if that is connected in any way, but I would be grateful for any help.

EDIT: It does work without the store inside a component.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Hi,

How can I set debug enable on start config?

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io-extended'
import io from 'socket.io-client'

const socket = io('http://localhost:4000')

Vue.use(VueSocketIO, socket)

Thanks

It would be nice to have a demonstration of how library can be used.
By "full-featured example" I mean application that has both front-end and back-end part, user can interact with it interactively, check the code.

I think we should start with a simple example and move to more complex.
It seems like codesandbox suits well for that but further investigation is needed.

• Investigate hosting providers
• Build "Echo server"
• Build "Simple Chat"
• Build "Twitter stream" (like on socket.io, or reuse their API)
• Update README

@probil thx for extension version for VueSocket.io and great support!
I want to know how sockets property really works?

I use library like that for handle events:
this.$socket.on(event, data => {})

I think like sockets property do the same, my event is dynamic variable and depends on id

How I can use sockets property in that case?