Proxy Websocket Messages in Nuxt 3/4

import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  const apiUrl = useRuntimeConfig().apiUrl as string

  const target = joinURL(apiUrl, event.path)

  return proxyRequest(event, target)
})

import WebSocket from 'ws';

export default defineWebSocketHandler({
    open(peer) {
        const backend = new WebSocket(peer.request.url);
        const queue:string[] = [];

        backend.on("open", () => {
            console.log("WebSocket opened");
            for(const msg of queue) {
                backend.send(msg);
            }
        })

        // forward backend messages → client
        backend.on('message', (data) => peer.send(data));
        peer.websocket.onmessage = (msg) => {
            if(backend.readyState !== WebSocket.OPEN) {
                queue.push(msg.data as string);
                return;
            }
            console.log("<" + msg.data);
            backend.send(msg.data);
        }

        backend.on('close', () => peer.close());
        peer.websocket.onclose = () => backend.close()
    },
});

websocket.requestUpdate(["teams", "status"]);
websocket.requestTeamsList();

websocket.on("*", (message: WebsocketMessage) => {
    if(message.type === 'error' && message.data){
        error.value = message.data.message;
    }
    else {
        useWebsocketRequestHandler(message);
    }
})

onMounted(async () => {
    // some other logic
    websocket.connect(useAuth().findAccessToken()?.token ?? '');
})