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

草明

于 2024-08-21 05:30:00 发布

阅读量932

点赞数 22

分类专栏：运维 Node.js JavaScript 文章标签： node.js http 网络协议

本文链接：https://blog.csdn.net/galoiszhou/article/details/141365050

版权

运维同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

Node.js

9 篇文章 0 订阅

订阅专栏

要在前端使用 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));
});