大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家介绍的主题是HyperExpress，即一个简单但高性能的 HTTP 和 Websocket 服务器。话不多说，直接进入正题！

什么是 HyperExpress

HyperExpress 的目标是成为一个简单但高性能的 HTTP 和 Websocket 服务器。 结合 uWebsockets.js（用 C++ 编写的 uSockets 的 Node.js 绑定）的强大功能，HyperExpress 允许开发人员充分利用现有硬件为其 Web 应用程序释放更高的吞吐量，从而让 Web 应用程序在优化的数据服务端点上变得更加高效，而无需扩展硬件。

HyperExpress 的一些突出的亮点包括：

• 简化的 HTTP 和 Websocket API
• 服务器发送事件（Server-Sent Events）支持
• 分段文件上传支持
• 模块化路由器和中间件支持
• 通过 SSL 的多主机/域支持
• 通过共享方法/属性保证与 Express.js API 的部分兼容性

在以 JavaScript 为编码语言的主流服务器 Benchmark 中，HyperExpress 每秒可以处理的请求数大约为 Express 的 6 倍、fastify 的 2.4 倍、koa 的 2.6 倍、但是稍逊于 uwebsockets.js，不过表现已经非常惊艳。

目前 HyperExpress 在 Github 上通过 MIT 协议开源，有超过 1k 的 star、0.2k 的项目依赖量，是一个值得关注的前端开源项目。

如何使用 HyperExpress

HyperExpress 大部分与 Express 兼容，但不是 100%，因此开发者可能会遇到一些中间件无法开箱即用的情况。 在这种情况下，开发者必须编写自己的 polyfill 或忽略中间件才能继续运行。

而且对于 HyperExpress 来说，默认情况下会禁用 uWebsockets.js 版本标头。 开发者可以通过将名为 KEEP_UWS_HEADER 的环境变量设置为真实值（例如 1 或 true）来选择退出此行为。

需要注意的是：HyperExpress 仅支持最新的三个 LTS（长期支持）Node.js 版本，并且可以使用 Node Package Manager (npm) 进行安装。

下面是 HyperExpress 的最简单 hello world 示例：

const HyperExpress = require('hyper-express');
const webserver = new HyperExpress.Server();
// 输出 'Hello World'
webserver.get('/', (request, response) => {
  response.send('Hello World');
});
// 调用.listen(port, callback)激活服务器
webserver
  .listen(80)
  .then((socket) => console.log('Webserver started on port 80'))
  .catch((error) => console.log('Failed to start webserver on port 80'));

如果要获取请求数据可以通过调用 request 的相关属性：

webserver.post('/api/v1/delete_user/:id', async (request, response) => {
  let headers = request.headers;
  let id = request.path_parameters.id;
  let body = await request.json();
  // we must await as .json() returns a Promise
  // body will contain the parsed JSON object or an empty {} object on invalid JSON
  // 真实业务逻辑
});

如果是大型数据传输，HyperExpress允许使用 Streaming 传输响应。

const fs = require('fs');
webserver.post('/stream/some-data', async (request, response) => {
    // Get some readable stream which will retrieve our large dataset
    const readable = getReadableStreamForOurData();
    // Simply pipe the stream to the Response writable to serve it to the client
    readable.pipe(response);
});

HyperExpress 对 websocket 的支持也是开箱即用，非常简单：

const webserver = new HyperExpress.Server();
// 创建upgrade路由，以便可以验证传入连接
webserver.upgrade('/ws/connect', async (request, response) => {
  // 在这里进行某种异步验证
  // 使用一些上下文升级传入的请求
  response.upgrade({
    user_id: 'some_user_id',
    event: 'news_updates',
  });
});

// 创建 websocket 路由来处理打开的 websocket 连接
webserver.ws('/ws/connect', (ws) => {
  //记录打开连接进行调试的时间
  console.log(
    'user ' + ws.context.user_id + ' has connected to consume news events'
  );
  //处理传入消息以执行消费变化
  ws.on('message', (message) => {
    // 根据传入消息对用户消费的事件进行一些更改
  });

  //Websocket 连接关闭后进行一些清理
  ws.on('close', (code, message) => {
    console.log(
      'use ' + ws.context.user_id + ' is no longer listening for news events.'
    );
    // You may do some cleanup here regarding analytics
  });
});

更多关于 HyperExpress 的用法可以参考文末资料，这里不再过多展开。

参考资料

https://github.com/kartikk221/hyper-express

https://web-frameworks-benchmark.netlify.app/result?l=javascript

https://github.com/kartikk221/hyper-express

https://www.youtube.com/watch?v=VShtPwEkDD0