Hi, i'm using CloudFlare Pages to serving my static website. Now i want to get the location of the u

TTiebienotjuh Hi, i'm using CloudFlare Pages to serving my static website. Now i want to get t...

H

That's where Functions shine

Pages Functions allows you to build full-stack applications by executing code on the Cloudflare network with Cloudflare Workers. With Functions, you …

T

TiebienotjuhOP•11/15/23, 1:00 PM

Yes, I came across that one. But I kept coming up with d1, r2, and cloudflare ai. But euh yes again I did not fully read the docs. Sorry

K

kian•11/15/23, 1:26 PM

Because then you're waiting for the Promise to resolve before it's passed to waitUntil, meaning waitUntil is useless.

K

kian•11/15/23, 1:27 PM

The idea is that

waitUntil

waitUntil

waitUntil

waitUntil will keep your Worker alive, after returning a

Response

Response

, until the promise resolves.

K

kian•11/15/23, 1:30 PM

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(doStuff());
        console.log('bar')

        return new Response(null);
    }
}

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(doStuff());
        console.log('bar')

        return new Response(null);
    }
}

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(doStuff());
        console.log('bar')

        return new Response(null);
    }
}

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(doStuff());
        console.log('bar')

        return new Response(null);
    }
}

bar
13:29:15 GET / 200                                             
foo

bar
13:29:15 GET / 200                                             
foo

bar
13:29:15 GET / 200                                             
foo

bar
13:29:15 GET / 200                                             
foo

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(await doStuff());
        console.log('bar')

        return new Response(null);
    }
}

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(await doStuff());
        console.log('bar')

        return new Response(null);
    }
}

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(await doStuff());
        console.log('bar')

        return new Response(null);
    }
}

export default {
    async fetch(req, env, ctx) {
        ctx.waitUntil(await doStuff());
        console.log('bar')

        return new Response(null);
    }
}

foo
bar
13:30:16 GET / 200

foo
bar
13:30:16 GET / 200

foo
bar
13:30:16 GET / 200

foo
bar
13:30:16 GET / 200

K

kian•11/15/23, 2:44 PM

Does your Worker have Service Bindings? Canceled is typical with those if the requesting Worker doesn't read the body.

K

kian•11/15/23, 2:44 PM

I'm asking that since I'm curious which one is the real outcome -

canceled

canceled

canceled

canceled or

daemon_down

daemon_down

daemon_down

daemon_down

M

Mk•11/15/23, 3:00 PM

why is api and dns not connecting???

Ssergi hi! I am developing a worker to serve some images from AWS S3. I'm using Cloudfl...

E

Erisa•11/15/23, 3:04 PM

The product merge has not happneed yet so we are in the state before that where Image Resizing and Images are separate products.

In this state, an Images subscription does not impact your ability to resize. Using Image Resizing in this state requires the feature to be enabled on a Pro ($25/mo) plan zone.

Once the product merge happens, your Images subscription will begin allowing you to resize and if you are not storing images you will be able to use the $0/mo plan that will be added.

So rather than the merge causing problems, the merge will fix them when it happens

E

Erisa•11/15/23, 3:06 PM

Well you can if you want but you can also wait a short time for the product merge which will not require Pro anymore

E

Erisa•11/15/23, 3:06 PM

up to you whether thats worth it

E

Erisa•11/15/23, 3:06 PM

and depends how much of a hurry you're in

E

Erisa•11/15/23, 3:08 PM

After the merge you need a Images subscription but there will be a new $0/mo + usage tier added

B

boywonder350•11/15/23, 5:36 PM

  const variationR2Results: Array<{ width: number; id: string }> = [];

  for (const variationResponse of variationResponses) {
    const result = await context.env.MY_BUCKET.put(
      variationResponse.key,
      variationResponse.response.body,
      {
        httpMetadata: {
          contentType,
        },
      }
    );

    variationR2Results.push({
      id: result.key,
      width: variationResponse.width,
    });
  }

  const variationR2Results: Array<{ width: number; id: string }> = [];

  for (const variationResponse of variationResponses) {
    const result = await context.env.MY_BUCKET.put(
      variationResponse.key,
      variationResponse.response.body,
      {
        httpMetadata: {
          contentType,
        },
      }
    );

    variationR2Results.push({
      id: result.key,
      width: variationResponse.width,
    });
  }

  const variationR2Results: Array<{ width: number; id: string }> = [];

  for (const variationResponse of variationResponses) {
    const result = await context.env.MY_BUCKET.put(
      variationResponse.key,
      variationResponse.response.body,
      {
        httpMetadata: {
          contentType,
        },
      }
    );

    variationR2Results.push({
      id: result.key,
      width: variationResponse.width,
    });
  }

  const variationR2Results: Array<{ width: number; id: string }> = [];

  for (const variationResponse of variationResponses) {
    const result = await context.env.MY_BUCKET.put(
      variationResponse.key,
      variationResponse.response.body,
      {
        httpMetadata: {
          contentType,
        },
      }
    );

    variationR2Results.push({
      id: result.key,
      width: variationResponse.width,
    });
  }

