1 reply

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

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

Does the local runtime support streaming response?

Does the local runtime support streaming response?

Similar Threads

Similar Threads

Similar Threads