shengyuan Posts - Answer Overflow

shengyuan

•Created by shengyuan on 4/16/2024 in #workers-help

Does the local runtime support streaming response?

When I deploy, the page can respond with streaming, but the page render at same time when it locally through dev. https://flat-wood-88f1.269476124.workers.dev/ This is my Code :

async function handleRequest(request: Request, env: Env): Promise<Response> {
  const stream = new ReadableStream({
    async start(controller) {
      const skeleton = `<html>
                          <head><title>Loading...</title></head>
                          <body>
                            <div id="skeleton">Loading content...</div>`;
      controller.enqueue(new TextEncoder().encode(skeleton));
      for(let i = 0; i < 5; i++) {
         const loadingPlaceholder = `<div id="loading-chunk-${i}">Chunk ${i + 1} is loading...</div>`;
          controller.enqueue(new TextEncoder().encode(loadingPlaceholder));
      }
      async function pushChunks() {
        for (let i = 0; i < 5; i++) {
          
          const chunk = `<div>✅ Chunk ${i + 1}</div>`;
          
          await delay(1000); 
          
          const replaceScript = `<script>
                                  document.getElementById('loading-chunk-${i}').outerHTML = \`${chunk}\`;
                                </script>`;
          controller.enqueue(new TextEncoder().encode(replaceScript));
        }
        controller.enqueue(new TextEncoder().encode('</body></html>'));
        controller.close();
      }
      pushChunks();
                    await delay(2000);
                    const response = await env.WORKER_B.fetch(request);
                    const data = await response.text(); 
                    controller.enqueue(new TextEncoder().encode(data));
    }
  });
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/html; charset=utf-8',
      'Cache-Control': 'no-cache'
    }
  });
}

function delay(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function handleRequest(request: Request, env: Env): Promise<Response> {
  const stream = new ReadableStream({
    async start(controller) {
      const skeleton = `<html>
                          <head><title>Loading...</title></head>
                          <body>
                            <div id="skeleton">Loading content...</div>`;
      controller.enqueue(new TextEncoder().encode(skeleton));
      for(let i = 0; i < 5; i++) {
         const loadingPlaceholder = `<div id="loading-chunk-${i}">Chunk ${i + 1} is loading...</div>`;
          controller.enqueue(new TextEncoder().encode(loadingPlaceholder));
      }
      async function pushChunks() {
        for (let i = 0; i < 5; i++) {
          
          const chunk = `<div>✅ Chunk ${i + 1}</div>`;
          
          await delay(1000); 
          
          const replaceScript = `<script>
                                  document.getElementById('loading-chunk-${i}').outerHTML = \`${chunk}\`;
                                </script>`;
          controller.enqueue(new TextEncoder().encode(replaceScript));
        }
        controller.enqueue(new TextEncoder().encode('</body></html>'));
        controller.close();
      }
      pushChunks();
                    await delay(2000);
                    const response = await env.WORKER_B.fetch(request);
                    const data = await response.text(); 
                    controller.enqueue(new TextEncoder().encode(data));
    }
  });
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/html; charset=utf-8',
      'Cache-Control': 'no-cache'
    }
  });
}

function delay(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

2 replies

CDCloudflare Developers

•Created by shengyuan on 4/15/2024 in #workers-help

How to test two binding workers in dev environment?

I have 2 workers, one of which needs to call the fetch result of the other worker. I understand that we can modify the services binding in wrangler.toml to enable two workers to call each other. But if I don’t want to deploy and just want to test the modification results locally (wrangler dev), is there a more convenient method? For Example: worker A: services = [ { binding = "WORKER_B", service = "worker_b" } ] I run wrangler dev in worker_b Can I use fetch method in work_A to get result from work_B? If I can't use fetch, what method can I use?

5 replies

Gaming

Programming