Spring Boot WebFlux + Server-sent 客户端接收消息示例

最新推荐文章于 2024-07-05 21:53:25 发布

二牛说课

最新推荐文章于 2024-07-05 21:53:25 发布

阅读量1.2k

点赞数

分类专栏：技术实践

原文链接：https://my.oschina.net/lenglingx/blog/3030532

版权

技术实践专栏收录该内容

76 篇文章 1 订阅

订阅专栏

EventSource 对比 websoket(socket)

EventSource 基于http协议，socket基于tcp;

EventSource 是单向通讯，只有服务端向客户端发送。 websocket可以互相传递消息；

可用于扫码登陆扫码成功后网页端一直等待成功消息；

https://www.iteye.com/blog/wiselyman-2411933（待实践）；

对于跨域都需要服务端配置跨域信息

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1允许任何域名使用
        corsConfiguration.addAllowedOrigin("*");
        // 2允许任何头
        corsConfiguration.addAllowedHeader("*");
        // 3允许任何方法（post、get等）
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

}

下面是转载的文章

在本文中，我们将向您展示如何使用服务器发送的事件开发响应式Web应用程序。
Spring Boot 2.1.2.RELEASE
Spring WebFlux 5.1.4.RELEASE
Thymeleaf 3.0.11.RELEASE
JUnit 5.3.2
Maven 3

在Spring中，返回JSON和标头 MediaType.TEXT_EVENT_STREAM_VALUE

@RestController
public class CommentController {

    @GetMapping(path = "/comment/stream", 
        produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<Comment> feed() {
        //...
    }
}

在Javascript中，用于EventSource向上述端点发送请求。

function loadComments () {
    this.source = null;
    this.start = function () {
        this.source = new EventSource("/comment/stream");
        this.source.addEventListener("message", function (event) {
            var comment = JSON.parse(event.data);
            //... update somewhere
        });
        this.source.onerror = function () {
            this.close();
        };
    };

    this.stop = function() {
        this.source.close();
    }
}
comment = new loadComments();
window.onload = function() {
    comment.start();
};
window.onbeforeunload = function() {
    comment.stop();
}

1.项目目录

2. Maven的pom.xml

<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>

	<groupId>com.imddy.springboot</groupId>
	<artifactId>webflux-thymeleaf-sse</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>webflux-thymeleaf-sse</name>
	<url>http://maven.apache.org</url>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.2.RELEASE</version>
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<java.version>1.8</java.version>
		<junit-jupiter.version>5.3.2</junit-jupiter.version>
	</properties>

	<dependencies>
		<!-- web mvc -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
		<!-- webflux reactive -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>

        <!-- thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- exclude junit 4, prefer junit 5 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>junit</groupId>
                    <artifactId>junit</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- junit 5 -->
		<dependency>
			<groupId>org.junit.jupiter</groupId>
			<artifactId>junit-jupiter-engine</artifactId>
			<version>${junit-jupiter.version}</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-surefire-plugin</artifactId>
				<version>2.22.0</version>
			</plugin>

		</plugins>
	</build>
</project>

3. Spring Boot + Spring WebFlux

3.1 Spring基于WebFlux注释的控制器。启用数据流。写produces = MediaType.TEXT_EVENT_STREAM_VALUE

CommentController.java

package com.imddy.springboot.reactive.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.imddy.springboot.reactive.model.Comment;
import com.imddy.springboot.reactive.repository.CommentRepository;

import reactor.core.publisher.Flux;

@RestController
public class CommentController {

	@Autowired
	private CommentRepository commentRepository;

	@GetMapping(path = "/comment/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
	public Flux<Comment> feed() {
		return this.commentRepository.findAll();
	}

}

MainController.java

package com.imddy.springboot.reactive.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
public class MainController {

	@GetMapping(path = {"/","/index"})
	public String index(final Model model) {
		return "index";
	}

}

3.2在repository，返回一个Flux对象。

CommentRepository.java 这个是个接口

package com.imddy.springboot.reactive.repository;

import com.imddy.springboot.reactive.model.Comment;

import reactor.core.publisher.Flux;

public interface CommentRepository {

