用Rust搭建React Server Components 的Web服务器(一)

简介: 用Rust搭建React Server Components 的Web服务器(一)

凡心所向,素履以往,生如逆旅,一苇以航

大家好,我是柒八九

前言

在前面的文章中,我们介绍过ReactRSCRust

而如果想使用RSC,就需要使用Next.js的最新版本。而今天,我们做一次技术尝试。

Rust搭建适配RSC的Web服务器

我们在致所有渴望学习Rust的人的信中也介绍过,RustWeb开发中也能大放异彩。

image.png

最近,在评论区,有些人说Rust在国内的工作岗位少,其实如果大家细心去找的话,还是有些区块链或者类似的公司都有招聘计划。

image.png

从我个人角度来看的话,Rust其实不是啥屠龙术,更多的是给自己的另外一种机会。

好了,天不早了,干点正事哇。

你能所学到的知识点

  1. 前置知识点
  2. 服务端渲染
  3. Server components
  4. 页面响应交互事件
  5. 新增 <Suspense />特性

前置知识点

前置知识点,只是做一个概念的介绍,不会做深度解释。因为,这些概念在下面文章中会有出现,为了让行文更加的顺畅,所以将本该在文内的概念解释放到前面来。如果大家对这些概念熟悉,可以直接忽略


同时,由于阅读我文章的群体有很多,所以有些知识点可能我视之若珍宝,尔视只如草芥,弃之如敝履。以下知识点,请酌情使用

Tokio.rs

你没看错,这个单词和小日子有关。

Tokio.rs(通常称为Tokio)是一个用于异步编程的Rust编程语言的库和运行时系统。它提供了一个基于futuresasync/await的高性能异步编程框架,使开发者能够编写高效、非阻塞的网络应用程序和系统服务。

  1. 异步编程
  • Tokio.rs的核心特性是异步编程。它利用Rustasync/await语法来编写异步代码,使得编写非阻塞的程序更加直观和容易。
  • 异步编程可以在单个线程上处理大量的并发连接和I/O操作,从而提高了应用程序的性能和资源利用率。
  1. 事件驱动
  • Tokio基于事件驱动的模型,应用程序被构建成响应事件的方式,例如,网络套接字上的数据到达、定时器触发等。
  • 这种模型使得应用程序可以有效地管理多个并发任务,而不必为每个任务分配一个独立的线程,从而减少了资源开销。
  1. 核心组件
  • tokio-core:提供了异步基础设施,包括异步任务的调度和基本的I/O操作。
  • tokio-io:提供了对网络和文件I/O的高级异步支持。
  • tokio-tcptokio-udp:用于构建异步TCP和UDP网络应用程序的库。
  • tokio-timer:用于创建和管理定时器的库。
  • tokio-sync:提供了各种异步的同步原语,如通道(channels)和锁(locks)。
  • tokio-async-await:用于支持Rust的async/await语法的库。
  1. 生态系统
  • Tokio.rs有一个丰富的生态系统,包括许多第三方库和插件,用于构建各种类型的应用程序,从Web服务器到分布式系统。
  • 一些流行的Web框架,如Actixwarp,都建立在Tokio.rs之上。
  1. 性能
  • Tokio.rs被设计成高性能的异步运行时系统,通过有效地管理事件循环和任务调度,使得应用程序能够处理大量并发连接而不会出现性能瓶颈。
  1. 安全性
  • Rust的内存安全性和线程安全性特性也适用于Tokio.rs应用程序,帮助开发者避免了许多常见的并发和内存错误。
  1. 使用场景
  • Tokio.rs广泛用于构建高性能的网络服务器、代理、数据库连接池、消息队列等异步应用程序。
  • 它也适用于需要大规模并发处理的任务,如网络爬虫和实时数据处理。

下图是用简单的命令,构建了一个服务器。

image.png

更详细的介绍,可以参考tokio.rs 官网

Axum.rs

