Relative url in SWR Websocket Subscriptables?

[leftmove]

When I'm using normal SWR, I can put in relative URLs because of the proxy I have setup in my NextJS project.

  const {
    data,
    error,
    isLoading,
  } = useSWR(["/api/relative/route", parameter], ([url, parameter]) => fetcher(url, parameter));

In another part of my project, I have a websocket that I would like to use the useSWRSubscription hook with. In the docs though, it show this as an example.

const { data, error } = useSWRSubscription('ws://...', (key, { next }) => {
    const socket = new WebSocket(key)
    socket.addEventListener('message', (event) => next(null, event.data))
    socket.addEventListener('error', (event) => next(event.error))
    return () => socket.close()
  })

Since there is a ws:// there instead of https://, can I still put relative URLs such as /api/relative/route and just have it use the proxy?

[ezzatron]

You can achieve this using the URL API:

function webSocketURL(url) {
  const absolute = new URL(url, window.location.href);
  absolute.protocol = absolute.protocol.replace("http", "ws");

  return absolute.toString();
}

// ...

const { data, error } = useSWRSubscription("/path/to/socket", (key, { next }) => {
  const socket = new WebSocket(webSocketURL(key))
  
  // ...
})