Receiving webhook in a worker and sending it to the frontend?

DwarfNinja · 2025-02-19T09:04:51.807Z

Hey dear Cloudflare dev's, I receive a webhook from Mollie and want to forward its data to my frontend. As I understand, since workers are stateless, I can't share variables between functions eg. a global `let webhook-data` variable. My current approach stores the data in Cloudflare KV and then polls it to send via websockets or server-sent events, which feels overly complex and has it's own pitfalls. While Durable Objects offer in-memory state, I’m trying to keep costs low and it seems a large solution for what feels to be a small problem. Are there any suggestions how to best solve this? Thanks in advance! See the snippit below for an example of the above case: ```js /// server app.post('/mollie-webhook', async (context) => { const payload = await context.req.text() console.log('Received webhook data:', payload) await context.env.recurify.put('latest-payment', payload) return context.text('Webhook received') }) app.get('/mollie-payment-sse', async (c) => { c.header('Content-Encoding', 'Identity'); return streamSSE(c, async (stream: SSEStreamingApi) => { let lastEventId: string | null = null; while (true) { await stream.sleep(1000); const storedEvent = await c.env.recurify.get('latest-payment'); if (storedEvent) { const eventObj = JSON.parse(storedEvent); if (eventObj.id !== lastEventId) { lastEventId = eventObj.id; await stream.writeSSE({ event: 'new-payment-update', data: eventObj.data, id: eventObj.id, }); } } } }); }); ```

D

DwarfNinjaOP•2/19/25, 7:51 PM

@Leo As mentioned I'd rather use an alternative if possible as it seems that purchasing Workers Pro seems overkill for this problem? Do you have any other suggestions?

Original message was deleted

D

DwarfNinjaOP•2/19/25, 9:06 PM

For the current scope of the project yes, while it seems the're should be an alternative or is Durable Objects the only solution?

DDwarfNinja For the current scope of the project yes, while it seems the're should be an alt...

H

Hard@Work•2/20/25, 2:00 PM

I mean, theoretically, this could work, assuming that Mollie never sends more than one webhook per minute. And assuming that you aren't unlucky and accidentally get a cached read two times in a row. And assuming that the Worker doesn't get evicted.

H

Hard@Work•2/20/25, 2:01 PM

As Leo pointed out, Durable Objects are a much better option for this kind of thing

D

DwarfNinjaOP•2/20/25, 10:31 PM

@Leo & @Hard@Work thank you for your responses. You have one me over and I started with Durable Objects today.
Im trying to learn how they work and currently got this implementation. The problem im now facing is is that the

webhookdata

webhookdata

webhookdata

webhookdata is null when retrieved in the stream.

Stub WebhookData: null

Stub WebhookData: null

Stub WebhookData: null

Stub WebhookData: null

What am I missing here? Is the Durable Object disposed in between

/mollie-webhook

/mollie-webhook

/mollie-webhook

/mollie-webhook and

/mollie-payment-sse

/mollie-payment-sse

/mollie-payment-sse

/mollie-payment-sse?

Thanks in advance!

//index.ts
app.post('/mollie-webhook', async (context, env) => {
    const payload = await context.req.text()
    console.log('Received webhook data:', payload)

    const id = context.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
    const stub =  context.env.DURABLE_WEBHOOK.get(id);

    const rpcResponse = await stub.storeWebhookData(payload);
    console.log(rpcResponse);

    return context.text('Webhook received')
})

app.get('/mollie-payment-sse', async (c) => {

    return streamSSE(c, async (stream: SSEStreamingApi) => {
        const id = c.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
        const stub = c.env.DURABLE_WEBHOOK.get(id);

        while (true) {
            await stream.sleep(1000);

            const webhookData = await stub.getWebhookData();
            console.log(`Stub WebhookData: ${webhookData}`);

            if (webhookData) {
                await stream.writeSSE({
                    event: "new-payment-update",
                    data: webhookData
                });

                await stub.clearWebhookData();
            }
        }
    });
});