Axum.rs(通常简称为Axum)是一个用于构建异步Rust应用程序的Web框架。它专注于提供简单而强大的工具,使得开发者能够构建高性能、可维护的异步Web服务。

  1. 异步和性能
  • Axum.rs是一个异步的Web框架,它利用Rustasync/await语法来编写非阻塞的Web应用程序
  • 异步编程模型允许应用程序有效地处理大量并发请求,提高性能和资源利用率。
  1. 基于Actix和Hyper
  • Axum.rs构建在ActixHyper之上,这两个项目都是Rust生态系统中非常受欢迎的Web框架和HTTP库。
  • 它继承了Actix的优秀特性,如Actor模型和中间件支持,以及Hyper的高性能HTTP请求处理能力。
  1. 简洁和模块化
  • Axum的设计目标之一是提供清晰、模块化的API,使得开发者能够轻松构建和维护Web应用程序。
  • 它鼓励将应用程序划分为各种小模块,每个模块负责处理特定的请求和响应。
  1. 中间件支持
  • Axum支持中间件,这些中间件可以用于处理请求和响应,例如身份验证、日志记录、跨域资源共享(CORS)等。
  • 这使得开发者可以轻松地扩展和自定义应用程序的行为。
  1. 路由
  • Axum提供了强大的路由功能,可以根据不同的HTTP请求路径和HTTP方法来映射到处理程序(handlers)。
  • 开发者可以定义多个路由,并且可以通过宏来声明路由和处理程序。
  1. Type-Safe
  • Axum.rs是类型安全的,它利用Rust的类型系统来防止常见的编程错误,如空指针和数据竞争。
  1. 生态系统
  • 虽然Axum.rs是相对较新的项目,但它已经开始吸引了一些关注,并且正在建立一个生态系统,包括与数据库连接、模板引擎和其他常见Web开发工具的集成。
  1. 使用场景
  • Axum.rs适用于构建高性能的Web服务,特别是需要处理大量并发请求的应用程序,如实时通信服务、游戏服务器、物联网后端等。

下面是利用axum简单的构建了一个web应用。访问localhost:3000/就会返回Hello Rust

use axum::{
    routing::{get, post},
    Router,
};
use std::net::SocketAddr;
#[tokio::main]
async fn main() {
    // 初始化tracing
    tracing_subscriber::fmt::init();
    // 构建我们的应用程序,包括一个路由
    let app = Router::new()
        .route("/", get(root));
    // 使用hyper运行我们的应用程序,在全局监听端口3000
    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}
// 基本的处理函数,响应一个静态字符串
async fn root() -> &'static str {
    "Hello, Rust!"
}

更详细的内容,可以参考axum官网

rscx 的介绍

image.png

下面的代码是用类似JSX语法构建页面结构的例子。

use rscx::{component, html, props, CollectFragment};
#[tokio::main]
async fn main() {
    let app = app().await;
    println!("{}", app);
}
async fn app() -> String {
    let s = "ul { color: red; }";
    html! {
        <!DOCTYPE html>
        <html>
            <head>
                <style>{s}</style>
            </head>
            <body>
                <Section />
                <Section title="Hello">
                    <Items />
                </Section>
            </body>
        </html>
    }
}
#[component]
fn Section(
    #[builder(default = "Default title".into(), setter(into))] 
    title: String,
    #[builder(default)] 
    children: String,
) -> String {
    html! {
        <div>
            <h1>{ title }</h1>
            { children }
        </div>
    }
}
#[component]
async fn Items() -> String {
    let data = load_data_async().await;
    html! {
        <ul>
            {
                data
                    .into_iter()
                    .map(|item| html! { <li>{ item }</li> })
                    .collect_fragment() // helper method to collect a list of components into a String
            }
        </ul>
    }
}
async fn load_data_async() -> Vec<String> {
    vec!["a".to_string(), "b".to_string(), "c".to_string()]
}

更多内容,可以参考rscx 官网