I have this code, I even used a single for loop to control parallel responses, and I keep getting "Response closed due to connection limit",
"Error: Response closed due to connection limit"

What am I missing here? There is no other parallel code happening at this time, just uploading 10 variations to R2...

U

Unsmart•11/15/23, 5:37 PM

You can have at most 6 outbound requests in progress at a time: https://developers.cloudflare.com/workers/platform/limits/#simultaneous-open-connections

B

boywonder350•11/15/23, 5:38 PM

Yeah... but how could there be 6 outbound requests at the same time with the code I shared?

U

Unsmart•11/15/23, 5:38 PM

If you say you want 10 variations then you have 10 outbound requests at the same time currently

U

Unsmart•11/15/23, 5:39 PM

If you switch to

for await (const variationResponse of variationResponses)

for await (const variationResponse of variationResponses)

for await (const variationResponse of variationResponses)

for await (const variationResponse of variationResponses) it will do one at a time

B

boywonder350•11/15/23, 5:41 PM

here is my code to generate the variations (total would be 10)

async function createAllVariationsForR2Image({
  originalId,
  originalUrl,
  imgProxyKey,
  imgProxySalt,
  imgProxyUrl,
}: CreateAllVariationsForR2ImageOptions) {
  const source = stringToBase64Url(originalUrl);
  const limit = plimit(3);

  const promises: Promise<{
    response: Response;
    width: number;
    key: string;
  }>[] = [];

  const lastDotIndex = originalId.lastIndexOf(".");
  const baseName = originalId.slice(0, lastDotIndex);
  const extension = originalId.slice(lastDotIndex + 1);

  for (const variation of variations) {
    for (const dpr of [1, 2]) {
      const path = `/rs:fit:${variation.width}:0/dpr:${dpr}/${source}`;
      const signature = await sign(imgProxySalt, path, imgProxyKey);
      const resizeUrl = `${imgProxyUrl}/${signature}${path}`;

      console.log("resizeUrl", resizeUrl);

      promises.push(
        limit(async () => {
          const response = await fetch(resizeUrl);
          return {
            response,
            width: variation.width,
            key: `${baseName}_${variation.id}_${dpr}x.${extension}`,
          };
        })
      );
    }
  }

  const resolvedPromises = await Promise.all(promises);
  return resolvedPromises;
}

async function createAllVariationsForR2Image({
  originalId,
  originalUrl,
  imgProxyKey,
  imgProxySalt,
  imgProxyUrl,
}: CreateAllVariationsForR2ImageOptions) {
  const source = stringToBase64Url(originalUrl);
  const limit = plimit(3);

  const promises: Promise<{
    response: Response;
    width: number;
    key: string;
  }>[] = [];

  const lastDotIndex = originalId.lastIndexOf(".");
  const baseName = originalId.slice(0, lastDotIndex);
  const extension = originalId.slice(lastDotIndex + 1);

  for (const variation of variations) {
    for (const dpr of [1, 2]) {
      const path = `/rs:fit:${variation.width}:0/dpr:${dpr}/${source}`;
      const signature = await sign(imgProxySalt, path, imgProxyKey);
      const resizeUrl = `${imgProxyUrl}/${signature}${path}`;

      console.log("resizeUrl", resizeUrl);

      promises.push(
        limit(async () => {
          const response = await fetch(resizeUrl);
          return {
            response,
            width: variation.width,
            key: `${baseName}_${variation.id}_${dpr}x.${extension}`,
          };
        })
      );
    }
  }

  const resolvedPromises = await Promise.all(promises);
  return resolvedPromises;
}

async function createAllVariationsForR2Image({
  originalId,
  originalUrl,
  imgProxyKey,
  imgProxySalt,
  imgProxyUrl,
}: CreateAllVariationsForR2ImageOptions) {
  const source = stringToBase64Url(originalUrl);
  const limit = plimit(3);

  const promises: Promise<{
    response: Response;
    width: number;
    key: string;
  }>[] = [];

  const lastDotIndex = originalId.lastIndexOf(".");
  const baseName = originalId.slice(0, lastDotIndex);
  const extension = originalId.slice(lastDotIndex + 1);

  for (const variation of variations) {
    for (const dpr of [1, 2]) {
      const path = `/rs:fit:${variation.width}:0/dpr:${dpr}/${source}`;
      const signature = await sign(imgProxySalt, path, imgProxyKey);
      const resizeUrl = `${imgProxyUrl}/${signature}${path}`;

      console.log("resizeUrl", resizeUrl);

      promises.push(
        limit(async () => {
          const response = await fetch(resizeUrl);
          return {
            response,
            width: variation.width,
            key: `${baseName}_${variation.id}_${dpr}x.${extension}`,
          };
        })
      );
    }
  }

  const resolvedPromises = await Promise.all(promises);
  return resolvedPromises;
}

