Project Structure

​

1. Project Structure

fbmq - application: Spring Boot startup module, responsible for starting and initializing the entire project.

fbmq - bridge - source: data source bridging module, used to connect different data sources and transform and transfer data.

fbmq - component: common component module, holding the project's reusable components, such as utility classes and configuration classes.

fbmq - consume: data consumption module, used to process data received from the MQTT server, including parsing, processing, and storage.

fbmq - mqtt: MQTT core module, responsible for MQTT protocol-related operations, such as connections, message publishing, and subscriptions.

fbmq - route: routing module, used to route network requests and decide their forwarding direction.

fbmq - rules: business rules module, holding the project's various business rules to ensure the project operates according to specific rules.

fbmq - service: business service module, implementing concrete business functions and possibly calling other modules to complete complex operations.

fbmq - vue: frontend Vue module, containing Vue components, views, routes, and other frontend code for building the user interface.

fbmq - webflux: Spring WebFlux module, used to build reactive web applications and handle asynchronous requests and event-driven operations.

2. Configuration File

The configuration file is as follows:

spring.webflux configures the WebFlux static route path

server.post port of the visual monitoring platform service

fastbee.jwt login authentication

fastbee.user default account & password for logging in to the visual platform

fastbee.datasource MySQL configuration

fastbee.servers MQTT & WebSocket startup configuration

fastbee.cluster.localAddress local node configuration

fastbee.cluster.addresses cluster node configuration

fastbee.cluster.node-ip node name

spring:
  application:
    name: fbmq
  webflux:
    static-path-pattern: /static/**   # configure the webflux frontend resource path
  profiles:
    active: dev
server:
  port: 18083 

fastbee:
  jwt:  # jwt authentication
    secret: com.fastbee.jwt
    expireTime: 14400000
  user: # default login account and password, can be modified
    username: admin
    password: admin123
  datasource: # database where the configuration information is stored; currently only MySQL is supported
    url: jdbc:mysql://81.71.xx.xx:3306/fbmq?useSSL=false
    username: root
    password: 123456
  servers:
    - port: 1883
      auth: true #  whether to enable authentication
    - port: 8083
      openws: true # whether to use WebSocket
      path: /mqtt # ws path
      auth: true
  router:   # thread pool configuration
    batchSize: 200

logging:  # log level configuration; setting it to error is recommended
  level:
    root: info
    com.fastbee: error
    org.springframework.boot.autoconfigure: error
    org.apache.kafka: error
    org.apache.ignite: error


fastbee:
  cluster: # cluster configuration
    localAddress: 127.0.0.1
    addresses: [ "127.0.0.1" ] # internal network address
    node-id: fastbee # node id

3. Integrating Frontend Resources for Deployment with WebFlux

Integrating the Frontend

Copy the packaged frontend files to resources/static under the directory of the Spring Boot startup class.

Method 1

Assuming the frontend environment is already set up, package the frontend directly: in the terminal, cd to the fbmq-vue project, and assuming you have already run pnpm install to download the frontend dependencies, run pnpm build to package the frontend project.

Method 2 (recommended)

​ No need to install the frontend environment. In the Spring Boot parent Maven project, run maven clean to clear the Maven cache, then run maven package. After it succeeds, the frontend files are automatically copied to resources/static under the directory of the Spring Boot startup class.

The backend uses WebFlux, so frontend file filtering, requests, and so on need to be configured.

Enabling the WebFlux CORS Filter

@Configuration
@EnableWebFlux
public class WebFluxCorsConfig implements WebFluxConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") // Allow all origins; in real applications, configure the exact frontend domain
                .allowedMethods(HttpMethod.GET.name(), HttpMethod.POST.name(), HttpMethod.PUT.name(), HttpMethod.DELETE.name(), HttpMethod.OPTIONS.name())
                .allowedHeaders("*")
                .allowCredentials(false);
    }
}

Configuring Frontend Routing

@Configuration
@EnableWebFlux
public class WebFluxMvcConfig implements WebFluxConfigurer {

    @Bean
    public RouterFunction<ServerResponse> staticResourcesRouter() {
        ClassPathResource classPathResource = new ClassPathResource("static/");
        return resources("/**", classPathResource);
    }

}

Redirect & Start Page

@Configuration
public class WebFluxRedirectConfig {

    @Bean
    public WebFilter redirectFilter() {
        return (ServerWebExchange exchange, WebFilterChain chain) -> {
            ServerHttpRequest request = exchange.getRequest();
            ServerHttpResponse response = exchange.getResponse();
            // Determine whether the request path is the root path ("/")
            if ("/".equals(request.getPath().pathWithinApplication().value())) {
                // Set the redirect status code to 302 (temporary redirect; change to 301 etc. as needed)
                response.setStatusCode(HttpStatus.FOUND);
                // Set the redirect target address to "/index.html"
                response.getHeaders().setLocation(request.getURI().resolve("/index.html"));
                return Mono.empty();
            }
            return chain.filter(exchange);
        };
    }
}

​