Trouble setting dynamic room name in network a-frame

Question

I'm having two a-texts both directs to same html

<a-text navigate="url: http://../room.html" color="green" position="0 2 0" value="Room 1"></a-text>
<a-text navigate="url: http://../room.html" color="green" position="0 2 0" value="Room 2"></a-text>

navigate is a register component which helps to redirect to different url on clicking text entity

AFRAME.registerComponent("navigate-on-click", {
  schema: {
    url: { default: "" },
  },

  init: function () {
    var data = this.data;
    var el = this.el;

    el.addEventListener("click", function () {
      window.location.href = data.url;
      });
  },
});

but I want to use same html with different room name as room 1 and room 2 so user clicks on different texts enters different room with same html file

<a-scene
    networked-scene="
    room: room;
    debug: true;
    adapter: wseasyrtc;
    serverURL:http://....com/;
  "> 

here room name is hard coded as room but I want to make it dynamic

Answer 1

create a component for dynamic room like this

AFRAME.registerComponent('dynamic-room', {
  init: function () {
    var el = this.el;
    var params = this.getUrlParams();

    if (!params.room) {
      window.alert('Please add a room name in the URL, eg. ?room=myroom');
    }

    var isMultiuser = params.hasOwnProperty('room');
    var webrtc = params.hasOwnProperty('webrtc');
    var adapter = webrtc ? 'easyrtc' : 'wseasyrtc';
    var voice = params.hasOwnProperty('voice');
    
    var networkedComp = {
      room: params.room,
      adapter: adapter,
      audio: voice
    };
    console.info('Init networked-aframe with settings:', networkedComp);
    el.setAttribute('networked-scene', networkedComp);
  },

  getUrlParams: function () {
    var match;
    var pl = /\+/g;  // Regex for replacing addition symbol with a space
    var search = /([^&=]+)=?([^&]*)/g;
    var decode = function (s) { return decodeURIComponent(s.replace(pl, ' ')); };
    var query = window.location.search.substring(1);
    var urlParams = {};

    match = search.exec(query);
    while (match) {
      urlParams[decode(match[1])] = decode(match[2]);
      match = search.exec(query);
    }
    return urlParams;
  }
});

and in a-scene add the component dynamic-room