第 10 章：HTTP 服务器
第 10 章：HTTP 服务器
10.1 Deno 原生 HTTP 服务器
Deno 内置了高性能的 HTTP 服务器 API，无需任何第三方依赖。
基本用法
// 原生 Deno.serve API
Deno.serve({ port: 8000 }, (req: Request) => {
return new Response("Hello, Deno!");
});
console.log("服务器运行在 http://localhost:8000");
使用标准库 serve
import { serve } from "jsr:@std/http";
serve((req: Request) => {
const url = new URL(req.url);
if (url.pathname === "/") {
return new Response("首页", {
headers: { "content-type": "text/html; charset=utf-8" },
});
}
if (url.pathname === "/api/time") {
return Response.json({ time: new Date().toISOString() });
}
return new Response("404 Not Found", { status: 404 });
}, { port: 8000 });
路由处理
Deno.serve(async (req: Request) => {
const url = new URL(req.url);
const method = req.method;
// GET 请求
if (method === "GET" && url.pathname === "/users") {
return Response.json([
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
]);
}
// POST 请求
if (method === "POST" && url.pathname === "/users") {
const body = await req.json();
return Response.json({ id: 3, ...body }, { status: 201 });
}
// 路径参数
const userMatch = url.pathname.match(/^\/users\/(\d+)$/);
if (method === "GET" && userMatch) {
const id = parseInt(userMatch[1]);
return Response.json({ id, name: `User ${id}` });
}
return new Response("Not Found", { status: 404 });
});
优雅关机
const ac = new AbortController();
Deno.serve({
port: 8000,
signal: ac.signal,
onListen({ port }) {
console.log(`服务器启动在端口 ${port}`);
},
onShutdown() {
console.log("服务器关闭中...");
},
}, (req) => new Response("Hello!"));
// 捕获 SIGINT 信号，优雅关闭
Deno.addSignalListener("SIGINT", () => {
console.log("收到 SIGINT，正在关闭...");
ac.abort();
Deno.exit(0);
});
10.2 Oak 框架
Oak 是 Deno 上最流行的 Web 框架，类似 Node.js 的 Koa。
基本应用
import { Application, Router } from "jsr:@oak/oak";
const app = new Application();
const router = new Router();
// 定义路由
router.get("/", (ctx) => {
ctx.response.body = "Hello, Oak!";
ctx.response.type = "text/html";
});
router.get("/api/users", (ctx) => {
ctx.response.body = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
});
router.post("/api/users", async (ctx) => {
const body = await ctx.request.body.json();
ctx.response.status = 201;
ctx.response.body = { id: 3, ...body };
});
// 注册路由
app.use(router.routes());
app.use(router.allowedMethods());
// 启动服务器
app.listen({ port: 8000 });
console.log("Oak 服务器运行在 http://localhost:8000");
Oak 中间件
import { Application, Context, Next } from "jsr:@oak/oak";
const app = new Application();
// 中间件 1：日志记录
app.use(async (ctx: Context, next: Next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
console.log(`${ctx.request.method} ${ctx.request.url.pathname} - ${ms}ms`);
});
// 中间件 2：错误处理
app.use(async (ctx: Context, next: Next) => {
try {
await next();
} catch (err) {
console.error("服务器错误：", err);
ctx.response.status = 500;
ctx.response.body = { error: "服务器内部错误" };
}
});
// 中间件 3：CORS
app.use(async (ctx: Context, next: Next) => {
ctx.response.headers.set("Access-Control-Allow-Origin", "*");
ctx.response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
ctx.response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
if (ctx.request.method === "OPTIONS") {
ctx.response.status = 204;
return;
}
await next();
});
// 中间件 4：认证
app.use(async (ctx: Context, next: Next) => {
const authHeader = ctx.request.headers.get("Authorization");
if (!authHeader?.startsWith("Bearer ")) {
ctx.response.status = 401;
ctx.response.body = { error: "未授权" };
return;
}
ctx.state.user = { token: authHeader.slice(7) };
await next();
});
路由参数
const router = new Router();
// 路径参数
router.get("/users/:id", (ctx) => {
const id = ctx.params.id;
ctx.response.body = { id, name: `User ${id}` };
});
// 正则参数
router.get(/^\/files\/(.+)$/, (ctx) => {
const filepath = ctx.matches[1];
ctx.response.body = { path: filepath };
});
// 多个参数
router.get("/users/:userId/posts/:postId", (ctx) => {
const { userId, postId } = ctx.params;
ctx.response.body = { userId, postId };
});
静态文件服务
import { Application, send } from "jsr:@oak/oak";
const app = new Application();
app.use(async (ctx) => {
await send(ctx, ctx.request.url.pathname, {
root: "./public",
index: "index.html",
});
});
10.3 Hono 框架
Hono 是一个轻量、高性能的 Web 框架，支持多运行时（Deno、Node.js、Bun、Cloudflare Workers 等）。
基本应用
import { Hono } from "jsr:@hono/hono";
const app = new Hono();
app.get("/", (c) => c.text("Hello, Hono!"));
app.get("/json", (c) => c.json({ message: "Hello" }));
app.post("/users", async (c) => {
const body = await c.req.json();
return c.json({ id: 1, ...body }, 201);
});
Deno.serve(app.fetch);
Hono 路由
import { Hono } from "jsr:@hono/hono";
const app = new Hono();
// 路径参数
app.get("/users/:id", (c) => {
const id = c.req.param("id");
return c.json({ id });
});
// 查询参数
app.get("/search", (c) => {
const q = c.req.query("q");
const page = c.req.query("page") || "1";
return c.json({ query: q, page });
});
// 路由分组
const api = new Hono();
api.get("/users", (c) => c.json([]));
api.get("/posts", (c) => c.json([]));
app.route("/api", api);
// 嵌套路由组
const v1 = new Hono();
v1.get("/users", (c) => c.json({ version: 1 }));
const v2 = new Hono();
v2.get("/users", (c) => c.json({ version: 2 }));
app.route("/api/v1", v1);
app.route("/api/v2", v2);
Hono 中间件
import { Hono } from "jsr:@hono/hono";
import { cors } from "jsr:@hono/hono/cors";
import { logger } from "jsr:@hono/hono/logger";
import { basicAuth } from "jsr:@hono/hono/basic-auth";
const app = new Hono();
// 内置中间件
app.use("*", logger());
app.use("*", cors());
// 需要认证的路由
app.use("/admin/*", basicAuth({
username: "admin",
password: "secret",
}));
// 自定义中间件
app.use("*", async (c, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
c.header("X-Response-Time", `${ms}ms`);
});
app.get("/", (c) => c.text("Hello"));
app.get("/admin/dashboard", (c) => c.text("Admin Panel"));
Hono 错误处理
import { Hono, HTTPException } from "jsr:@hono/hono";
const app = new Hono();
// 全局错误处理
app.onError((err, c) => {
console.error(err);
if (err instanceof HTTPException) {
return c.json({ error: err.message }, err.status);
}
return c.json({ error: "服务器内部错误" }, 500);
});
// 404 处理
app.notFound((c) => {
return c.json({ error: "页面未找到" }, 404);
});
app.get("/users/:id", (c) => {
const id = c.req.param("id");
if (id === "0") {
throw new HTTPException(404, { message: "用户不存在" });
}
return c.json({ id });
});
10.4 Oak vs Hono 对比
| 特性 | Oak | Hono |
|---|---|---|
| 风格 | Koa 风格 | Express 风格 |
| 中间件 | 洋葱模型（async/await） | 洋葱模型 |
| 路由 | Router 类 | 内置 |
| 生态 | Deno 专用 | 多运行时 |
| 体积 | 较大 | 极轻量 |
| 内置中间件 | 少 | 丰富（cors, auth, jwt 等） |
| 适合场景 | 大型应用 | 微服务、API |
10.5 实战：RESTful API
使用 Hono 构建 CRUD API
import { Hono } from "jsr:@hono/hono";
interface Todo {
id: number;
title: string;
completed: boolean;
}
const app = new Hono();
let todos: Todo[] = [];
let nextId = 1;
// 获取所有
app.get("/todos", (c) => {
return c.json(todos);
});
// 获取单个
app.get("/todos/:id", (c) => {
const id = parseInt(c.req.param("id"));
const todo = todos.find(t => t.id === id);
if (!todo) return c.json({ error: "未找到" }, 404);
return c.json(todo);
});
// 创建
app.post("/todos", async (c) => {
const { title } = await c.req.json();
const todo: Todo = { id: nextId++, title, completed: false };
todos.push(todo);
return c.json(todo, 201);
});
// 更新
app.put("/todos/:id", async (c) => {
const id = parseInt(c.req.param("id"));
const index = todos.findIndex(t => t.id === id);
if (index === -1) return c.json({ error: "未找到" }, 404);
const body = await c.req.json();
todos[index] = { ...todos[index], ...body };
return c.json(todos[index]);
});
// 删除
app.delete("/todos/:id", (c) => {
const id = parseInt(c.req.param("id"));
todos = todos.filter(t => t.id !== id);
return c.body(null, 204);
});
Deno.serve(app.fetch);
10.6 模板渲染
简单 HTML 模板
function renderTemplate(title: string, content: string): string {
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>${title}</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
</style>
</head>
<body>
<h1>${title}</h1>
${content}
</body>
</html>`;
}
Deno.serve((req) => {
const url = new URL(req.url);
if (url.pathname === "/") {
const html = renderTemplate("欢迎", `
<p>这是一个 Deno Web 应用</p>
<a href="/about">关于</a>
`);
return new Response(html, {
headers: { "content-type": "text/html; charset=utf-8" },
});
}
return new Response("404", { status: 404 });
});
10.7 HTTPS 服务器
const cert = await Deno.readTextFile("./cert.pem");
const key = await Deno.readTextFile("./key.pem");
Deno.serve({
port: 443,
cert,
key,
}, (req) => {
return new Response("Hello, HTTPS!");
});
10.8 本章小结
| 工具 | 说明 | 适用场景 |
|---|---|---|
Deno.serve | 原生 API | 简单服务、学习 |
@std/http | 标准库 | 中等复杂度 |
Oak | Koa 风格框架 | 大型应用、企业项目 |
Hono | 轻量框架 | API 服务、微服务、多运行时 |
📖 扩展阅读
下一章：第 11 章：数据库操作 → 学习在 Deno 中使用数据库。