Hono——一个小型，简单且超快的Edges Web框架

news/2024/7/24 12:51:06 标签: 前端

Hono - [炎]在日语中的意思是火焰🔥 - 是一个小型，简单且超快的Edges Web框架。它适用于任何JavaScript运行时：Cloudflare Workers，Fastly Compute@Edge，Deno，Bun，Vercel，Netlify，Lagon，AWS Lambda，Lambda@Edge和Node.js。

快，但不仅快。

文章目录

  • 快速入门
  • 特征
  • 用例
  • 谁在使用Hono？
  • 示例
  • 超快
  • 轻
  • Remix + Hono 示例
    • Session 会话管理
    • 静态资源
    • HTTPS Only
    • trailingSlash

快速入门

npm i --save hono

只需运行这个：

import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app

特征

  • 超快 🚀 - 路由器 RegExpRouter 真的很快。不使用线性循环。快。
  • 轻量级 🪶 - hono/tiny 预设小于 12kB。Hono 的依赖关系为零，仅使用 Web 标准 API。
  • 多运行时 🌍 - 适用于Cloudflare Workers，Fastly Compute@Edge，Deno，Bun，Lagon，AWS Lambda或Node.js。相同的代码在所有平台上运行。
  • 能力🔋 - Hono 具有内置中间件、自定义中间件、第三方中间件和助手。包括电池。
  • 令人愉快的DX 🛠️ - 超级干净的API。一流的 TypeScript 支持。现在，我们有“类型”。

用例

Hono是一个简单的Web应用程序框架，类似于Express，没有前端。但它在 CDN Edge 上运行，允许您在与中间件结合使用时构建更大的应用程序。以下是一些用例示例：

  • 构建网络接口
  • 后端服务器代理
  • CDN 前端
  • 边缘应用
  • 库的基本服务器
  • 全栈应用

谁在使用Hono？

项目平台用途
cdnjs API 服务器Cloudflare Workers免费的开源 CDN 服务。Hono用于他们的API服务。
Polyfill.ioFastly Compute@Edge提供必要的浏览器填充的 CDN 服务。Hono被用作核心服务器。
UltraDeno一个 React/Deno 框架。Hono 用于内部服务器。
Deno BenchmarksDeno基于 V8 构建的安全 TypeScript 运行时。Hono用于基准测试。
Cloudflare 博客Cloudflare Workers文章中介绍的一些应用程序使用 Hono。

示例

使用 Hono 为 Cloudflare Workers 创建应用程序的演示。

超快

Hono是最快的，与Cloudflare Workers的其他路由器相比。

Hono x 402,820 ops/sec ±4.78% (80 runs sampled)
itty-router x 212,598 ops/sec ±3.11% (87 runs sampled)
sunder x 297,036 ops/sec ±4.76% (77 runs sampled)
worktop x 197,345 ops/sec ±2.40% (88 runs sampled)
Fastest is Hono
✨  Done in 28.06s.

查看更多基准测试： https://hono.dev/concepts/benchmarks

轻

Hono 太小了。使用 hono/tiny 预设时，其大小在缩小时小于 12KB。有许多中间件和适配器，但它们仅在使用时才捆绑在一起。对于上下文，Express 的大小为 572KB。

$ npx wrangler dev --minify ./src/index.ts
 ⛅️ wrangler 2.20.0
--------------------
⬣ Listening at http://0.0.0.0:8787
- http://127.0.0.1:8787
- http://192.168.128.165:8787
Total Upload: 11.47 KiB / gzip: 4.34 KiB

Remix + Hono 示例

安装包：

npm add remix-hono

然后创建你的 Remix 服务器：

import { logDevReady } from "@remix-run/cloudflare";
import * as build from "@remix-run/dev/server-build";
import { Hono } from "hono";
// You can also use it with other runtimes
import { handle } from "hono/cloudflare-pages";
import { remix } from "remix-hono/handler";

