🚀 使用 Bun 快速搭建 HTTP 服务器：一步步教程

Bun 是一个快速且全能的 JavaScript 运行环境，提供了一个简单易用的 API 来启动 HTTP 服务器。下面我们将一步步地介绍如何使用 Bun.serve API 搭建一个基本的 HTTP 服务器，并通过实例来演示其功能。

1. 创建新项目

首先，创建一个新目录并初始化一个 Bun 项目：

bash 复制代码

mkdir quickstart
cd quickstart
bun init

按照提示输入项目名称和入口文件名（默认为 index.ts），然后按 Enter 键接受所有默认设置。

2. 编写 HTTP 服务器代码

打开生成的 index.ts 文件，粘贴以下代码：

typescript 复制代码

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response("Bun!");
  },
});

console.log(`Listening on http://127.0.0.1:${server.port} ...`);

这个代码片段使用 Bun.serve 启动一个 HTTP 服务器，监听端口 3000，并对所有请求返回字符串 "Bun!"。

3. 运行服务器

在终端中运行以下命令启动服务器：

bash 复制代码

bun index.ts

访问 http://127.0.0.1:3000 即可看到服务器返回的 "Bun!" 页面。

4. 添加路由

Bun.serve 支持路由功能，可以根据不同的 URL 路径返回不同的内容。以下是一个示例：

typescript 复制代码

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response("Home page!"),
    "/blog": () => new Response("Blog page!"),
  },
  fetch(req) {
    return new Response("404 Not Found", { status: 404 });
  },
});

在这个例子中，访问 / 会返回 "Home page!"，访问 /blog 会返回 "Blog page!"，其他路径则返回 404 错误。

路由示例扩展

如果你想添加更多路由，可以按照以下方式扩展：

typescript 复制代码

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response("Home page!"),
    "/blog": () => new Response("Blog page!"),
    "/about": () => new Response("About page!"),
  },
  fetch(req) {
    return new Response("404 Not Found", { status: 404 });
  },
});

5. 处理 POST 请求

Bun.serve 也支持处理 POST 请求。以下是一个处理 JSON 数据的示例：

typescript 复制代码

const server = Bun.serve({
  port: 3000,
  routes: {
    "/api/posts": {
      POST: async req => {
        const data = await req.json();
        return new Response(JSON.stringify(data), {
          headers: {
            "Content-Type": "application/json",
          },
        });
      },
    },
  },
});

这个例子中，POST 请求到 /api/posts 会将请求体中的 JSON 数据返回给客户端。

POST 请求示例扩展

如果你想处理不同类型的 POST 请求，可以使用以下方式：

typescript 复制代码

const server = Bun.serve({
  port: 3000,
  routes: {
    "/api/posts": {
      POST: async req => {
        const data = await req.json();
        return new Response(JSON.stringify(data), {
          headers: {
            "Content-Type": "application/json",
          },
        });
      },
    },
    "/api/files": {
      POST: async req => {
        const formData = await req.formData();
        return new Response("File uploaded successfully!", {
          headers: {
            "Content-Type": "text/plain",
          },
        });
      },
    },
  },
});

6. 使用 figlet 包添加 ASCII 艺术

为了使服务器输出更有趣，我们可以使用 figlet 包将字符串转换为 ASCII 艺术：

首先安装 figlet 包：

bash 复制代码

bun add figlet
bun add -d @types/figlet # 如果使用 TypeScript

然后更新 index.ts 文件：

typescript 复制代码

import figlet from "figlet";

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    const asciiArt = figlet.textSync("Bun!");
    return new Response(asciiArt);
  },
});

重新启动服务器并刷新页面，即可看到 ASCII 艺术横幅。

7. 性能优势

Bun 的启动速度比传统的 Node.js 快约 28 倍，这使得开发和测试更加高效。使用 bun run start 来运行脚本，相比 npm run start 有明显的性能优势。

性能对比示例

如果你想比较 Bun 和 Node.js 的启动速度，可以使用以下命令：

Bun : bun run start
Node.js : node index.js (或使用 npm run start)

通过这些命令，你可以亲自感受到 Bun 的快速启动优势。