	Flux<Comment> findAll();
	
}

ReactiveCommentRepository.java 这个是实现类

package com.imddy.springboot.reactive.repository;

import java.time.Duration;
import java.util.Arrays;
import java.util.List;

import org.springframework.stereotype.Repository;

import com.imddy.springboot.reactive.model.Comment;
import com.imddy.springboot.reactive.utils.CommentGenerator;

import reactor.core.publisher.Flux;

@Repository
public class ReactiveCommentRepository implements CommentRepository{

	 @Override
	    public Flux<Comment> findAll() {
		
	        //simulate data streaming every 1 second.
	        return Flux.interval(Duration.ofSeconds(1))
	                .onBackpressureDrop()
	                .map(this::generateComment)
	                .flatMapIterable(x -> x);
					
	    }

	    private List<Comment> generateComment(long interval) {

	        Comment obj = new Comment(
				CommentGenerator.randomAuthor(), 
				CommentGenerator.randomMessage(), 
				CommentGenerator.getCurrentTimeStamp());
	        return Arrays.asList(obj);

	    }
}

3.3一个用于生成随机注释的utils类。

CommentGenerator.java

package com.imddy.springboot.reactive.utils;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.Arrays;
import java.util.List;
import java.util.Random;

public class CommentGenerator {

    private static final DateTimeFormatter dtf = DateTimeFormatter.ofPattern("yyyy/MM/dd HH:mm:ss");
    private static final Random RANDOM = new Random(System.currentTimeMillis());

    private static final List<String> COMMENT_AUTHOR =
            Arrays.asList(
                    "Mkyong", "Oliver", "Jack", "Harry", "Jacob",
                    "Isla", "Emily", "Poppy", "Ava", "Isabella");


    private static final List<String> COMMENT_MESSAGE =
            Arrays.asList(
                    "I Love this!",
                    "Me too!",
                    "Wow",
                    "True!",
                    "Hello everyone here?",
                    "Good!");

    public static String randomAuthor() {
        return COMMENT_AUTHOR.get(RANDOM.nextInt(COMMENT_AUTHOR.size()));
    }

    public static String randomMessage() {
        return COMMENT_MESSAGE.get(RANDOM.nextInt(COMMENT_MESSAGE.size()));
    }

    public static String getCurrentTimeStamp() {
        return dtf.format(LocalDateTime.now());
    }
}

3.4评论模型。

Comment.java

package com.imddy.springboot.reactive.model;

public class Comment {

	private String author;
	private String message;
	private String timestamp;

	public Comment() {
	}

	public Comment(String author, String message, String timestamp) {
		this.author = author;
		this.message = message;
		this.timestamp = timestamp;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String getTimestamp() {
		return timestamp;
	}

	public void setTimestamp(String timestamp) {
		this.timestamp = timestamp;
	}

}

3.5启动Spring Boot。

CommentWebApplication.java 这个是Spring Boot Application启动程序。

package com.imddy.springboot.reactive;

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

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


}

application.properties 这个项目这个里面没有也可以。

logging.level.org.springframework.web=INFO

#thymelea模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
#热部署文件，页面不产生缓存，及时更新
spring.thymeleaf.cache=false

4. Thymeleaf

模板中没有特殊的反应标签，只使用正常循环。放在 templates目录下

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link data-th-href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link data-th-href="@{/css/main.css}" rel="stylesheet">
</head>
<body>

<div class="container">

    <div class="row">
        <div id="title">
            <h1>Spring WebFlux + Server Sent Events</h1>
        </div>