if (process.env.NODE_ENV === "development") logDevReady(build);

/* type your Cloudflare bindings here */
type Bindings = {};

/* type your Hono variables (used with ctx.get/ctx.set) here */
type Variables = {};

type ContextEnv = { Bindings: Bindings; Variables: Variables };

const server = new Hono<ContextEnv>();

// Add the Remix middleware to your Hono server
server.use(
	"*",
	remix({
		build,
		mode: process.env.NODE_ENV as "development" | "production",
		// getLoadContext is optional, the default function is the same as here
		getLoadContext(ctx) {
			return ctx.env;
		},
	}),
);

// Create a Cloudflare Pages request handler for your Hono server
export const onRequest = handle(server);

现在，你可以添加 Hono 中间件了，比如基本的登录认证：

import { basicAuth } from "hono/basic-auth";

server.use(
	"*",
	basicAuth({ username: "hono", password: "remix" }),
	// Ensure Remix request handler is the last one
	remix(options),
);

Session 会话管理

有三种常见方法来管理 Cloudflare 上的会话。

第一种，使用 Worker KV 持久化会话。

import { session } from "remix-hono/session";
// Install the `@remix-run/*` package for your server adapter to grab the
// factory functions for session storage
import { createWorkerKVSessionStorage } from "@remix-run/cloudflare";

server.use(
	"*",
	session({
		autoCommit: true,
		createSessionStorage(context) {
			return createWorkersKVSessionStorage({
				kv: context.env.MY_KV_BINDING,
				cookie: {
					name: "session",
					httpOnly: true,
					secrets: [context.SESSION_SECRET],
				},
			});
		},
	}),
);

现在，可以通过 getSessionStorage 和 getSession 方法来获取会话对象了。

注意：如果 autoCommit 设置为 false， 你需要手动调用 sessionStorage.getSession()

import { getSessionStorage, getSession } from "remix-hono/session";

server.use(
	"*",
	remix<ContextEnv>({
		build,
		mode: process.env.NODE_ENV as "development" | "production",
		// getLoadContext is optional, the default function is the same as here
		getLoadContext(ctx) {
			let sessionStorage = getSessionStorage(ctx);
			let session = getSession(ctx);

			// Return them here to access them in your loaders and actions
			return { ...ctx.env, sessionStorage, session };
		},
	}),
);

第二种，使用 workerKVSession 来替代。

import { workerKVSession } from "remix-hono/cloudflare";

server.use(
	"*",
	workerKVSession({
		autoCommit: true, // same as in the session middleware
		cookie: {
			name: "session", // all cookie options as in createWorkerKVSessionStorage
			// In this function, you can access context.env to get the session secret
			secrets(context) {
				return [context.env.SECRET];
			},
		},
		// The name of the binding using for the KVNamespace
		binding: "KV_BINDING",
	}),
);

第三种，使用cookieSession。

import { cookieSession } from "remix-hono/cloudflare";

server.use(
	"*",
	cookieSession({
		autoCommit: true, // same as in the session middleware
		cookie: {
			name: "session", // all cookie options as in createCookieSessionStorage
			// In this function, you can access context.env to get the session secret
			secrets(context) {
				return [context.env.SECRET];
			},
		},
	}),
);

静态资源

如果需要将 public 目录下的（除了 public/build 之外）资源通过服务提供，可以使用这样的中间件：

import { staticAssets } from "remix-hono/cloudflare";
import { remix } from "remix-hono/handler";

server.use(
	"*",
	staticAssets(),
	// Add Remix request handler as the last middleware
	remix(options),
);

HTTPS Only

强制使用 HTTPS：

import { httpsOnly } from "remix-hono/security";

server.use("*", httpsOnly());

trailingSlash

尾部 / 处理：

import { trailingSlash } from "remix-hono/trailing-slash";

// By default, trailing slashes are disabled, so `https://company.tld/about/`
// will be redirect to `https://company.tld/about`
server.use("*", trailingSlash());
server.use("*", trailingSlash({ enabled: false }));

