H
Hono•3mo ago
bamato

Streaming in Honox

Hi Guys, I am trying to use streaming in a honox.js app. 
// routes/_renderer.tsx
import { jsxRenderer } from 'hono/jsx-renderer'
import { Link, Script } from 'honox/server'

export default jsxRenderer(({ children }) => {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/favicon.ico" />
        <title>Hono + htmx</title>
        <Link href="/app/site.css" rel="stylesheet" />
        <script type="module" src="/datastar1b11.js"></script>
        <Script src="/app/client.ts" async />
      </head>
      <body>{children}</body>
    </html>
  )
},{ stream: true }
)

// routes/stream.ts
import { Hono } from 'hono';
import { stream } from 'hono/streaming';

const app = new Hono();

app.get('/stream', (c) => {
  
  return stream(c, async (stream) => {
    await stream.write("Loading...\n");

    for (let i = 1; i <= 5; i++) {
      await stream.sleep(1000); // Simulate delay
      await stream.write(`Update ${i}\n`);
    }
  });
});

export default app
// routes/_renderer.tsx
import { jsxRenderer } from 'hono/jsx-renderer'
import { Link, Script } from 'honox/server'

export default jsxRenderer(({ children }) => {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/favicon.ico" />
        <title>Hono + htmx</title>
        <Link href="/app/site.css" rel="stylesheet" />
        <script type="module" src="/datastar1b11.js"></script>
        <Script src="/app/client.ts" async />
      </head>
      <body>{children}</body>
    </html>
  )
},{ stream: true }
)

// routes/stream.ts
import { Hono } from 'hono';
import { stream } from 'hono/streaming';

const app = new Hono();

app.get('/stream', (c) => {
  
  return stream(c, async (stream) => {
    await stream.write("Loading...\n");

    for (let i = 1; i <= 5; i++) {
      await stream.sleep(1000); // Simulate delay
      await stream.write(`Update ${i}\n`);
    }
  });
});

export default app
When navigating /stream I land on a 404 page not found error. Not sure why this happens when the stream.ts is in the routes folder ? Does honox.js work with streaming ? If it does how to use streaming or even streaming sse in honox.js ?
3 Replies
Arjix
Arjix•3mo ago
uhh I am not experienced in HonoX, but to me it looks like your route is /stream/stream and not /stream, doesn't HonoX automatically set the basePath? can you try 
- app.get('/stream',
+ app.get('/',
- app.get('/stream',
+ app.get('/',
(I am only guessing, don't pull a pitchfork if I am wrong)
bamato
bamatoOP•3mo ago
Thanks @Arjix that was actually it. The answer was so simple. It now works 😀
Arjix
Arjix•3mo ago
Nice

Did you find this page helpful?