使用Bun快速搭建HTTP服务器的详细教程

Bun作为一款快速且功能全面的JavaScript运行环境，它提供了简单易用的API，能帮助我们轻松搭建HTTP服务器。接下来，就为大家详细介绍如何使用Bun.serve API来搭建一个基础的HTTP服务器，并通过具体实例展示其丰富功能。

一、创建新项目

搭建服务器的第一步，是创建一个新的项目目录并初始化Bun项目。在终端中执行以下命令：

mkdir quickstart cd quickstart bun init

执行bun init命令后，会有一系列提示。按照提示输入项目名称，接着可以选择入口文件名（默认是index.ts）。如果没有特殊需求，直接按Enter键接受所有默认设置就行。这样，一个新的Bun项目就初始化完成了。

二、编写HTTP服务器代码

项目创建好后，打开生成的index.ts文件，把下面这段代码粘贴进去：

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服务器。其中，port: 3000表示服务器监听的端口是3000；fetch函数则定义了服务器对请求的处理方式，这里是对所有请求都返回字符串“Bun!” 。最后，通过console.log打印出服务器的监听地址。

三、运行服务器

代码编写完成后，在终端运行以下命令启动服务器：

bun index.ts

服务器启动后，在浏览器地址栏输入http://127.0.0.1:3000，就能看到页面上显示“Bun!”，这说明服务器已经成功运行并能正常响应请求了。

四、添加路由功能

Bun.serve还支持路由功能，借助这个功能，我们可以根据不同的URL路径返回不同的内容。看下面这个示例代码：

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错误页面，提示“404 Not Found”。

（一）扩展路由示例

要是想添加更多路由，按照下面这种方式修改代码就可以：

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

这样，访问/about路径时，就能看到“About page!”的内容了。

五、处理POST请求

Bun.serve对POST请求的处理也很方便。下面是一个处理JSON数据的示例：

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数据，然后再把这些数据返回给客户端，同时设置响应头的Content-Type为application/json ，表明返回的数据是JSON格式。

（一）POST请求示例扩展

如果要处理不同类型的POST请求，可以参考下面的代码：

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

这段代码中，/api/posts路径还是处理JSON数据的POST请求，而/api/files路径则用来处理表单数据的POST请求，当收到表单数据的POST请求时，会返回“File uploaded successfully!” 。

六、使用figlet包添加ASCII艺术

为了让服务器的输出更有趣，我们可以借助figlet包把普通字符串转化为ASCII艺术形式。首先要安装figlet包，在终端执行以下命令：

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

安装完成后，更新index.ts文件：

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

重新启动服务器，刷新页面，就能看到ASCII艺术形式的“Bun!”横幅了。