//index.ts
app.post('/mollie-webhook', async (context, env) => {
    const payload = await context.req.text()
    console.log('Received webhook data:', payload)

    const id = context.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
    const stub =  context.env.DURABLE_WEBHOOK.get(id);

    const rpcResponse = await stub.storeWebhookData(payload);
    console.log(rpcResponse);

    return context.text('Webhook received')
})

app.get('/mollie-payment-sse', async (c) => {

    return streamSSE(c, async (stream: SSEStreamingApi) => {
        const id = c.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
        const stub = c.env.DURABLE_WEBHOOK.get(id);

        while (true) {
            await stream.sleep(1000);

            const webhookData = await stub.getWebhookData();
            console.log(`Stub WebhookData: ${webhookData}`);

            if (webhookData) {
                await stream.writeSSE({
                    event: "new-payment-update",
                    data: webhookData
                });

                await stub.clearWebhookData();
            }
        }
    });
});

//index.ts
app.post('/mollie-webhook', async (context, env) => {
    const payload = await context.req.text()
    console.log('Received webhook data:', payload)

    const id = context.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
    const stub =  context.env.DURABLE_WEBHOOK.get(id);

    const rpcResponse = await stub.storeWebhookData(payload);
    console.log(rpcResponse);

    return context.text('Webhook received')
})

app.get('/mollie-payment-sse', async (c) => {

    return streamSSE(c, async (stream: SSEStreamingApi) => {
        const id = c.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
        const stub = c.env.DURABLE_WEBHOOK.get(id);

        while (true) {
            await stream.sleep(1000);

            const webhookData = await stub.getWebhookData();
            console.log(`Stub WebhookData: ${webhookData}`);

            if (webhookData) {
                await stream.writeSSE({
                    event: "new-payment-update",
                    data: webhookData
                });

                await stub.clearWebhookData();
            }
        }
    });
});

//index.ts
app.post('/mollie-webhook', async (context, env) => {
    const payload = await context.req.text()
    console.log('Received webhook data:', payload)

    const id = context.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
    const stub =  context.env.DURABLE_WEBHOOK.get(id);

    const rpcResponse = await stub.storeWebhookData(payload);
    console.log(rpcResponse);

    return context.text('Webhook received')
})

app.get('/mollie-payment-sse', async (c) => {

    return streamSSE(c, async (stream: SSEStreamingApi) => {
        const id = c.env.DURABLE_WEBHOOK.idFromName("durable_webhook");
        const stub = c.env.DURABLE_WEBHOOK.get(id);

        while (true) {
            await stream.sleep(1000);

            const webhookData = await stub.getWebhookData();
            console.log(`Stub WebhookData: ${webhookData}`);

            if (webhookData) {
                await stream.writeSSE({
                    event: "new-payment-update",
                    data: webhookData
                });

                await stub.clearWebhookData();
            }
        }
    });
});

D

DwarfNinjaOP•2/20/25, 10:31 PM

//durable-webhook.ts
import { DurableObject } from "cloudflare:workers";
import {Env} from "hono";

export class DurableWebhook extends DurableObject {
    webhookData: string | null = null;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
    }

    // Stores incoming webhook data
    async storeWebhookData(webhookData: string): Promise<string> {
        this.webhookData = webhookData;
        return "Webhook data stored";
    }

    // Returns the stored webhook data (if any)
    async getWebhookData(): Promise<string | null> {
        return this.webhookData;
    }

    // Clears the stored webhook data
    async clearWebhookData(): Promise<void> {
        this.webhookData = null;
    }
}

//durable-webhook.ts
import { DurableObject } from "cloudflare:workers";
import {Env} from "hono";

