Failing Server -> Component and Component -> Server. What am I doing wrong?

[JumpHoysteria]

EDIT: I found the solution, finally.. I totally missed that socket.on(...) needs to be in the callback of io.on("connect"). THIS was the mistake. Well thanks anyway. Thank you so much for your work. It wouldn't have been possible without your work. Thanks.

Hi, I'm pretty new to this, so sorry if it is trivial. But I already spend several days on it and the solution seems elusive.

After I had the connection-breakthrough in my Vue-App, I wanted to test the bi-directional features of SocketIO. But none of the buttons (which represent Use-Cases) below in Chat.vue work. Curiously, I observed weird behaviour which probably is also part of the problem. Every time when I open the App in a new tab, on the Server Console I get 'a user connected', BUT if I open a first tab (get a 'a user connected' in the console), then click a button in this tab, then open a second tab, I only get a 'a user connected' after I hit Ctrl + C in the server console. It seems like the socket needs me to cancel something before it can react to the second tab being connected.

By now I tried many combinations (as each button in Chat.vue represents a different use-case), but none of them work. (Tried on Chrome and Firefox).

Code below.

// server.js (SocketIO-Server:)

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http, { origins: '*:*'});

io.on("connect", async function (socket) {
	console.log('a user connected');
    console.log("Connected:" + socket.id);   // This is the only one that works, but it works everytime :-)
});

io.on("callToServerToInstance", async function (socket) {
	console.log("This call from Instance was received.") // FAIL
    socket.broadcast.emit("callFromServerFromInstanceToInstance");  
});

io.on("callServer", async function (socket) {
	console.log('Yes, also on Server Console!');  // FAIL
});

http.on("listening", () => {
  const addr = http.address();
  console.log(`Adress  ${addr.address} AND Port ${addr.port}`);
});

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

// App.vue

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue';
import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
 
const socket = io('http://localhost:3000');
 
Vue.use(VueSocketIOExt, socket);
...
Vue.config.productionTip = false
...
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

// Chat.vue

<template>
  <div>
    <h2>Test</h2>
    <button @click="clickInstance">Test To Other Instances</button>
    <button @click="clickSubscribedInstance">Test To Other Subscribed Instances</button>
    <button @click="clickServer"> Test To Server </button>
    <button @click="clickSubInstanceOverServer"> Test To Subscribed Instance over Server </button>
  </div>
</template>

<script>
export default {
  sockets: {
    connect() {
      console.log("socket connected");
    },
    callInstance() {
      console.log("Yes, also in other non-subscribed instances."); // FAIL
    },
    callSubscribedInstances() {
      console.log("Yes also in subscribed instances"); // FAIL
    },
    callFromServerFromInstanceToInstance() {
      console.log("Yes, if Instance Subscribed and Emission routed over Server") // FAIL
    }
  },
  methods: {
    clickServer() {
      console.log("Message triggered. Also in Server Console?");
      this.$socket.client.emit("callServer");
    },
    clickInstance() {
      console.log("Message triggered. Also in other Instances?");
      this.$socket.client.emit("callInstance");
    },
    clickSubscribedInstance() {
      console.log("Message triggered. Also in other subscribed Instances?");
      this.$socket.client.emit("callSubscribedInstances");
    },
    clickSubInstanceOverServer() {
      console.log("Message triggered. Now to Server, then subscribed Instances")
      this.$socket.client.emit("callToServerToInstance")
    },
    mounted() {
      this.$socket.$subscribe("callSubscribedInstances");
      this.$socket.$subscribe("callFromServerFromInstanceToInstance");      
    },
  },
};
</script>