Nuxt•4mo ago•

5 replies

Proxy Websocket Messages in Nuxt 3/4

Hey there,

im have implemented a websocket server in my Fastify Backend running separatly from nuxt in a diffrent docker container on same host. I already got endpoint /api/[...].ts up running which proxies everything to backend:

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 { 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 { 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 { joinURL } from 'ufo'

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

  const target = joinURL(apiUrl, event.path)

  return proxyRequest(event, target)
})

Now i noticed that this doesnt work with websockets and even if i enable experimental websocket support in nitro. If i enable the experimental websocket support nitro will boot up and websocket but not proxy it to my backend.

I know that this is an old topic which came up multiple times in the past, however i tried to find a solution to this topic using ChatGPT and Github Copilot which suggested that i build a websocket server using

defineWebSocketHandler

defineWebSocketHandler

defineWebSocketHandler

defineWebSocketHandler and put that into <PROJECT_ROOT>/server/api/ws.ts (Route is currently /api/ws on both frontend and backend). However using the following code peice, i get only errors, because the websocket just reconnects without sending any messages.

I got the frontend logic in browser working which sends messages to the nitro server, but the code doesnt send it to the backend.

IMPORTANT: Im in the dev envoirment currently in Jetbrains Webstorm

In Console i get WebSocket Connectet several thousand times over a span of 5 minutes.

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()
    },
});

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()
    },
});

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()
    },
});

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()
    },
});

i added the queue because when i send on the frontend, i dont know if the connection to backend is established.

Websocket service connection code:

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 ?? '');
})

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 ?? '');
})

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 ?? '');
})

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 ?? '');
})

(websocket service in message below)

Nuxt info:

- Operating System:

Windows_NT

Windows_NT

Windows_NT

Windows_NT
- Node Version:

v22.19.0

v22.19.0

v22.19.0

v22.19.0
- Nuxt Version:

3.17.5

3.17.5

3.17.5

3.17.5
- CLI Version:

3.25.1

3.25.1

3.25.1

3.25.1
- Nitro Version:

2.11.12

2.11.12

2.11.12

2.11.12
- Package Manager:

npm@10.9.3

npm@10.9.3

npm@10.9.3

npm@10.9.3
- Builder:

-

-
- User Config:

modules

modules

modules

modules,

ssr

ssr

ssr

ssr,

devtools

devtools

devtools

devtools,

site

site

site

site,

spaLoadingTemplate

spaLoadingTemplate

spaLoadingTemplate

spaLoadingTemplate,

runtimeConfig

runtimeConfig

runtimeConfig

runtimeConfig,

build

build

routeRules

routeRules

routeRules

routeRules,

devServer

devServer

devServer

devServer,

future

future

future

future,

compatibilityDate

compatibilityDate

compatibilityDate

compatibilityDate,

vite

vite

typescript

typescript

typescript

typescript,

eslint

eslint

eslint

eslint,

i18n

i18n

i18n

i18n,

image

image

image

image,

pwa

pwa

pwa

pwa,

security

security

security

security,

umami

umami

umami

umami
- Runtime Modules:

nuxt-security@2.2.0

nuxt-security@2.2.0

nuxt-security@2.2.0

nuxt-security@2.2.0,

@nuxtjs/i18n@9.5.5

@nuxtjs/i18n@9.5.5

@nuxtjs/i18n@9.5.5

@nuxtjs/i18n@9.5.5,

@pinia/nuxt@0.11.1

@pinia/nuxt@0.11.1

@pinia/nuxt@0.11.1

@pinia/nuxt@0.11.1,

nuxt-umami@3.2.0

nuxt-umami@3.2.0

nuxt-umami@3.2.0

nuxt-umami@3.2.0,

@galaxybotweb/components@1.0.133

@galaxybotweb/components@1.0.133

@galaxybotweb/components@1.0.133

@galaxybotweb/components@1.0.133,

@nuxt/eslint@1.4.1

@nuxt/eslint@1.4.1

@nuxt/eslint@1.4.1

@nuxt/eslint@1.4.1,

@nuxt/image@1.10.0

@nuxt/image@1.10.0

@nuxt/image@1.10.0

@nuxt/image@1.10.0,

nuxt-tiptap-editor@2.2.1

nuxt-tiptap-editor@2.2.1

nuxt-tiptap-editor@2.2.1

nuxt-tiptap-editor@2.2.1,

@vite-pwa/nuxt@1.0.3

@vite-pwa/nuxt@1.0.3

@vite-pwa/nuxt@1.0.3

@vite-pwa/nuxt@1.0.3,

@nuxtjs/robots@5.2.10

@nuxtjs/robots@5.2.10

@nuxtjs/robots@5.2.10

@nuxtjs/robots@5.2.10
- Build Modules:

-

Proxy Websocket Messages in Nuxt 3/4

Similar Threads

Similar Threads

Similar Threads