I've been working on connecting using socket.io (client) and websocket.org (server) with vue.js. Despite going through all the examples, I can establish a connection to the socket but when I emit the event BOARD_ID, I don't receive any response. The socket server being used is wss://echo.websocket.org and I even tried a standalone example which worked perfectly.
main.js
import Vue from "vue";
import VueSocketIO from "vue-socket.io";
import router from "./router";
import App from "./App.vue";
Vue.config.productionTip = false;
Vue.use(
new VueSocketIO({
debug: true,
connection: "wss://echo.websocket.org"
})
);
new Vue({
sockets: {
connect: function () {
console.log("Socket Connected");
}
},
router,
render: (h) => h(App)
}).$mount("#app");
Board.vue
<template>
<div id="Board">
<h3>Board ID :{{ this.$route.params.Bid }}</h3>
<button v-on:click="goToHome">Go To Home</button>
<button v-on:click="updateBoard">Send To Socket</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: "Board",
data() {
return {
domain: "https://someapp.app",
path: "https://someapp.app/board/" + this.$route.params.Bid,
message: "Not Recived",
};
},
methods: {
goToHome() {
this.$router.push({ name: "Home" });
},
updateBoard: function (e) {
this.$socket.emit("BOARD_ID", this.$route.params.Bid);
console.log("Sent...");
},
listenBoard: function () {
this.$socket.on("BOARD_ID", (data) => {
console.log(data);
this.message = "Received: " + data;
});
this.sockets.subscribe("BOARD_ID", (data) => {
console.log(data);
this.message = "Received: " + data;
});
console.log("Listening...");
}
},
mounted: function () {
this.listenBoard();
},
};
</script>