Stream Layer With Custom WebSocket URL + Azure WebPubSub + JS API 4.24

Question

Hi,

I am trying to setup a StreamLayer with a custom WebSocket url, using Azure WebPubSub.

using the simple constructor as seen below:

const streamLayer = new StreamLayer({
    popupTemplate: {
      content: "OBJECTID={OBJECTID}, TRACKID={TRACKID}",
    },

webSocketUrl: "wss://stream-layer.webpubsub.azure.com/client/hubs/SomeHub?access_token=xyz",

objectIdField: "OBJECTID",

fields: [
      {
        name: "OBJECTID",
        alias: "ObjectId",
        type: "oid",
      },
      {
        name: "TRACKID",
        alias: "TrackId",
        type: "oid",
      },
    ],

timeInfo: {
      trackIdField: "TRACKID",
    },

geometryType: "point",

maxReconnectionAttempts: 100,
    maxReconnectionInterval: 10,

renderer: {
      type: "simple",
      symbol: {
        type: "simple-marker",
        size: "8px",
        color: "gray",
      },
    },
  });

map.add(streamLayer);

Azure WebPubSub requires an access token to be added as a query string to the end of the websocket url.

wss://stream-layer.webpubsub.azure.com/client/hubs/SomeHub?access_token=xyz

For some reason when trying use the websocket url on StreamLayer, it seems to remove the query string from the end of the websocket url?

So you end up with: wss://stream-layer.webpubsub.azure.com/client/hubs/SomeHub

Koob · Accepted Answer

okay, found the answer:

needed to add custom parameters

customParameters: {
   access_token: "token"
}