        <table id="comments" class="table table-striped">
            <thead>
            <tr>
                <th width="10%">Author</th>
                <th width="60%">Message</th>
                <th width="30%">Date</th>
            </tr>
            </thead>
            <tbody>
            <tr class="result" data-th-each="comment : ${comments}">
                <td>[[${comment.author}]]</td>
                <td>[[${comment.message}]]</td>
                <td>[[${comment.timestamp}]]</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<script data-th-src="@{/js/main.js}"></script>

</body>

</html>

5. JavaScript EventSource

关键是使用Javascript EventSource类发送请求并监听message事件，并将流数据反应更新到表中。放在 /static/js/ 下

main.js

function loadComments() {

	this.source = null;

	this.start = function() {

		var commentTable = document.getElementById("comments");

		this.source = new EventSource("/comment/stream");

		this.source.addEventListener("message", function(event) {

			// These events are JSON, so parsing and DOM fiddling are needed
			var comment = JSON.parse(event.data);

			var row = commentTable.getElementsByTagName("tbody")[0]
					.insertRow(0);
			var cell0 = row.insertCell(0);
			var cell1 = row.insertCell(1);
			var cell2 = row.insertCell(2);

			cell0.className = "author-style";
			cell0.innerHTML = comment.author;

			cell1.className = "text";
			cell1.innerHTML = comment.message;

			cell2.className = "date";
			cell2.innerHTML = comment.timestamp;

		});

		this.source.onerror = function() {
			this.close();
		};

	};

	this.stop = function() {
		this.source.close();
	}

}

comment = new loadComments();

/*
 * Register callbacks for starting and stopping the SSE controller.
 */
window.onload = function() {
	comment.start();
};
window.onbeforeunload = function() {
	comment.stop();
}

页面使用了bootstrap的样式，引入对应放在 /static/css/ 下

bootstrap.min.css 文件太长，我没有引入，使用的是 Bootstrap v4.2.1 (https://getbootstrap.com/)

/*!
 * Bootstrap v4.2.1 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--
/*# sourceMappingURL=bootstrap.min.css.map */

main.css

#title{
    margin:40px 0;
}

6.单元测试

WebTestClient单元测试流式响应

TestCommentWebApplication.java 放在test测试目录下，这里其实不需要这个文件，它就是只是个测试。

package com.imddy.springboot.reactive;

import java.util.List;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.http.MediaType;
import org.springframework.test.web.reactive.server.WebTestClient;

import com.imddy.springboot.reactive.model.Comment;

import static org.junit.jupiter.api.Assertions.assertEquals;

//junit 4
//@RunWith(SpringRunner.class)
//@ExtendWith(SpringExtension.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
//@AutoConfigureWebTestClient(timeout = "10000")//10 seconds
public class TestCommentWebApplication {

 @Autowired
 private WebTestClient webClient;

 @Test
 public void testCommentStream() {

     List<Comment> comments = webClient
             .get().uri("/comment/stream")
             .accept(MediaType.valueOf(MediaType.TEXT_EVENT_STREAM_VALUE))
             .exchange()
             .expectStatus().isOk()
             //.expectHeader().contentType(MediaType.APPLICATION_STREAM_JSON) // caused timeout
             .returnResult(Comment.class)
             .getResponseBody()
             .take(3)
             .collectList()
             .block();

     comments.forEach(x -> System.out.println(x));

     assertEquals(3, comments.size());

 }

}

7.Demo运行测试

运行

结果

http://localhost:8080/

http://localhost:8080/comment/stream

/ 访问的是 thymeleaf映射的index.html 页面。

/comment/stream 为数据流。

参考：http://www.spring4all.com/article/6852 和 https://www.mkyong.com/spring-boot/spring-boot-webflux-server-sent-events-example/

二牛说课

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot WebFlux + Server-sent 客户端接收消息示例

EventSource 对比 websoket(socket)EventSource 基于http协议，socket基于tcp;EventSource 是单向通讯，只有服务端向客户端发送。 websocket可以互相传递消息；可用于扫码登陆扫码成功后网页端一直等待成功消息；https://www.jianshu.com/p/9a0e802b2297（带实践）；...
复制链接

扫一扫

专栏目录