export class DurableWebhook extends DurableObject {
    webhookData: string | null = null;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
    }

    // Stores incoming webhook data
    async storeWebhookData(webhookData: string): Promise<string> {
        this.webhookData = webhookData;
        return "Webhook data stored";
    }

    // Returns the stored webhook data (if any)
    async getWebhookData(): Promise<string | null> {
        return this.webhookData;
    }

    // Clears the stored webhook data
    async clearWebhookData(): Promise<void> {
        this.webhookData = null;
    }
}

//durable-webhook.ts
import { DurableObject } from "cloudflare:workers";
import {Env} from "hono";

export class DurableWebhook extends DurableObject {
    webhookData: string | null = null;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
    }

    // Stores incoming webhook data
    async storeWebhookData(webhookData: string): Promise<string> {
        this.webhookData = webhookData;
        return "Webhook data stored";
    }

    // Returns the stored webhook data (if any)
    async getWebhookData(): Promise<string | null> {
        return this.webhookData;
    }

    // Clears the stored webhook data
    async clearWebhookData(): Promise<void> {
        this.webhookData = null;
    }
}

//durable-webhook.ts
import { DurableObject } from "cloudflare:workers";
import {Env} from "hono";

export class DurableWebhook extends DurableObject {
    webhookData: string | null = null;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
    }

    // Stores incoming webhook data
    async storeWebhookData(webhookData: string): Promise<string> {
        this.webhookData = webhookData;
        return "Webhook data stored";
    }

    // Returns the stored webhook data (if any)
    async getWebhookData(): Promise<string | null> {
        return this.webhookData;
    }

    // Clears the stored webhook data
    async clearWebhookData(): Promise<void> {
        this.webhookData = null;
    }
}

D

DwarfNinjaOP•2/21/25, 8:56 AM

EDIT SOLVED

: Got it to work by using Durable Object Storage to store the received webhook data during the

/mollie-webhook

/mollie-webhook

/mollie-webhook

/mollie-webhook call and later retrieve it in

/mollie-payment-sse

/mollie-payment-sse

/mollie-payment-sse

/mollie-payment-sse.
I assume it's due to that the Durable Object is destroyed after it is used in

/mollie-webhook

/mollie-webhook

/mollie-webhook

/mollie-webhook which means it loses it's state, but I'll need someone to confirm that.

Original message was deleted

D

DwarfNinjaOP•2/21/25, 11:28 AM

May I ask why it is better for the DO to handle the connection?
How would I migratie the functionality into the DO? Can I just pretty much copy paste the

app.post

app.post

app.post

app.post and

app.get

app.get

app.get

app.get code? (ps. im using hono)
Thank you in advance!

Original message was deleted

D

DwarfNinjaOP•2/22/25, 8:52 PM

Alright, I migrated the connections to the Durable Object and I currently have the following, but I somehow can't get my client to receive any message. Cloudflare logs show the socket is closed right after opening. What's the issue here?

// index.ts
app.post('/mollie-payment-webhook', async (context, env) => {
    const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
    const stub =  context.env.DURABLE_CUSTOMER_ID.get(id);

    await stub.fetch(context.req.raw);

    return context.text('Webhook received', 200);
});

app.get(
    '/mollie-payment-websocket',
    upgradeWebSocket(async (context) => {
        const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
        const stub = context.env.DURABLE_CUSTOMER_ID.get(id);

        return stub.fetch(context.req.raw);
    })
);

// index.ts
app.post('/mollie-payment-webhook', async (context, env) => {
    const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
    const stub =  context.env.DURABLE_CUSTOMER_ID.get(id);

    await stub.fetch(context.req.raw);

    return context.text('Webhook received', 200);
});

app.get(
    '/mollie-payment-websocket',
    upgradeWebSocket(async (context) => {
        const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
        const stub = context.env.DURABLE_CUSTOMER_ID.get(id);

        return stub.fetch(context.req.raw);
    })
);

