Node.js 实现一个 HTTP/2 的例子

要在前端使用 HTTP/2，通常不需要在 JavaScript 代码中做特殊处理，因为 HTTP/2 是在网络传输层处理的，浏览器会自动处理请求的协议选择。然而，可以通过设置一个简单的项目，使用 HTTP/2 来加载资源，并通过浏览器的开发者工具来查看 HTTP/2 的效果。

示例说明

创建一个简单的 Node.js 服务器，它使用 HTTP/2 提供静态文件。然后在前端 JavaScript 中发起请求来加载一些资源。

1. 创建一个 Node.js HTTP/2 服务器

首先，确保已经安装了 Node.js。接着，创建一个目录来存放项目文件：

mkdir http2-demo
cd http2-demo
npm init -y
npm install express spdy

spdy 是一个 Node.js 模块，帮助我们在 Express 中轻松启用 HTTP/2。

`server.js` 文件

创建一个简单的 HTTP/2 服务器来提供静态文件服务：

const express = require('express');
const spdy = require('spdy');
const fs = require('fs');
const path = require('path');const app = express();// 提供静态文件服务
app.use(express.static(path.join(__dirname, 'public')));// 设置一个简单的API
app.get('/api/data', (req, res) => {res.json({ message: "Hello from HTTP/2!" });
});// 配置 HTTPS（需要 SSL/TLS 证书）
const options = {key: fs.readFileSync('server.key'),cert: fs.readFileSync('server.crt')
};// 启动服务器
spdy.createServer(options, app).listen(3000, (err) => {if (err) {console.error('Failed to start server:', err);return;}console.log('HTTP/2 server listening on port 3000');
});

注意：需要生成或获取 SSL/TLS 证书server.key和server.crt`，可以通过自签名证书进行开发测试，或者使用 Let’s Encrypt 等服务获取免费证书。

生成自签名证书（开发用途）

如果没有现成的 SSL/TLS 证书，可以用以下命令生成自签名证书：

openssl req -nodes -new -x509 -keyout server.key -out server.crt -days 365

2. 创建前端页面

在 public 目录下创建 index.html 和 script.js 文件。

public/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTTP/2 Demo</title>
</head>
<body><h1>HTTP/2 Demo</h1><button id="fetchButton">Fetch Data</button><p id="response"></p><script src="script.js"></script>
</body>
</html>

public/script.js

document.getElementById('fetchButton').addEventListener('click', () => {fetch('/api/data').then(response => response.json()).then(data => {document.getElementById('response').textContent = data.message;}).catch(error => console.error('Error fetching data:', error));
});