与发bun活着重新加载html

今天golang学习网给大家带来了《与发bun活着重新加载html》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

This article demonstrates how to create a simple live reload mechanism for HTML content using Bun's built-in HTTP server and Server-Sent Events (SSE). This allows the browser to automatically refresh whenever the server-side code changes, eliminating the need for manual refreshes.

The Problem: Bun's bun -hot command reloads the server on code changes, but the browser doesn't automatically refresh, requiring manual intervention.

The Solution (SSE): This approach leverages SSE, a unidirectional communication method (server to browser), avoiding the overhead of a full WebSocket connection. When the server restarts (due to code changes), it sends an SSE message to the browser, triggering a page reload.

Implementation Steps:

1. SSE Endpoint: Create a /__bun_live_reload endpoint that returns a ReadableStream with a text/event-stream content type. This stream will send the reload signal.

2. Injecting the Client-Side Script: A JavaScript snippet is injected into every HTML response. This script uses the EventSource API to listen for messages from the /__bun_live_reload endpoint. Upon receiving a message, location.reload() refreshes the page.

3. Handling Server Reloads: Bun's hot reload mechanism is utilized. A global variable (globalThis.client) stores the ReadableStreamDefaultController. When the server restarts, a message ("data:\n\n") is sent via globalThis.client?.enqueue() to the browser through the SSE stream.

4. withHtmlLiveReload Wrapper: A function wraps the original fetch handler. It intercepts responses, injects the client-side script, and handles the SSE endpoint.

Code (bun-html-live-reload.ts):

declare global {
  var client: ReadableStreamDefaultController | undefined;
}

type Fetch = (req: Request) => Promise<response>;

const liveReloadScript = `
  new EventSource("/__bun_live_reload").onmessage = () => {
    location.reload();
  };
`;

export function withHtmlLiveReload(handler: Fetch): Fetch {
  return async (req) => {
    if (new URL(req.url).pathname === "/__bun_live_reload") {
      const stream = new ReadableStream({
        start(controller) {
          globalThis.client = controller;
        },
      });
      return new Response(stream, {
        headers: {
          "Content-Type": "text/event-stream",
          "Cache-Control": "no-cache",
        },
      });
    }

    const response = await handler(req);
    const htmlText = await response.text();
    const newHtmlText = htmlText + liveReloadScript;
    return new Response(newHtmlText, { headers: response.headers });
  };
}

// Example usage in your server.ts:
import { withHtmlLiveReload } from "./bun-html-live-reload";

bun.serve({
  fetch: withHtmlLiveReload(async (req) => {
    return new Response("<h1>Hello, world!</h1>", {
      headers: { "Content-Type": "text/html" },
    });
  }),
});

// In your server.ts, make sure to add this to trigger the reload:
globalThis.client?.enqueue("data:\n\n");</response>

By using this withHtmlLiveReload function, you can easily add live reload functionality to your Bun server-rendered websites. Remember to run your server with bun -hot.

本篇关于《与发bun活着重新加载html》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！