// index.ts
app.post('/mollie-payment-webhook', async (context, env) => {
    const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
    const stub =  context.env.DURABLE_CUSTOMER_ID.get(id);

    await stub.fetch(context.req.raw);

    return context.text('Webhook received', 200);
});

app.get(
    '/mollie-payment-websocket',
    upgradeWebSocket(async (context) => {
        const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
        const stub = context.env.DURABLE_CUSTOMER_ID.get(id);

        return stub.fetch(context.req.raw);
    })
);

// index.ts
app.post('/mollie-payment-webhook', async (context, env) => {
    const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
    const stub =  context.env.DURABLE_CUSTOMER_ID.get(id);

    await stub.fetch(context.req.raw);

    return context.text('Webhook received', 200);
});

app.get(
    '/mollie-payment-websocket',
    upgradeWebSocket(async (context) => {
        const id = context.env.DURABLE_CUSTOMER_ID.idFromName("customer_id");
        const stub = context.env.DURABLE_CUSTOMER_ID.get(id);

        return stub.fetch(context.req.raw);
    })
);

D

DwarfNinjaOP•2/22/25, 8:53 PM

// durable_customer_id.ts
import {DurableObject} from "cloudflare:workers";
import { Hono } from 'hono'
import {Env} from "hono";

export class DurableCustomerId extends DurableObject {
    state: DurableObjectState;
    app: Hono = new Hono();
    sockets: Set<WebSocket>;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
        this.state = state;
        this.sockets = new Set<WebSocket>();
        const websockets = this.ctx.getWebSockets();

        for (const ws of websockets) {
            this.sockets.add(ws);
        }

        this.app.post('/mollie-payment-webhook', async (context, env) => {
            const payload = await context.req.text();
            console.log('Received webhook data:', payload);

            const customerId = payload.split('=')[1]

            for (const socket of this.sockets) {
                console.log('Websocket Data Sent:', payload);
                socket.send(customerId);
            }

            return context.text('Webhook received', 200);
        });

        this.app.get('/mollie-payment-websocket', (context) => {
            const { 0: client, 1: server } = new WebSocketPair();

            server.accept();

            this.sockets.add(server);
            console.log('New WebSocket client connected');

            for (const socket of this.sockets) {
                socket.send(" I'm Connected");
            }

            server.addEventListener('message', (event) => {
                console.log('Message from client:', event.data);
            });

            server.addEventListener('close', () => {
                this.sockets.delete(server);
                console.log('WebSocket client disconnected');
            });

            return new Response(null, {
                status: 101,
                webSocket: client,
            });
        });
    }
    async fetch(request: Request) {
        return this.app.fetch(request)
    }
}

// durable_customer_id.ts
import {DurableObject} from "cloudflare:workers";
import { Hono } from 'hono'
import {Env} from "hono";

export class DurableCustomerId extends DurableObject {
    state: DurableObjectState;
    app: Hono = new Hono();
    sockets: Set<WebSocket>;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
        this.state = state;
        this.sockets = new Set<WebSocket>();
        const websockets = this.ctx.getWebSockets();

        for (const ws of websockets) {
            this.sockets.add(ws);
        }

        this.app.post('/mollie-payment-webhook', async (context, env) => {
            const payload = await context.req.text();
            console.log('Received webhook data:', payload);

            const customerId = payload.split('=')[1]

            for (const socket of this.sockets) {
                console.log('Websocket Data Sent:', payload);
                socket.send(customerId);
            }

            return context.text('Webhook received', 200);
        });

        this.app.get('/mollie-payment-websocket', (context) => {
            const { 0: client, 1: server } = new WebSocketPair();

            server.accept();

            this.sockets.add(server);
            console.log('New WebSocket client connected');

            for (const socket of this.sockets) {
                socket.send(" I'm Connected");
            }

            server.addEventListener('message', (event) => {
                console.log('Message from client:', event.data);
            });

            server.addEventListener('close', () => {
                this.sockets.delete(server);
                console.log('WebSocket client disconnected');
            });

            return new Response(null, {
                status: 101,
                webSocket: client,
            });
        });
    }
    async fetch(request: Request) {
        return this.app.fetch(request)
    }
}

