开源项目实战：基于Spring WebFlux与React的实时应用搭建指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00471/article/details/142277623

开源项目实战：基于Spring WebFlux与React的实时应用搭建指南

okta-spring-webflux-react-example Reactive Spring WebFlux API + Real-time React 项目地址: https://gitcode.com/gh_mirrors/ok/okta-spring-webflux-react-example

一、项目概述

本指南将引导您通过实践操作来搭建一个结合Spring WebFlux、WebSocket和React技术栈的全栈应用程序。示例项目源自GitHub上的okta-spring-webflux-react-example，旨在展示如何创建一个响应式API，并通过OpenID Connect（OIDC）进行安全加固，同时添加与React客户端的实时通讯功能。

二、项目目录结构及介绍

该开源项目遵循典型的Java与前端项目结构，结合Maven管理的后端与Node.js驱动的前端构建：

├── reactive-web                # Spring Boot 应用程序代码所在目录
│   ├── src                     # 主要代码与资源
│   │   ├── main                # 应用程序的主要逻辑
│   │   │   ├── java             # Java源代码
│   │   │   └── resources        # 配置文件以及静态资源
│   │   └── test                # 测试代码
│   └── pom.xml                 # Maven构建脚本
├── react-app                   # React客户端代码所在目录
│   ├── node_modules            # NPM依赖包
│   ├── public                  # 静态资源，如index.html
│   ├── src                      # React组件及相关JSX文件
│   ├── package.json            # Node.js项目配置和脚本
│   └── yarn.lock               # NPM依赖版本锁定文件
├── README.md                   # 项目说明文档
└── ...

reactive-web：包含了Spring Boot应用的核心，包括WebFlux API的定义和OAuth2的安全配置。
react-app：React应用程序，负责前端交互，通过WebSocket实现与服务器的实时通信。

三、项目的启动文件介绍

后端启动（Spring Boot）

主要类：位于reactive-web/src/main/java/com/example/reactivewebflux中的主类通常以Application.java命名，负责启动Spring Boot应用。例如：

package com.example.reactivewebflux;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ReactiveWebfluxApplication {

    public static void main(String[] args) {
        SpringApplication.run(ReactiveWebfluxApplication.class, args);
    }

}

前端启动（React）

在react-app目录下，运行npm命令启动React应用：
```
cd react-app
npm install
npm start
```

四、项目的配置文件介绍

后端配置（application.yml）

在reactive-web/src/main/resources目录下的application.yml是关键的配置文件，其中包含了与Okta的身份验证集成设置，如oidc.issuer-uri, client-id, 和 client-secret等。这些值需替换为实际从Okta开发者账户获取的信息。例子如下：

oidc:
  issuer-uri: https://[yourOktaDomain]/oauth2/default
spring:
  security:
    oauth2:
      client:
        provider:
          okta:
            issuer-uri: ${oidc.issuer-uri}
        registration:
          okta:
            client-id: ${oidc.client-id}
            client-secret: ${oidc.client-secret}
            scope: openid, email, profile
    resourceserver:
      jwt:
        issuer-uri: ${oidc.issuer-uri}

前端配置（App.tsx）

对于React应用，重要的配置位于react-app/src/App.tsx或如果是JavaScript项目则可能在类似的入口文件中，用于指定Okta的相关认证信息，如下所示：

const config = {
  issuer: 'https://[yourOktaDomain]/oauth2/default',
  redirect_uri: window.location.origin + '/implicit/callback',
  client_id: '[clientId]'
};

以上就是快速概览【okta-spring-webflux-react-example】项目的结构、启动方式和配置细节，这为您探索如何构建一个既现代又实时的全栈应用程序提供了基础框架。记得根据自己的需求调整配置并享受开发过程！

okta-spring-webflux-react-example Reactive Spring WebFlux API + Real-time React 项目地址: https://gitcode.com/gh_mirrors/ok/okta-spring-webflux-react-example