DEV Community
·
Fluvio - 开源的实时数据框架
💡
原文英文，约2600词，阅读约需10分钟。
📝
内容提要
本文介绍了使用Fluvio技术构建实时股票价格图表的实际项目，包括安装Fluvio、设置项目文件结构、编写服务器代码、创建Next.js应用程序以及使用Fluvio创建实时数据流的步骤。作者还提供了一个部署脚本，使整个过程更加简单。
🎯
关键要点
- 本文介绍了使用Fluvio技术构建实时股票价格图表的实际项目。
- 项目使用的技术栈包括前端的Next.js，后端的Express.js，以及数据流的Fluvio。
- 第一步是安装Fluvio CLI，需要Docker或Linux机器。
- 创建项目文件夹和文件结构，包括server、client和http-sources三个子文件夹。
- 编写服务器代码以创建API，主要有三个端点：/list、/price和/stream/:topic。
- 创建Next.js应用程序，包含StockChart和StockSwitch组件。
- 使用Fluvio创建实时数据流，通过http-sources文件夹中的YAML文件定义HTTP源。
- 最后一步是创建Fluvio主题并部署YAML文件，提供了一个简化的部署脚本。
- 运行客户端和服务器后，可以在浏览器中查看应用程序。
❓
延伸问答
Fluvio是什么，它的主要用途是什么？
Fluvio是一个开源的实时数据框架，主要用于构建实时数据流应用，如实时股票价格图表。
如何安装Fluvio CLI？
要安装Fluvio CLI，需要在Docker或Linux机器上运行命令：curl -fsS https://hub.infinyon.cloud/install/install.sh | bash。
在构建实时股票价格图表时，使用了哪些技术栈？
该项目使用的技术栈包括前端的Next.js，后端的Express.js，以及数据流的Fluvio。
如何创建Fluvio主题并部署YAML文件？
在http-sources文件夹中创建YAML文件后，使用命令fluvio topic create [主题名]创建主题，然后运行部署命令：cdk deploy start --ipkg [文件名] -c [YAML文件名]。
项目中如何实现实时数据流？
通过在Express.js服务器中创建API端点，并使用Fluvio的partitionConsumer来流式传输数据，实现实时数据流。
如何在Next.js应用中显示实时股票价格？
在Next.js应用中，通过创建StockChart组件，使用EventSource从Express API获取实时数据，并在图表中显示。
➡️