async function createAllVariationsForR2Image({
  originalId,
  originalUrl,
  imgProxyKey,
  imgProxySalt,
  imgProxyUrl,
}: CreateAllVariationsForR2ImageOptions) {
  const source = stringToBase64Url(originalUrl);
  const limit = plimit(3);

  const promises: Promise<{
    response: Response;
    width: number;
    key: string;
  }>[] = [];

  const lastDotIndex = originalId.lastIndexOf(".");
  const baseName = originalId.slice(0, lastDotIndex);
  const extension = originalId.slice(lastDotIndex + 1);

  for (const variation of variations) {
    for (const dpr of [1, 2]) {
      const path = `/rs:fit:${variation.width}:0/dpr:${dpr}/${source}`;
      const signature = await sign(imgProxySalt, path, imgProxyKey);
      const resizeUrl = `${imgProxyUrl}/${signature}${path}`;

      console.log("resizeUrl", resizeUrl);

      promises.push(
        limit(async () => {
          const response = await fetch(resizeUrl);
          return {
            response,
            width: variation.width,
            key: `${baseName}_${variation.id}_${dpr}x.${extension}`,
          };
        })
      );
    }
  }

  const resolvedPromises = await Promise.all(promises);
  return resolvedPromises;
}

but this completes and then I try to for loop over the variations

B

boywonder350•11/15/23, 5:42 PM

but I pass response.body to r2, what wouldn't be an issue right?

U

Unsmart•11/15/23, 5:45 PM

You can pass response.body to r2 yes. The issue was that you are running the r2.put command 10 times in parallel which goes over the limit of 6 outbound requests.

B

boywonder350•11/15/23, 5:46 PM

I tried the for await (const...) and still got the same issue

B

boywonder350•11/15/23, 5:51 PM

I changed my code to do the fetch and put into r2 within the same plimit and it is working now

B

bharatsuthar07•11/15/23, 6:20 PM

I have attached 2 screenshots. please let me know which one is correct for batch processing of users array by using queue. should I add all 300 customers array simultaneously into message queue and then iterate them one by one on consumer side...
or Producer side only, I have to add all customers one by one into message queue by iterating? I have to do batch processing of customer array (elements of array are objects), so question is I should add this 300 customers array collectively inside message queue or one by one?
I attached screenshot for both versions, let me know which one is correct
my message queue name is batchKv

R

Rich•11/15/23, 6:40 PM

Does Cloudflare provide subresource cache stats (hits / misses made via the Cache API or fetch API) ?

R

rob•11/15/23, 7:29 PM

so if im using nextjs for my app, and deploy it on Pages, do those next js api routes get deployed as workers?

Rrob so if im using nextjs for my app, and deploy it on Pages, do those next js api ...

S

sathoro•11/15/23, 8:12 PM

not exactly, you are using Pages and not Workers so there are slight differences

J

JJ Mocko - Adapture•11/15/23, 8:31 PM

Hi everybody.. Question: Can you utilize a custom managed challenge page through workers? I have a zone that is shared between multiple clients, and one of them wants to use a unique styled Managed Challenge page.. so we cannot set that up using the usual "custom Error pages" integration. So is this possible through the worker to call that MC page, and then if they pass successfully, carry that through the session?

Pprender yes, if you talk about subrequests, it will be visible in the analytics

R

Rich•11/15/23, 9:07 PM

Yes, I meant subrequests. We're caching POST requests to a third party API (similar to how it's done here https://developers.cloudflare.com/workers/examples/cache-post-request/), but they don't show up in the dashboard

R

Rich•11/15/23, 9:10 PM

It's done with the Cache API (

caches.open("app")

caches.open("app")

caches.open("app")

caches.open("app")) -- in a CF Pages deployment

D

dave•11/16/23, 12:12 AM

How can I decode an arraybufferthat is using UTF-8 CRLF?

J

James•11/16/23, 12:13 AM

Does a basic

TextEncoder

TextEncoder

TextEncoder

TextEncoder not work?

D

dave•11/16/23, 12:14 AM

I tried

new TextDecoder("utf-8").decode(await request.arrayBuffer());

new TextDecoder("utf-8").decode(await request.arrayBuffer());

new TextDecoder("utf-8").decode(await request.arrayBuffer());

new TextDecoder("utf-8").decode(await request.arrayBuffer()); already :/

J

James•11/16/23, 12:14 AM

that should be all you need afaik

Hi, i'm using CloudFlare Pages to serving my static website. Now i want to get the location of the u

Similar Threads

Similar Threads

Similar Threads