【RabbitMQ】显示耗时处理进度

通过网页提交一个耗时的请求，然后启动处理线程，请求返回。处理线程每完成一部分就给前台推送完成的数量，前端显示进度。

依赖jar

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>rabbitmq-service</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>rabbitmq-service</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-amqp</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

配置

server.port=8088
spring.application.name=rabbitmq-service
spring.rabbitmq.host=192.168.226.128
spring.rabbitmq.port=5672
spring.rabbitmq.username=guest
spring.rabbitmq.password=guest

主入口

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

RabbitMQ配置

package com.example.rabbitmqservice.config;

import lombok.Data;
import org.springframework.amqp.rabbit.connection.CachingConnectionFactory;
import org.springframework.amqp.rabbit.connection.ConnectionFactory;
import org.springframework.amqp.rabbit.core.RabbitTemplate;
import org.springframework.beans.factory.config.ConfigurableBeanFactory;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Scope;

@Data
@Configuration
@ConfigurationProperties(prefix = "spring.rabbitmq")
public class RabbitMQConfig {
    private String host;
    private int port;
    private String username;
    private String password;

    @Bean
    public ConnectionFactory connectionFactory() {
        CachingConnectionFactory connectionFactory = new CachingConnectionFactory(host,port);
        connectionFactory.setUsername(username);
        connectionFactory.setPassword(password);
        connectionFactory.setVirtualHost("/");
        connectionFactory.setPublisherConfirms(true);
        return connectionFactory;
    }

    @Bean
    @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
    public RabbitTemplate rabbitTemplate() {
        return new RabbitTemplate(connectionFactory());
    }
}

处理RabbitMQ配置

package com.example.rabbitmqservice.config;

import org.springframework.amqp.core.Binding;
import org.springframework.amqp.core.BindingBuilder;
import org.springframework.amqp.core.DirectExchange;
import org.springframework.amqp.core.Queue;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class RabbitMQConfigProcess {

    public static final String PROCESS_DIRECT_EXCHANGE = "process.direct.exchange";
    public static final String PROCESS_QUEUE = "process.queue";
    public static final String PROCESS_KEY = "process.key";

    @Bean
    public DirectExchange processDirectExchange() {
        return new DirectExchange(PROCESS_DIRECT_EXCHANGE, true, false);
    }

    @Bean
    public Queue processQueue() {
        return new Queue(PROCESS_QUEUE, true, false, false);
    }

    @Bean
    public Binding processBinding() {
        return BindingBuilder.bind(processQueue()).to(processDirectExchange()).with(PROCESS_KEY);
    }
}

WebSocket配置

package com.example.rabbitmqservice.config;


import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocket
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    public static final String END_POINT = "/websocket";

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint(END_POINT)
                .setAllowedOrigins("*")
                .withSockJS()
                .setHeartbeatTime(5000)
                .setDisconnectDelay(3000)
                .setStreamBytesLimit(512);
    }
}

消息接收转发

package com.example.rabbitmqservice.receive;

import com.example.rabbitmqservice.config.RabbitMQConfigProcess;
import org.springframework.amqp.rabbit.annotation.RabbitHandler;
import org.springframework.amqp.rabbit.annotation.RabbitListener;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Component;

@Component
@RabbitListener(queues = RabbitMQConfigProcess.PROCESS_QUEUE)
public class ProcessReceive {
    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @RabbitHandler
    public void process(String content) {
        System.out.println("收到并转发消息 > " + content);
        messagingTemplate.convertAndSend("/direct/process/", content);
    }
}

请求处理

package com.example.rabbitmqservice.controller;

import com.example.rabbitmqservice.config.RabbitMQConfigProcess;
import org.springframework.amqp.AmqpException;
import org.springframework.amqp.core.Message;
import org.springframework.amqp.core.MessageDeliveryMode;
import org.springframework.amqp.core.MessagePostProcessor;
import org.springframework.amqp.rabbit.connection.CorrelationData;
import org.springframework.amqp.rabbit.core.RabbitTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.time.LocalTime;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.LinkedBlockingDeque;
import java.util.concurrent.ThreadPoolExecutor;
import java.util.concurrent.TimeUnit;

@RestController
public class ProcessController {
    @Autowired
    private RabbitTemplate rabbitTemplate;

    ThreadPoolExecutor executor = new ThreadPoolExecutor(10, 40, 2, TimeUnit.MINUTES, new LinkedBlockingDeque<>());

    @RequestMapping("/process/direct")
    public Map<String, Object> direct() {

        Runnable runnable = () -> process();
        executor.execute(runnable);

        Map<String, Object> result = new HashMap<>();
        result.put("status", 200);
        result.put("message", "开始处理");
        return result;
    }

    private void process() {
        // 模拟耗时处理
        for (int i = 1; i <= 100; i++) {
            String msg = String.valueOf(i);
            rabbitTemplate.convertAndSend(RabbitMQConfigProcess.PROCESS_DIRECT_EXCHANGE, RabbitMQConfigProcess.PROCESS_KEY , msg,
                    // 消息到达broker时调用confirm callback。若是cluster则到达所有的broker时调用confirm callback。
                    message -> {
                        // 投递模式2
                        message.getMessageProperties().setDeliveryMode(MessageDeliveryMode.PERSISTENT);
                        System.out.println("confirm callback");
                        return message;
                    }, new CorrelationData("123"));

            rabbitTemplate.setMandatory(true);//开启强制委托模式
            // 没有投递到目标队列时调用return callback
            rabbitTemplate.setReturnCallback((message, replyCode, replyText, exchange, routingKey) -> {
                System.out.println("return callback");
                System.out.println("没有投递到目标队列");
            });

            // 模拟耗时
            try {
                Thread.sleep(200);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

    }
}

前端html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/sockjs.js"></script>
    <script type="text/javascript" src="js/stomp.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <span v-text="message"></span>
    <button type="button" @click="startMock">开始模拟</button>
<span v-text="process"></span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            process: '',
            message: '点击开始模拟'
        },
        methods: {
            startMock: function() {
                var _this = this;
                var query = {};
                this.requestProcess(query).then(response => {
                    console.log('返回');
                    console.dir(response);
                }).then(error => {
                    console.log('出错');
                    console.dir(error);
                });
            },
            requestProcess(query) {
                return new Promise((resolve, reject) => {
                    axios({
                        url: 'http://localhost:8088/process/direct',
                        method: 'get',
                        params: query
                    }).then(response => {
                        resolve(response);
                        //_this.message = response.data.message;
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            displayProcess: function() {
                var _this = this;
                console.log('displayProcess');
                var sock = new SockJS("http://localhost:8088/websocket");
                var stompClient = Stomp.over(sock);
                stompClient.connect({}, function () {
                    stompClient.subscribe('/direct/process/', function (data) {
                        console.dir(data);
                        _this.process = data.body + '%';
                    }, {precessId: 123});
                });
                sock.onclose = function () {
                    console.dir("websocket已经断开连接");
                    // 断开五秒后重连
                    setTimeout(function () {
                        _this.displayProcess();
                    }, 5000);
                }
            }
        },
        mounted: function() {
            this.displayProcess();
        }
    });
</script>
</body>
</html>

【RabbitMQ】显示耗时处理进度

猜你喜欢