// You can also enable trailing slashes, so `https://company.tld/about` will be
// redirect to `https://company.tld/about/` instead
server.use("*", trailingSlash({ enabled: true }));

http://www.niftyadmin.cn/n/5065869.html

相关文章

信息学奥赛一本通-编程启蒙3349：练60.3 余数个数

信息学奥赛一本通-编程启蒙3349：练60.3 余数个数

3349&#xff1a;练60.3 余数个数 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 221 通过数: 176 题目链接&#xff1a;信息学奥赛一本通-编程启蒙&#xff08;C版&#xff09;在线评测系统 【题目描述】 给出 10 个整数&#xff0c;问这些整数 (mod42)后有多少…
阅读更多...
哈希/散列--哈希表[思想到结构]

哈希/散列--哈希表[思想到结构]

文章目录 1.何为哈希?1.1百度搜索1.2自身理解1.3哈希方法/散列方法1.4哈希冲突/哈希碰撞1.5如何解决?哈希函数的设计 2.闭散列和开散列2.1闭散列/开放定址法2.2开散列/链地址法/开链法1.概念2.容量问题 3.代码实现[配备详细注释]3.1闭散列3.2开散列 1.何为哈希? 1.1百度搜索…
阅读更多...
Springetway 如何解决跨域的

Springetway 如何解决跨域的

Spring Boot提供了一些配置来处理跨域问题。下面是几种解决跨域问题的方法&#xff1a; 1、使用CORS过滤器&#xff1a;在Spring Boot应用程序中&#xff0c;可以创建一个CORS过滤器&#xff0c;用于允许来自不同域的请求访问受保护的资源。要创建CORS过滤器&#xff0c;可以使…
阅读更多...
java验证码的实现

java验证码的实现

google kaptcha 验证码 依赖包&#xff1a; <!-- google kaptcha依赖 --><dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>0.0.9</version></dependency> 配置类: package…
阅读更多...
Javascript 事件的动态绑定

Javascript 事件的动态绑定

动态绑定事件&#xff0c;是指在代码执行过程中&#xff0c;通过Javascript代码来绑定事件。这种技术可以大大增强网页的交互性和用户体验。上一期介绍的是通过事件监听器 EventListener 去实现元素颜色的变化。这一期将通过动态绑定方法去实现&#xff0c;对象.事件 匿名函数…
阅读更多...
python二次开发CATIA：文字轮廓草图

python二次开发CATIA：文字轮廓草图

CATIA V5 版本的草图中&#xff0c;并没有文字轮廓的创建命令。通常的做法是&#xff0c;再Drawing 文件中创建所需文本-->将 Drawing 文件另存为 dwg / dxf 格式-->打开另存的文件&#xff0c;文字已转为轮廓线条-->复制线条并粘贴到草图中。 本例中&#xff0c;基于…
阅读更多...
C/C++学习 -- 分组加密算法（DES算法）

C/C++学习 -- 分组加密算法（DES算法）

数据加密标准&#xff08;Data Encryption Standard&#xff0c;DES&#xff09;是一种对称密钥加密算法&#xff0c;是信息安全领域的经典之作。本文将深入探讨DES算法的概述、特点、原理&#xff0c;以及提供C语言和C语言实现DES算法的代码案例。 一、DES算法概述 DES算法是…
阅读更多...
【MVP争夺战】python实现-附ChatGPT解析

【MVP争夺战】python实现-附ChatGPT解析

1.题目 MVP争夺战 知识点 ：DFS搜索 时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 在星球争霸篮球赛对抗赛中，强大的宇宙战队，希望每个人都能拿到MVP。 MVP的条件是，单场最高分得分获得者，可以并列，所以宇宙战队决定在比赛中尽可能让更多的队员上场，且让所有有得…
阅读更多...
最新文章

Copyright @ 2022~2023