[FIX] Allow default namespace to still be used

[dcvezzani]

Like others, I discovered that I wasn't able to use the default namespace for socket.io on the client side of the house. I tried to see if #254 would work, but something didn't seem quite right, so I took a stab at the code myself and I was able to get the desired behavior.

Default namespace

Here are some important snippets for using Vue-Socket.io with a default namespace:

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueSocketIO from './Vue-Socket.io/src'
import SocketIO from "socket.io-client"

Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://localhost:3000',
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    },
    options: { path: "/cards/socket.io" } 
}))

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

src/components/HelloWorld.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('emitMethod', data)
  }
},

server.js

let server = require('http').createServer();
let io  = require('socket.io')(server, { path: '/cards/socket.io'}).listen(3000);

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

  setTimeout(() => {
    socket.emit('connect', {});
  }, 2000)

  socket.on('emitMethod', function(val){
    console.log('server:receive:emitMethod');
    socket.emit('customEmit', val);
  });

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

Explicit namespace

And here are similar key snippets for when using a socket namespace is desired:

src/main.js

Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://localhost:3000/cards',
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    },
    options: { path: "/cards/socket.io",
      useConnectionNamespace: true
    }
}))

src/components/HelloWorld.vue

  sockets: {
      cards: {
        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.cards.emit('emitMethod', data)
      }
  },

server.js

let server = require('http').createServer();
let io  = require('socket.io')(server, { path: '/cards/socket.io'}).listen(3000);

const nsp = io.of('/cards');

nsp.on('connection', function(socket){
  console.log('a user connected');

  setTimeout(() => {
    socket.emit('connect', {});
  }, 2000)

  socket.on('emitMethod', function(val){
    console.log('server:receive:emitMethod');
    socket.emit('customEmit', val);
  });

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