// durable_customer_id.ts
import {DurableObject} from "cloudflare:workers";
import { Hono } from 'hono'
import {Env} from "hono";

export class DurableCustomerId extends DurableObject {
    state: DurableObjectState;
    app: Hono = new Hono();
    sockets: Set<WebSocket>;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
        this.state = state;
        this.sockets = new Set<WebSocket>();
        const websockets = this.ctx.getWebSockets();

        for (const ws of websockets) {
            this.sockets.add(ws);
        }

        this.app.post('/mollie-payment-webhook', async (context, env) => {
            const payload = await context.req.text();
            console.log('Received webhook data:', payload);

            const customerId = payload.split('=')[1]

            for (const socket of this.sockets) {
                console.log('Websocket Data Sent:', payload);
                socket.send(customerId);
            }

            return context.text('Webhook received', 200);
        });

        this.app.get('/mollie-payment-websocket', (context) => {
            const { 0: client, 1: server } = new WebSocketPair();

            server.accept();

            this.sockets.add(server);
            console.log('New WebSocket client connected');

            for (const socket of this.sockets) {
                socket.send(" I'm Connected");
            }

            server.addEventListener('message', (event) => {
                console.log('Message from client:', event.data);
            });

            server.addEventListener('close', () => {
                this.sockets.delete(server);
                console.log('WebSocket client disconnected');
            });

            return new Response(null, {
                status: 101,
                webSocket: client,
            });
        });
    }
    async fetch(request: Request) {
        return this.app.fetch(request)
    }
}

// durable_customer_id.ts
import {DurableObject} from "cloudflare:workers";
import { Hono } from 'hono'
import {Env} from "hono";

export class DurableCustomerId extends DurableObject {
    state: DurableObjectState;
    app: Hono = new Hono();
    sockets: Set<WebSocket>;

    constructor(state: DurableObjectState, env: Env) {
        super(state, env);
        this.state = state;
        this.sockets = new Set<WebSocket>();
        const websockets = this.ctx.getWebSockets();

        for (const ws of websockets) {
            this.sockets.add(ws);
        }

        this.app.post('/mollie-payment-webhook', async (context, env) => {
            const payload = await context.req.text();
            console.log('Received webhook data:', payload);

            const customerId = payload.split('=')[1]

            for (const socket of this.sockets) {
                console.log('Websocket Data Sent:', payload);
                socket.send(customerId);
            }

            return context.text('Webhook received', 200);
        });

        this.app.get('/mollie-payment-websocket', (context) => {
            const { 0: client, 1: server } = new WebSocketPair();

            server.accept();

            this.sockets.add(server);
            console.log('New WebSocket client connected');

            for (const socket of this.sockets) {
                socket.send(" I'm Connected");
            }

            server.addEventListener('message', (event) => {
                console.log('Message from client:', event.data);
            });

            server.addEventListener('close', () => {
                this.sockets.delete(server);
                console.log('WebSocket client disconnected');
            });

            return new Response(null, {
                status: 101,
                webSocket: client,
            });
        });
    }
    async fetch(request: Request) {
        return this.app.fetch(request)
    }
}

J

jb•4/17/25, 12:23 AM

It's a bit late, and may not help but an initial implementation of this comment worked for me
https://github.com/honojs/hono/issues/3206#issuecomment-2269013293

GitHub

Durable Object not triggered with Hono · Issue #3206 · honojs/hono

What version of Hono are you using? 4.5.2 What runtime/platform is your app running on? Cloudflare Worker What steps can reproduce the bug? Here is my route route.get("/ws/:id", ...rideCo...

Receiving webhook in a worker and sending it to the frontend?

Similar Threads

Similar Threads

Similar Threads