WebSockets data per channel or room

Hi!
I have been going crazy trying to figure out this, so it would be amazing if I can get any help!

I am new to all this about websockets, but I am trying to apply this to my project. Also, I am not sure what is the difference between rooms and channels, and when to use each.

So, I have multiple project pages in my app, and I am trying to add realtime data changes to each page by adding dynamic channels to each one (Ex: page:${page.id}), and also some message saying that “this is page is being edited by XXX user”.

I have been able to setup websockets with vue, but I am getting confused with the channels, since I am swapping pages directly and the connections do not work very well when I do that, in fact I think multiple channels get are listening instead of just one.

import Ws from "@adonisjs/websocket-client/index"; const ws = Ws("ws://localhost:3333");

export default{
// …

mounted(){
this.socketConnection();
},

methods: {

  socketConnection(){
  if (!this.connection) {
    ws.connect();
  }

  ws.on("open", () => {
    this.connection = true;
    console.log("open connection succesful");
    this.subscribeSocket();
  });

  ws.on("error", error => {
    this.connection = false;
    console.log("error: open websocket: ", error);
    ws.close();
  });

},

subscribeSocket() {
  const channel = `project:${this.project.id}`;

  this.subscription = ws.getSubscription(channel);
  if (!this.subscription) {
    this.subscription = ws.subscribe(channel);
  }

  this.subscription.on("error", (error) => {
    console.log("error: subscribe to channel room", error);
  });

  this.subscription.on("updatedData", layout => {
    console.log("onUpdatedData");
    // Store Data
    this.editing.data = false;
  });
  this.subscription.on("editing", data => {
    this.editing = data;
  });
}

},

watch: {
$route(value, oldvalue){
if (this.connection) {
// this.subscription.close();
ws.removeSubscription(dashboard:${oldValue.params.dashboardId})
this.connection = false;
}
this.connectSocket();
}
}

sorry for the big chunk of code…
I am just trying to figure out the best way to handle this.

Also, I have been trying to emit onClose to get rid of the editing message, but it doesnt fire, any thoughts?

onClose() { console.log("onClose"); if (editing.socketid == this.socket.id) { editing.data = false; this.socket.emit("editing", editing); } }

Hello!

It sounds like you’ve been reading documentation of version 3 AdonisJS, current stable version is 4.1 :wink:
https://adonisjs.com/docs/4.1/websocket

Not entirely sure what your question is, but to offload you can use Vue lifecycle hooks, like beforeDestroy()