I saw the talk and it was horrifying, I hope the issue is resolved now!

RRaiyan I saw the talk and it was horrifying, I hope the issue is resolved now!

J

James•11/15/23, 1:37 AM

Generally yes, with domain lockdown. But their response and handling of the situation was, and still to this day is, terrible, and not a company I can recommend using for any use case unfortunately.

R

RaiyanOP•11/15/23, 1:38 AM

The interesting part was their market share, I never heard about them before!

S

Stone•11/15/23, 10:40 AM

Has anyone used lerna? I was wondering what was the best way to share code between workers. For example custom auth handling functions ?

K

kian•11/15/23, 10:47 AM

The Workers 'native' way would be having a Worker dedicated to auth that the rest of your Workers can call via https://developers.cloudflare.com/workers/configuration/bindings/about-service-bindings/, but that does incur another request charge.

S

Stone•11/15/23, 11:04 AM

Interesting.. but could it be done differently? Using lerna and have a common code module? I'm a bit old school

K

kian•11/15/23, 11:05 AM

Sure, but that's not Workers specific.

K

kian•11/15/23, 11:06 AM

Wrangler just uses esbuild and bundles your Worker - use NPM packages, import from a file path, etc

S

Stone•11/15/23, 11:07 AM

https://developers.cloudflare.com/workers/tutorials/manage-projects-with-lerna/
...work with multiple Wrangler projects and share dependencies between them.

Managing multiple Workers projects with Lerna · Cloudflare Workers ...

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 , and …

K

kian•11/15/23, 12:14 PM

For the async part, https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/#contextwaituntil.

K

kian•11/15/23, 12:14 PM

This gives you 30 seconds after returning the response where your Worker will continue running.

K

kian•11/15/23, 12:18 PM

Yes

K

kian•11/15/23, 12:19 PM

Just pass it a function that returns a Promise, without awaiting it

K

kian•11/15/23, 12:19 PM

i.e

ctx.waitUntil(foo())

ctx.waitUntil(foo())

ctx.waitUntil(foo())

ctx.waitUntil(foo()) not

ctx.waitUntil(await foo())

ctx.waitUntil(await foo())

ctx.waitUntil(await foo())

ctx.waitUntil(await foo())

K

kian•11/15/23, 12:22 PM

async function doStuff() {
  await scheduler.wait(1000);
  console.log('foo');
}

export default {
  async fetch(req, env, ctx) {
    ctx.waitUntil(doStuff());

    return new Response('bar');
  }
}

async function doStuff() {
  await scheduler.wait(1000);
  console.log('foo');
}

export default {
  async fetch(req, env, ctx) {
    ctx.waitUntil(doStuff());

    return new Response('bar');
  }
}

async function doStuff() {
  await scheduler.wait(1000);
  console.log('foo');
}

export default {
  async fetch(req, env, ctx) {
    ctx.waitUntil(doStuff());

    return new Response('bar');
  }
}

async function doStuff() {
  await scheduler.wait(1000);
  console.log('foo');
}

export default {
  async fetch(req, env, ctx) {
    ctx.waitUntil(doStuff());

    return new Response('bar');
  }
}

T

Tiebienotjuh•11/15/23, 12:53 PM

Hi, i'm using CloudFlare Pages to serving my static website. Now i want to get the location of the user with CloudFlare Workers. Is it possible to use CloudFlare Workers and CloudFlare pages at the same time?

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

H

Hello, I’m Allie!•11/15/23, 12:58 PM

That's where Functions shine

Functions · Cloudflare Pages docs

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

T

Tiebienotjuh•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

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?

I saw the talk and it was horrifying, I hope the issue is resolved now!

Similar Threads

Similar Threads

Similar Threads