CURL

curl(全称:Client for URLs)是一个用于传输数据的命令行工具和库,广泛用于各种操作系统中,包括LinuxUnixmacOSWindows。它支持多种协议,包括HTTPHTTPSFTPFTPS等,因此可以用来与各种远程服务器进行数据交互。

  1. 功能特点
  • 数据传输curl可以用于上传和下载文件,发送和接收数据。
  • 多协议支持:支持多种协议,使其适用于各种网络通信需求。
  • 命令行工具curl是一个命令行工具,可以通过终端或脚本来使用。
  • 跨平台:可在多种操作系统上运行,包括LinuxUnixmacOSWindows
  • 开源curl是开源软件,可以自由使用和修改。
  1. 基本用法
  • 下载文件:curl -O URL,例如:curl -O https://www.example.com/file.txt,将会下载文件到当前目录。
  • 发送HTTP请求:curl -X GET/POST/PUT/DELETE URL,可以发送不同类型的HTTP请求。
  • 基本认证:curl -u username:password URL,用于进行基本的HTTP认证。
  • 保存响应到文件:curl -o output.txt URL,将服务器响应保存到指定文件中。
  1. 高级用法
  • 自定义请求头:通过-H选项可以添加自定义的HTTP请求头。
  • 表单提交:可以使用-d选项发送表单数据,例如-d "key1=value1&key2=value2"
  • 文件上传:使用-F选项可以上传文件,例如-F "file=@path/to/file"
  • 代理服务器:通过--proxy选项可以设置代理服务器。
  • SSL选项:支持HTTPS,可以使用--insecure选项来跳过SSL证书验证。
  • 断点续传:使用-C -选项可以实现断点续传,继续之前的下载。
  • Cookie管理:通过-b-c选项可以发送和保存Cookie信息。
  • 并发下载:使用-O URL1 -O URL2可以并发下载多个文件。

总之,curl是一个功能强大且灵活的工具,可用于各种网络通信需求。它的命令行界面和丰富的选项使其成为开发人员和系统管理员的重要工具之一。

相关文章
|
28天前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
31 0
|
1月前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
1月前
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
1月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
1月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
1月前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
43 3
|
1月前
|
网络协议 Windows
Windows Server 2019 Web服务器搭建
Windows Server 2019 Web服务器搭建
|
3月前
|
API C# 开发框架
WPF与Web服务集成大揭秘:手把手教你调用RESTful API,客户端与服务器端优劣对比全解析!
【8月更文挑战第31天】在现代软件开发中,WPF 和 Web 服务各具特色。WPF 以其出色的界面展示能力受到欢迎,而 Web 服务则凭借跨平台和易维护性在互联网应用中占有一席之地。本文探讨了 WPF 如何通过 HttpClient 类调用 RESTful API,并展示了基于 ASP.NET Core 的 Web 服务如何实现同样的功能。通过对比分析,揭示了两者各自的优缺点:WPF 客户端直接处理数据,减轻服务器负担,但需处理网络异常;Web 服务则能利用服务器端功能如缓存和权限验证,但可能增加服务器负载。希望本文能帮助开发者根据具体需求选择合适的技术方案。
157 0
|
3月前
|
Rust 安全 开发者
惊爆!Xamarin 携手机器学习,开启智能应用新纪元,个性化体验与跨平台优势完美融合大揭秘!
【8月更文挑战第31天】随着互联网的发展,Web应用对性能和安全性要求不断提高。Rust凭借卓越的性能、内存安全及丰富生态,成为构建高性能Web服务器的理想选择。本文通过一个简单示例,展示如何使用Rust和Actix-web框架搭建基本Web服务器,从创建项目到运行服务器全程指导,帮助读者领略Rust在Web后端开发中的强大能力。通过实践,读者可以体验到Rust在性能和安全性方面的优势,以及其在Web开发领域的巨大潜力。
39 0
|
10天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
36 9