Vue socket io does not work (cannot get it to fire connection events)

Question

I am trying to build a multiplayer game with a client - server model. I am using nodejs, with a vuejs (version 2.5) project. However, I cannot seem to get the connections (using socket.io-client and vue-socket.io) to work.

In 'main.js' i have the following code:

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

export const socket = io('http://localhost:8080');

socket.on('connection', function() {
  console.log('connected!');
});
Vue.use(VueSocketio, socket);

console.log('imports done...');

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  sockets: {
    connect() {
      console.log('socket connected...');
    },
    disconnect() {
      console.log('socket disconnected...');
    }
  }
}).$mount('#app')

When I open the page in the browser I do see the 'imports done...' in the console, however when I open or close additional browser tabs with localhost:8080, I see no messages in either the new window or the first window I opened with localhost:8080.

I also tried putting the sockets syntax in the App.vue file, but that also did not work. I see the message 'App.vue script test.' appear in the console, but no connect or disconnect messages appearing in the console.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

console.log('App.vue script test.');

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  sockets: {
    connect() {
      console.log('App.vue: client connected...');
    },
    disconnect() {
      console.log('App.vue: client disconnected...');
    }
  }
}
</script>

Would anyone know how to solve this problem? Thanks in advance.

Answer 1

As far as I can tell you are missing the server part of socket io.

Unfortunatly I don't how your server is set up so I created a socket io server that be run independently of your other server. You want to look into how to integrate it in your server.

I set up a simple socket io server that I called server.js it can be started using node server.js

var http = require('http');
var socketio = require('socket.io')

function server(req, res) {
    // you should probably include something like express if you want to return responses.
    res.write("basic response");
}

let app = http.createServer(server);

var io = socketio(app);

io.on('connection', function(socket){
    console.log('a user connected');
    socket.on("share", (message) => {
        io.emit("update", message)
    })
});

app.listen(3000)

I tried to set up a project similiar to your client side (main.js)

import Vue from 'vue'
import App from './App.vue'
import io from 'socket.io-client'
import VueSocketIo from 'vue-socket.io'

export const socket = io("http://localhost:3000")

socket.on('connection', () => {
  console.log("connected");
})

Vue.use(VueSocketIo, socket)

console.log("imports done...");


new Vue({
  el: '#app',
  render: h => h(App),
  sockets:{
    connect() {
      console.log("socket connected...")
    },
    disconnected() {
      console.log("socket disconnected...")
    }
  }
})

I didn't do anything to the App.vue(I included it for completenes)

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>