精华内容
下载资源
问答
  • 本系列其他文章见:《响应式Spring的道法术器》。 前情提要:响应式流 | lambda与函数式 | Reactor快速上手 1.3.3 Spring WebFlux Spring WebFlux是随Spring 5推出的响应式Web框架。 1)服务端技术栈 ...

    本系列其他文章见:《响应式Spring的道法术器》
    前情提要:响应式流 | lambda与函数式 | Reactor快速上手

    1.3.3 Spring WebFlux

    Spring WebFlux是随Spring 5推出的响应式Web框架。

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    1)服务端技术栈

    Spring提供了完整的支持响应式的服务端技术栈。

    如上图所示,左侧为基于spring-webmvc的技术栈,右侧为基于spring-webflux的技术栈,

    • Spring WebFlux是基于响应式流的,因此可以用来建立异步的、非阻塞的、事件驱动的服务。它采用Reactor作为首选的响应式流的实现库,不过也提供了对RxJava的支持。
    • 由于响应式编程的特性,Spring WebFlux和Reactor底层需要支持异步的运行环境,比如Netty和Undertow;也可以运行在支持异步I/O的Servlet 3.1的容器之上,比如Tomcat(8.0.23及以上)和Jetty(9.0.4及以上)。
    • 从图的纵向上看,spring-webflux上层支持两种开发模式:
      • 类似于Spring WebMVC的基于注解(@Controller@RequestMapping)的开发模式;
      • Java 8 lambda 风格的函数式开发模式。
    • Spring WebFlux也支持响应式的Websocket服务端开发。

    由此看来,Spring WebFlux与Vert.x有一些相通之处,都是建立在非阻塞的异步I/O和事件驱动的基础之上的。

    2)响应式Http客户端

    此外,Spring WebFlux也提供了一个响应式的Http客户端API WebClient。它可以用函数式的方式异步非阻塞地发起Http请求并处理响应。其底层也是由Netty提供的异步支持。

    我们可以把WebClient看做是响应式的RestTemplate,与后者相比,前者:

    • 是非阻塞的,可以基于少量的线程处理更高的并发;
    • 可以使用Java 8 lambda表达式;
    • 支持异步的同时也可以支持同步的使用方式;
    • 可以通过数据流的方式与服务端进行双向通信。

    当然,与服务端对应的,Spring WebFlux也提供了响应式的Websocket客户端API。

    简单介绍这些,让我们来Coding吧(本文源码)~

    本节,我们仍然是本着“Hello,world!”的精神来上手熟悉WebFlux,因此暂时不会像手册一样面面俱到地谈到WebFlux的各个细节,我们通过以下几个例子来了解它:

    1. 先介绍一下使用Spring WebMVC风格的基于注解的方式如何编写响应式的Web服务,这几乎没有学习成本,非常赞。虽然这种方式在开发上与Spring WebMVC变化不大,但是框架底层已经是完全的响应式技术栈了;
    2. 再进一步介绍函数式的开发模式;
    3. 简单几行代码实现服务端推送(Server Send Event,SSE);
    4. 然后我们再加入响应式数据库的支持(使用Reactive Spring Data for MongoDB);
    5. 使用WebClient与前几步做好的服务端进行通信;
    6. 最后我们看一下如何通过“流”的方式在Http上进行通信。

    Spring Boot 2是基于Spring 5的,其中一个比较大的更新就在于支持包括spring-webflux和响应式的spring-data在内的响应式模块。Spring Boot 2即将发布正式版,不过目前的版本从功能上已经完备,下边的例子我们就用Spring Boot 2在进行搭建。

    1.3.3.1 基于WebMVC注解的方式

    我们首先用Spring WebMVC开发一个只有Controller层的简单的Web服务,然后仅仅做一点点调整就可切换为基于Spring WebFlux的具有同样功能的Web服务。

    我们使用Spring Boot 2搭建项目框架。

    以下截图来自IntelliJ IDEA,不过其他IDE也都是类似的。

    1)基于Spring Initializr创建项目

    本节的例子很简单,不涉及Service层和Dao层,因此只选择spring-webmvc即可,也就是“Web”的starter。

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    也可以使用网页版的https://start.spring.io来创建项目:

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    创建后的项目POM中,包含下边的依赖,即表示基于Spring WebMVC:

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

    2)创建Controller和Endpoint

    创建Controller类HelloController,仅提供一个Endpoint:/hello

        @RestController
        public class HelloController {
        
            @GetMapping("/hello")
            public String hello() {
                return "Welcome to reactive world ~";
            }
        }
    

    3)启动应用

    OK了,一个简单的基于Spring WebMVC的Web服务。我们新增了HelloController.java,修改了application.properties

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    使用IDE启动应用,或使用maven命令:

    mvn spring-boot:run
    

    通过打印的log可以看到,服务运行于Tomcat的8080端口:

    测试Endpoint。在浏览器中访问http://localhost:8080/hello,或运行命令:

    curl http://localhost:8080/hello
    

    返回Welcome to reactive world ~

    基于Spring WebFlux的项目与上边的步骤一致,仅有两点不同。我们这次偷个懒,就不从新建项目了,修改一下上边的项目:

    4)依赖“Reactive Web”的starter而不是“Web”

    修改项目POM,调整依赖使其基于Spring WebFlux:

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>    <!--【改】增加“flux”四个字符-->
        </dependency>
    

    5)Controller中处理请求的返回类型采用响应式类型

        @RestController
        public class HelloController {
        
            @GetMapping("/hello")
            public Mono<String> hello() {   // 【改】返回类型为Mono<String>
                return Mono.just("Welcome to reactive world ~");     // 【改】使用Mono.just生成响应式数据
            }
        }
    

    6)启动应用

    仅需要上边两步就改完了,是不是很简单,同样的方法启动应用。启动后发现应用运行于Netty上:

    访问http://localhost:8080/hello,结果与Spring WebMVC的相同。

    7)总结

    从上边这个非常非常简单的例子中可以看出,Spring真是用心良苦,WebFlux提供了与之前WebMVC相同的一套注解来定义请求的处理,使得Spring使用者迁移到响应式开发方式的过程变得异常轻松。

    虽然我们只修改了少量的代码,但是其实这个简单的项目已经脱胎换骨了。整个技术栈从命令式的、同步阻塞的【spring-webmvc + servlet + Tomcat】变成了响应式的、异步非阻塞的【spring-webflux + Reactor + Netty】。

    Netty是一套异步的、事件驱动的网络应用程序框架和工具,能够开发高性能、高可靠性的网络服务器和客户端程序,因此与同样是异步的、事件驱动的响应式编程范式一拍即合。

    下边的内容了解即可,就不实战了。
    在Java 7推出异步I/O库,以及Servlet3.1增加了对异步I/O的支持之后,Tomcat等Servlet容器也随后开始支持异步I/O,然后Spring WebMVC也增加了对Reactor库的支持,所以上边第4)步如果不是将spring-boot-starter-web替换为spring-boot-starter-WebFlux,而是增加reactor-core的依赖的话,仍然可以用注解的方式开发基于Tomcat的响应式应用。

    1.3.3.2 WebFlux的函数式开发模式

    既然是响应式编程了,有些朋友可能会想统一用函数式的编程风格,WebFlux满足你。WebFlux提供了一套函数式接口,可以用来实现类似MVC的效果。我们先接触两个常用的。

    再回头瞧一眼上边例子中我们用Controller定义定义对Request的处理逻辑的方式,主要有两个点:

    1. 方法定义处理逻辑;
    2. 然后用@RequestMapping注解定义好这个方法对什么样url进行响应。

    在WebFlux的函数式开发模式中,我们用HandlerFunctionRouterFunction来实现上边这两点。

    • HandlerFunction相当于Controller中的具体处理方法,输入为请求,输出为装在Mono中的响应:
        Mono<T extends ServerResponse> handle(ServerRequest request);
    
    • RouterFunction,顾名思义,路由,相当于@RequestMapping,用来判断什么样的url映射到那个具体的HandlerFunction,输入为请求,输出为装在Mono里边的Handlerfunction
        Mono<HandlerFunction<T>> route(ServerRequest request);
    

    我们看到,在WebFlux中,请求和响应不再是WebMVC中的ServletRequestServletResponse,而是ServerRequestServerResponse。后者是在响应式编程中使用的接口,它们提供了对非阻塞和回压特性的支持,以及Http消息体与响应式类型Mono和Flux的转换方法。

    下面我们用函数式的方式开发两个Endpoint:

    1. /time返回当前的时间;
    2. /date返回当前的日期。

    对于这两个需求,HandlerFunction很容易写:

        // 返回包含时间字符串的ServerResponse
        HandlerFunction<ServerResponse> timeFunction = 
            request -> ServerResponse.ok().contentType(MediaType.TEXT_PLAIN).body(
                Mono.just("Now is " + new SimpleDateFormat("HH:mm:ss").format(new Date())), String.class);
        
        // 返回包含日期字符串的ServerResponse
        HandlerFunction<ServerResponse> dateFunction = 
            request -> ServerResponse.ok().contentType(MediaType.TEXT_PLAIN).body(
                Mono.just("Today is " + new SimpleDateFormat("yyyy-MM-dd").format(new Date())), String.class);
    

    那么RouterFunction为:

        RouterFunction<ServerResponse> router = 
            RouterFunctions.route(GET("/time"), timeFunction)
                .andRoute(GET("/date"), dateFunction);
    

    按照常见的套路,RouterFunctions是工具类。

    不过这么写在业务逻辑复杂的时候不太好组织,我们通常采用跟MVC类似的代码组织方式,将同类业务的HandlerFunction放在一个类中,然后在Java Config中将RouterFunction配置为Spring容器的Bean。我们继续在第一个例子的代码上开发:

    1)创建统一存放处理时间的Handler类

    创建TimeHandler.java

        import static org.springframework.web.reactive.function.server.ServerResponse.ok;
    
        @Component
        public class TimeHandler {
            public Mono<ServerResponse> getTime(ServerRequest serverRequest) {
                return ok().contentType(MediaType.TEXT_PLAIN).body(Mono.just("Now is " + new SimpleDateFormat("HH:mm:ss").format(new Date())), String.class);
            }
            public Mono<ServerResponse> getDate(ServerRequest serverRequest) {
                return ok().contentType(MediaType.TEXT_PLAIN).body(Mono.just("Today is " + new SimpleDateFormat("yyyy-MM-dd").format(new Date())), String.class);
            }
        }
    

    由于出现次数通常比较多,这里静态引入ServerResponse.ok()方法。

    2)在Spring容器配置RouterFunction

    我们采用Spring现在比较推荐的Java Config的配置Bean的方式,创建用于存放Router的配置类RouterConfig.java

        import static org.springframework.web.reactive.function.server.RequestPredicates.GET;
        import static org.springframework.web.reactive.function.server.RouterFunctions.route;
        
        @Configuration
        public class RouterConfig {
            @Autowired
            private TimeHandler timeHandler;
        
            @Bean
            public RouterFunction<ServerResponse> timerRouter() {
                return route(GET("/time"), req -> timeHandler.getTime(req))
                        .andRoute(GET("/date"), timeHandler::getDate);  // 这种方式相对于上一行更加简洁
            }
        }
    

    3)重启服务试一试

    重启服务测试一下吧:

    $ curl http://localhost:8080/date
    Today is 2018-02-26
    
    $ curl http://localhost:8080/time
    Now is 21:12:53
    

    1.3.3.3 服务器推送

    我们可能会遇到一些需要网页与服务器端保持连接(起码看上去是保持连接)的需求,比如类似微信网页版的聊天类应用,比如需要频繁更新页面数据的监控系统页面或股票看盘页面。我们通常采用如下几种技术:

    • 短轮询:利用ajax定期向服务器请求,无论数据是否更新立马返回数据,高并发情况下可能会对服务器和带宽造成压力;
    • 长轮询:利用comet不断向服务器发起请求,服务器将请求暂时挂起,直到有新的数据的时候才返回,相对短轮询减少了请求次数;
    • SSE:服务端推送(Server Send Event),在客户端发起一次请求后会保持该连接,服务器端基于该连接持续向客户端发送数据,从HTML5开始加入。
    • Websocket:这是也是一种保持连接的技术,并且是双向的,从HTML5开始加入,并非完全基于HTTP,适合于频繁和较大流量的双向通讯场景。

    既然响应式编程是一种基于数据流的编程范式,自然在服务器推送方面得心应手,我们基于函数式方式再增加一个Endpoint /times,可以每秒推送一次时间。

    1)增加Handler方法

    TimeHandler.java

        public Mono<ServerResponse> sendTimePerSec(ServerRequest serverRequest) {
            return ok().contentType(MediaType.TEXT_EVENT_STREAM).body(  // 1
                    Flux.interval(Duration.ofSeconds(1)).   // 2
                            map(l -> new SimpleDateFormat("HH:mm:ss").format(new Date())), 
                    String.class);
        }
    
    1. MediaType.TEXT_EVENT_STREAM表示Content-Typetext/event-stream,即SSE;
    2. 利用interval生成每秒一个数据的流。

    2)配置router

    RouterConfig.java

            @Bean
            public RouterFunction<ServerResponse> timerRouter() {
                return route(GET("/time"), timeHandler::getTime)
                        .andRoute(GET("/date"), timeHandler::getDate)
                        .andRoute(GET("/times"), timeHandler::sendTimePerSec);  // 增加这一行
            }
    

    3)重启服务试一下

    重启服务后,测试一下:

    curl http://localhost:8080/times
    data:21:32:22
    data:21:32:23
    data:21:32:24
    data:21:32:25
    data:21:32:26
    <Ctrl+C>
    

    就酱,访问这个url会收到持续不断的报时数据(时间数据是在data中的)。

    那么用注解的方式如何进行服务端推送呢,这个演示就融到下一个例子中吧~

    1.3.3.3 响应式Spring Data

    开发基于响应式流的应用,就像是在搭建数据流流动的管道,从而异步的数据能够顺畅流过每个环节。前边的例子主要聚焦于应用层,然而绝大多数系统免不了要与数据库进行交互,所以我们也需要响应式的持久层API和支持异步的数据库驱动。就像从自来水厂到家里水龙头这个管道中,如果任何一个环节发生了阻塞,那就可能造成整体吞吐量的下降。

    各个数据库都开始陆续推出异步驱动,目前Spring Data支持的可以进行响应式数据访问的数据库有MongoDB、Redis、Apache Cassandra和CouchDB。今天我们用MongoDB来写一个响应式demo。

    我们这个例子很简单,就是关于User的增删改查,以及基于注解的服务端推送。

    1)编写User

    既然是举例,我们随便定义几个属性吧~

        public class User {
            private String id;
            private String username;
            private String phone;
            private String email;
            private String name;
            private Date birthday;
        }
    

    然后为了方便开发,我们引入lombok库,它能够通过注解的方式为我们添加必要的Getter/Setter/hashCode()/equals()/toString()/构造方法等,添加依赖(版本可自行到http://search.maven.org搜索最新):

    	<dependency>
    		<groupId>org.projectlombok</groupId>
    		<artifactId>lombok</artifactId>
    		<version>1.16.20</version>
    	</dependency>
    

    然后为User添加注解:

        @Data   // 生成无参构造方法/getter/setter/hashCode/equals/toString
        @AllArgsConstructor // 生成所有参数构造方法
        @NoArgsConstructor  // @AllArgsConstructor会导致@Data不生成无参构造方法,需要手动添加@NoArgsConstructor,如果没有无参构造方法,可能会导致比如com.fasterxml.jackson在序列化处理时报错
        public class User {
            ...
    

    我们可以利用IDE看一下生成的方法(如下图黄框所示):

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    可能需要先在IDE中进行少量配置以便支持lombok的注解,比如IntelliJ IDEA:

    1. 安装“lombok plugin”:
      watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70
    1. 开启对注解编译的支持:
      watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    lombok对于Java开发者来说绝对算是个福音了,希望使用Kotlin的朋友不要笑话我们土哦~

    2)增加Spring Data的依赖

    在POM中增加Spring Data Reactive Mongo的依赖:

    	<dependency>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-data-mongodb-reactive</artifactId>
    	</dependency>
    

    MongoDB是文档型的NoSQL数据库,因此,我们使用@Document注解User类:

        @Data
        @AllArgsConstructor
        @Document
        public class User {
            @Id
            private String id;      // 注解属性id为ID
            @Indexed(unique = true) // 注解属性username为索引,并且不能重复
            private String username;
            private String name;
            private String phone;
            private Date birthday;
        }
    

    OK,这样我们的模型就准备好了。MongoDB会自动创建collection,默认为类名首字母小写,也就是user

    3)配置数据源

    Spring Boot为我们搞定了几乎所有的配置,太赞了,下边是MongoDB的默认配置:

    # MONGODB (MongoProperties)
    spring.data.mongodb.authentication-database= # Authentication database name.
    spring.data.mongodb.database=test # Database name.
    spring.data.mongodb.field-naming-strategy= # Fully qualified name of the FieldNamingStrategy to use.
    spring.data.mongodb.grid-fs-database= # GridFS database name.
    spring.data.mongodb.host=localhost # Mongo server host. Cannot be set with uri.
    spring.data.mongodb.password= # Login password of the mongo server. Cannot be set with uri.
    spring.data.mongodb.port=27017 # Mongo server port. Cannot be set with uri.
    spring.data.mongodb.repositories.enabled=true # Enable Mongo repositories.
    spring.data.mongodb.uri=mongodb://localhost/test # Mongo database URI. Cannot be set with host, port and credentials.
    spring.data.mongodb.username= # Login user of the mongo server. Cannot be set with uri.
    

    请根据需要添加自定义的配置,比如我的MongoDB是跑在IP为192.168.0.101的虚拟机的Docker中的,就可在application.properties中增加一条:

    spring.data.mongodb.host=192.168.0.101
    

    4)增加DAO层repository

    与非响应式Spring Data的CrudReposity对应的,响应式的Spring Data也提供了相应的Repository库:ReactiveCrudReposity,当然,我们也可以使用它的子接口ReactiveMongoRepository

    我们增加UserRepository

        public interface UserRepository extends ReactiveCrudRepository<User, String> {  // 1
            Mono<User> findByUsername(String username);     // 2
            Mono<Long> deleteByUsername(String username);
        }
    
    1. 同样的,ReactiveCrudRepository的泛型分别是UserID的类型;
    2. ReactiveCrudRepository已经提供了基本的增删改查的方法,根据业务需要,我们增加四个方法(在此膜拜一下Spring团队的牛人们,使得我们仅需按照规则定义接口方法名即可完成DAO层逻辑的开发,牛~)

    5)Service层

    由于业务逻辑几乎为零,只是简单调用了DAO层,直接贴代码:

        @Service
        public class UserService {
            @Autowired
            private UserRepository userRepository;
        
            /**
             * 保存或更新。
             * 如果传入的user没有id属性,由于username是unique的,在重复的情况下有可能报错,
             * 这时找到以保存的user记录用传入的user更新它。
             */
            public Mono<User> save(User user) {
                return userRepository.save(user)
                        .onErrorResume(e ->     // 1
                                userRepository.findByUsername(user.getUsername())   // 2
                                        .flatMap(originalUser -> {      // 4
                                            user.setId(originalUser.getId());
                                            return userRepository.save(user);   // 3
                                        }));
            }
        
            public Mono<Long> deleteByUsername(String username) {
                return userRepository.deleteByUsername(username);
            }
        
            public Mono<User> findByUsername(String username) {
                return userRepository.findByUsername(username);
            }
            
            public Flux<User> findAll() {
                return userRepository.findAll();
            }
        }
    
    1. onErrorResume进行错误处理;
    2. 找到username重复的记录;
    3. 拿到ID从而进行更新而不是创建;
    4. 由于函数式为User -> Publisher,所以用flatMap

    6)Controller层

    直接贴代码:

        @RestController
        @RequestMapping("/user")
        public class UserController {
            @Autowired
            private UserService userService;
        
            @PostMapping("")
            public Mono<User> save(User user) {
                return this.userService.save(user);
            }
        
            @DeleteMapping("/{username}")
            public Mono<Long> deleteByUsername(@PathVariable String username) {
                return this.userService.deleteByUsername(username);
            }
        
            @GetMapping("/{username}")
            public Mono<User> findByUsername(@PathVariable String username) {
                return this.userService.findByUsername(username);
            }
        
            @GetMapping("")
            public Flux<User> findAll() {
                return this.userService.findAll();
            }
        }
    

    7)启动应用测试一下

    由于涉及到POST和DELETE方法的请求,建议用支持RESTful的client来测试,比如“Restlet client”:

    如图,增加操作是成功的,只要username不变,再次发送请求会更新该记录。

    图中birthday的时间差8小时,不去管它。

    用同样的方法增加一个李四,之后我们再来测试一下查询。

    1. 根据用户名查询(METHOD:GET URL:http://localhost:8080/user/zhangsan),下边输出是格式化的JSON:

      {
      “id”: “5a9504a167646d057051e229”,
      “username”: “zhangsan”,
      “name”: “张三”,
      “phone”: “18610861861”,
      “birthday”: “1989-12-31T16:00:00.000+0000”
      }

    2. 查询全部(METHOD:GET URL:http://localhost:8080/user)

      [{“id”:“5a9504a167646d057051e229”,“username”:“zhangsan”,“name”:“张三”,“phone”:“18610861861”,“birthday”:“1989-12-31T16:00:00.000+0000”},{“id”:“5a9511db67646d3c782f2e7f”,“username”:“lisi”,“name”:“李四”,“phone”:“18610861862”,“birthday”:“1992-02-01T16:00:00.000+0000”}]

    测试一下删除(METHOD:DELETE URL:http://localhost:8080/user/zhangsan),返回值为1,再查询全部,发现张三已经被删除了,OK。

    8)stream+json

    看到这里细心的朋友可能会有点嘀咕,怎么看是不是异步的呢?毕竟查询全部的时候,结果都用中括号括起来了,这和原来返回List<User>的效果似乎没多大区别。假设一下查询100个数据,如果是异步的话,以我们对“异步响应式流”的印象似乎应该是一个一个至少是一批一批的到达客户端的嘛。我们加个延迟验证一下:

    	@GetMapping("")
    	public Flux<User> findAll() {
    	    return this.userService.findAll().delayElements(Duration.ofSeconds(1));
    	}
    

    每个元素都延迟1秒,现在我们在数据库里弄三条记录,然后请求查询全部的那个URL,发现并不是像/times一样一秒一个地出来,而是3秒之后一块儿出来的。果然如此,这一点都不响应式啊!

    /times类似,我们也加一个MediaType,不过由于这里返回的是JSON,因此不能使用TEXT_EVENT_STREAM,而是使用APPLICATION_STREAM_JSON,即application/stream+json格式。

    @GetMapping(value = "", produces = MediaType.APPLICATION_STREAM_JSON_VALUE)
    public Flux<User> findAll() {
        return this.userService.findAll().delayElements(Duration.ofSeconds(2));
    }
    
    1. produces后边的值应该是application/stream+json字符串,因此用APPLICATION_STREAM_JSON_VALUE

    重启服务再次请求,发现三个user是一秒一个的速度出来的,中括号也没有了,而是一个一个独立的JSON值构成的json stream:

    {"id":"5a9504a167646d057051e229","username":"zhangsan","name":"张三","phone":"18610861861","birthday":"1989-12-31T16:00:00.000+0000"}
    {"id":"5a9511db67646d3c782f2e7f","username":"lisi","name":"李四","phone":"18610861862","birthday":"1992-02-01T16:00:00.000+0000"}
    {"id":"5a955f08fa10b93ec48df37f","username":"wangwu","name":"王五","phone":"18610861865","birthday":"1995-05-04T16:00:00.000+0000"}
    

    9)总结

    如果有Spring Data开发经验的话,切换到Spring Data Reactive的难度并不高。跟Spring WebFlux类似:原来返回User的话,那现在就返回Mono<User>;原来返回List<User>的话,那现在就返回Flux<User>

    对于稍微复杂的业务逻辑或一些必要的异常处理,比如上边的save方法,请一定采用响应式的编程方式来定义,从而一切都是异步非阻塞的。如下图所示,从HttpServer(如Netty或Servlet3.1以上的Servlet容器)到ServerAdapter(Spring WebFlux框架提供的针对不同server的适配器),到我们编写的Controller和DAO,以及异步数据库驱动,构成了一个完整的异步非阻塞的管道,里边流动的就是响应式流。

    1.3.3.4 使用WebClient开发响应式Http客户端

    下面,我们用WebClient测试一下前边几个例子的成果。

    1) /hello,返回Mono

        @Test
        public void webClientTest1() throws InterruptedException {
            WebClient webClient = WebClient.create("http://localhost:8080");   // 1
            Mono<String> resp = webClient
                    .get().uri("/hello") // 2
                    .retrieve() // 3
                    .bodyToMono(String.class);  // 4
            resp.subscribe(System.out::println);    // 5
            TimeUnit.SECONDS.sleep(1);  // 6
        }
    
    1. 创建WebClient对象并指定baseUrl;
    2. HTTP GET;
    3. 异步地获取response信息;
    4. 将response body解析为字符串;
    5. 打印出来;
    6. 由于是异步的,我们将测试线程sleep 1秒确保拿到response,也可以像前边的例子一样用CountDownLatch

    运行效果如下:

    2) /user,返回Flux

    为了多演示一些不同的实现方式,下边的例子我们调整几个地方,但是效果跟上边是一样的:

        @Test
        public void webClientTest2() throws InterruptedException {
            WebClient webClient = WebClient.builder().baseUrl("http://localhost:8080").build(); // 1
            webClient
                    .get().uri("/user")
                    .accept(MediaType.APPLICATION_STREAM_JSON) // 2
                    .exchange() // 3
                    .flatMapMany(response -> response.bodyToFlux(User.class))   // 4
                    .doOnNext(System.out::println)  // 5
                    .blockLast();   // 6
        }
    
    1. 这次我们使用WebClientBuilder来构建WebClient对象;
    2. 配置请求Header:Content-Type: application/stream+json
    3. 获取response信息,返回值为ClientResponseretrive()可以看做是exchange()方法的“快捷版”;
    4. 使用flatMap来将ClientResponse映射为Flux;
    5. 只读地peek每个元素,然后打印出来,它并不是subscribe,所以不会触发流;
    6. 上个例子中sleep的方式有点low,blockLast方法,顾名思义,在收到最后一个元素前会阻塞,响应式业务场景中慎用。

    运行效果如下:
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dnZqusDX-1615630172707)(https://leanote.com/api/file/getImage?fileId=5a9570d6ab64415d3400b4f0)]

    3) /times,服务端推送

        @Test
        public void webClientTest3() throws InterruptedException {
            WebClient webClient = WebClient.create("http://localhost:8080");
            webClient
                    .get().uri("/times")
                    .accept(MediaType.TEXT_EVENT_STREAM)    // 1
                    .retrieve()
                    .bodyToFlux(String.class)
                    .log()  // 2
                    .take(10)   // 3
                    .blockLast();
        }
    
    1. 配置请求Header:Content-Type: text/event-stream,即SSE;
    2. 这次用log()代替doOnNext(System.out::println)来查看每个元素;
    3. 由于/times是一个无限流,这里取前10个,会导致流被取消

    运行效果如下:

    1.3.3.5 让数据在Http上双向无限流动起来

    许多朋友看到这个题目会想到Websocket,的确,Websocket确实可以实现全双工通信,但它的数据传输并非是完全基于HTTP协议的,关于Websocket我们后边再聊。

    下面我们实现一个这样两个Endpoint:

    • POST方法的/events,“源源不断”地收集数据,并存入数据库;
    • GET方法的/events,“源源不断”将数据库中的记录发出来。

    0)准备

    一、数据模型MyEvent

        @Data
        @AllArgsConstructor
        @NoArgsConstructor
        @Document(collection = "event") // 1
        public class MyEvent {
            @Id
            private Long id;    // 2
            private String message;
        }
    
    1. 指定collection名为event
    2. 这次我们使用表示时间的long型数据作为ID。

    二、DAO层:

        public interface MyEventRepository extends ReactiveMongoRepository<MyEvent, Long> { // 1
        }
    
    1. 下边用到了可以保存Flux的insert(Flux)方法,这个方法是在ReactiveMongoRepository中定义的。

    三、简单起见就不要Service层了,直接Controller:

        @RestController
        @RequestMapping("/events")
        public class MyEventController {
            @Autowired
            private MyEventRepository myEventRepository;
        
            @PostMapping(path = "")
            public Mono<Void> loadEvents(@RequestBody Flux<MyEvent> events) {   // 1
                // TODO
                return null;
            }
        
            @GetMapping(path = "", produces = MediaType.APPLICATION_STREAM_JSON_VALUE)
            public Flux<MyEvent> getEvents() {  // 2
                // TODO
                return null;
            }
        }
    
    1. POST方法的接收数据流的Endpoint,所以传入的参数是一个Flux,返回结果其实就看需要了,我们用一个Mono<Void>作为方法返回值,表示如果传输完的话只给一个“完成信号”就OK了;
    2. GET方法的无限发出数据流的Endpoint,所以返回结果是一个Flux<MyEvent>,不要忘了注解上produces = MediaType.APPLICATION_STREAM_JSON_VALUE

    准备到此为止,类如下。我们来完成上边的两个TODO吧。

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    1)接收数据流的Endpoint

    在客户端,WebClient可以接收text/event-streamapplication/stream+json格式的数据流,也可以在请求的时候上传一个数据流到服务器;
    在服务端,WebFlux也支持接收一个数据流作为请求参数,从而实现一个接收数据流的Endpoint。

    我们先看服务端。Controller中的loadEvents方法:

        @PostMapping(path = "", consumes = MediaType.APPLICATION_STREAM_JSON_VALUE) // 1
        public Mono<Void> loadEvents(@RequestBody Flux<MyEvent> events) {
            return this.myEventRepository.insert(events).then();    // 2
        }
    
    1. 指定传入的数据是application/stream+json,与getEvents方法的区别在于这个方法是consume这个数据流;
    2. insert返回的是保存成功的记录的Flux,但我们不需要,使用then方法表示“忽略数据元素,只返回一个完成信号”。

    服务端写好后,启动之,再看一下客户端怎么写(还是放在src/test下):

        @Test
        public void webClientTest4() {
            Flux<MyEvent> eventFlux = Flux.interval(Duration.ofSeconds(1))
                    .map(l -> new MyEvent(System.currentTimeMillis(), "message-" + l)).take(5); // 1
            WebClient webClient = WebClient.create("http://localhost:8080");
            webClient
                    .post().uri("/events")
                    .contentType(MediaType.APPLICATION_STREAM_JSON) // 2
                    .body(eventFlux, MyEvent.class) // 3
                    .retrieve()
                    .bodyToMono(Void.class)
                    .block();
        }
    
    1. 声明速度为每秒一个MyEvent元素的数据流,不加take的话表示无限个元素的数据流;
    2. 声明请求体的数据格式为application/stream+json
    3. body方法设置请求体的数据。

    运行一下这个测试,根据控制台数据可以看到是一条一条将数据发到/events的,看一下MongoDB中的数据:

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    2)发出无限流的Endpoint

    回想一下前边/user的例子,当数据库中所有的内容都查询出来之后,这个流就结束了,因为其后跟了一个“完成信号”,我们可以通过在UserServicefindAll()方法的流上增加log()操作符来观察更详细的日志:

    我们可以看到在三个onNext信号后是一个onComplete信号。

    这样的流是有限流,这个时候如果在数据库中再新增一个User的话,已经结束的请求也不会再有新的内容出现了。

    反观/times请求,它会无限地发出SSE,而不会有“完成信号”出现,这是无限流。

    我们希望的情况是无论是请求GET的/events之后,当所有数据都发完之后,不要结束,而是挂起等待新的数据。如果我们用上边的POST的/events传入新的数据到数据库后,新的数据会自动地流到客户端。

    这可以在DAO层配置实现:

        public interface MyEventRepository extends ReactiveMongoRepository<MyEvent, Long> {
            @Tailable   // 1
            Flux<MyEvent> findBy(); // 2
        }
    
    1. @Tailable注解的作用类似于linux的tail命令,被注解的方法将发送无限流,需要注解在返回值为Flux这样的多个元素的Publisher的方法上;
    2. findAll()是想要的方法,但是在ReactiveMongoRepository中我们够不着,所以使用findBy()代替。

    然后完成Controller中的方法:

        @GetMapping(path = "", produces = MediaType.APPLICATION_STREAM_JSON_VALUE)
        public Flux<MyEvent> getEvents() {
            return this.myEventRepository.findBy();
        }
    

    不过,这还不够,@Tailable仅支持有大小限制的(“capped”)collection,而自动创建的collection是不限制大小的,因此我们需要先手动创建。Spring Boot提供的CommandLineRunner可以帮助我们实现这一点。

    Spring Boot应用程序在启动后,会遍历CommandLineRunner接口的实例并运行它们的run方法。

        @Bean   // 1
        public CommandLineRunner initData(MongoOperations mongo) {  // 2
            return (String... args) -> {    // 3
                mongo.dropCollection(MyEvent.class);    // 4
                mongo.createCollection(MyEvent.class, CollectionOptions.empty().size(200).capped()); // 5
            };
        }
    
    1. 对于复杂的Bean只能通过Java Config的方式配置,这也是为什么Spring3之后官方推荐这种配置方式的原因,这段代码可以放到配置类中,本例我们就直接放到启动类WebFluxDemoApplication了;
    2. MongoOperations提供对MongoDB的操作方法,由Spring注入的mongo实例已经配置好,直接使用即可;
    3. CommandLineRunner也是一个函数式接口,其实例可以用lambda表达;
    4. 如果有,先删除collection,生产环境慎用这种操作;
    5. 创建一个记录个数为10的capped的collection,容量满了之后,新增的记录会覆盖最旧的。

    启动应用,我们检查一下event collection:

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    OK,这个时候我们请求一下http://localhost:8080/events,发现立马返回了,并没有挂起。原因在于collection中一条记录都没有,而@Tailable起作用的前提是至少有一条记录。

    跑一下WebClient测试程序插入5条数据,然后再次请求:

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldF9zZXQ=,size_16,color_FFFFFF,t_70

    请求是挂起的,这没错,但是只有两条数据,看WebClient测试程序的控制台明明发出了5个请求啊。

    原因定义的CollectionOptions.empty().size(200).capped()中,size指的是以字节为单位的大小,并且会向上取到256的整倍数,所以我们刚才定义的是256byte大小的collection,所以最多容纳两条记录。我们可以这样改一下:

    CollectionOptions.empty().maxDocuments(200).size(100000).capped()
    

    maxDocuments限制了记录条数,size限制容量且是必须定义的,因为MongoDB不像关系型数据库有严格的列和字段大小定义,鬼知道会存多大的数据进来,所以容量限制是必要的。

    好了,再次启动应用,先插入5条数据,然后请求/events,收到5条记录后请求仍然挂起,在插入5条数据,curl客户端又会陆续收到新的数据。

    我们用代码搭建了图中箭头所表示的“管道”,看效果还是很畅通的嘛。现在再回想我们最初的那个Excel的例子,是不是感觉这个demo很有响应式的“范儿”了呢?

    1.3.3.6 总结

    这一节,我们对WebFlux做了一个简单的基于实例的介绍,相信你对响应式编程及其在WEB应用中如何发挥作用有了更多的体会,本章的实战是比较基础的,初衷是希望能够通过上手编写代码体会响应式编程的感觉,因为切换到响应式思维方式并非易事。

    这一章的核心关键词其实翻来覆去就是:“异步非阻塞的响应式流”。我们了解了异步非阻塞的好处,也知道如何让数据流动起来,下面我们就通过对实例的性能测试,借助实实在在的数据,真切感受一下异步非阻塞的“丝滑”。

    展开全文
  • 下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col> <el-col :xs="0...

    如下布局,如果将:sm="0"则会导致456始终不显示
    下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug

    <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col>
    <el-col :xs="0" :sm="0"  :md="7" :lg="5" :xl="4" >456</el-col>
    

    完整得例子

    新建一个demo.html文件内容如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试页面</title>
        <!-- cdn引入ElementUI样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .myclass1 {
                height: 200px;
                background-color: slategray;
            }
    
            .myclass2 {
                height: 200px;
                background-color: #867090;
            }
        </style>
    
    </head>
    <body>
    <div id="app">
        <el-row>
            <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col>
            <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" >456</el-col>
        </el-row>
    
    </div>
    
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- cdn引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        const vm = new Vue({ // 配置对象 options
            // 配置选项(option)
            el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
            data: {
                screenWidth: 992
            },
        })
    </script>
    </body>
    </html>
    
    

    会发现456不会显示,虽然宽度有了但是内容456却不显示
    在这里插入图片描述

    将sm得值设置非0则正常,但是屏幕宽度为sm时会导致456被挤下去如下在这里插入图片描述

    解决方法,通过vue得v-if或者v-show

    首先、将sm不要设置为0,例如设置为1
    其次、为了解决这个sm=1的问题,通过js获取屏幕宽度,当屏幕<992时就不显示即可

    当屏幕小于992px时将其隐藏掉

    <el-row>
        <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col>
        <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" 
        	class="myclass2" v-show="screenWidth >= 992">456</el-col>
    </el-row>
    

    以及通过vue获取屏幕宽度

    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
            screenWidth: 992
        },
        mounted(){
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        }
    })
    

    效果
    在这里插入图片描述

    展开全文
  • (1)什么是响应式编程——响应式Spring的道法术器

    万次阅读 多人点赞 2018-03-06 10:54:22
    本系列其他文章见:《响应式Spring的道法术器》。 响应式编程之道 1.1 什么是响应式编程? 在开始讨论响应式编程(Reactive Programming)之前,先来看一个我们经常使用的一款堪称“响应式典范”的强大的生产...

    本系列其他文章见:《响应式Spring的道法术器》

    响应式编程之道

    1.1 什么是响应式编程?

    在开始讨论响应式编程(Reactive Programming)之前,先来看一个我们经常使用的一款堪称“响应式典范”的强大的生产力工具——电子表格。

    举个简单的例子,某电商网站正在搞促销活动,任何单品都可以参加“满199减40”的活动,而且“满500包邮”。吃货小明有选择障碍(当然主要原因还是一个字:穷),他有个习惯,就是先在Excel上根据预算算好自己要买的东西:

    RX9VjUmQltKah38.jpg

    相信大家都用过Excel中的公式,这是一个统计购物车商品和订单应付金额的表格,其中涉及到一些公式:

    q4p6hzMXQfYPurA.jpg

    上图中蓝色的线是公式的引用关系,从中可以看出,“商品金额”是通过“单价x数量”得到的,“满199减40”会判断该商品金额是否满199并根据情况减掉40,右侧“订单总金额”是“满199减40”这一列的和,“邮费”会根据订单总金额计算,“最终应付款”就是订单总金额加上邮费。

    1.1.1 变化传递(propagation of change)

    为什么说电子表格软件是“响应式典范”呢,因为“单价”和“数量”的任何变动,都会被引用(“监听”)它的单元格实时更新计算结果,如果还有图表或数据透视图引用了这块数据,那么也会相应变化,做到了实时响应。变化的时候甚至还有动画效果,用户体验一级棒!

    这是响应式的核心特点之一:变化传递(propagation of change)。一个单元格变化之后,会像多米诺骨牌一样,导致直接和间接引用它的其他单元格均发生相应变化。

    Ex2SfmLoNg7TOuw.jpg

    看到这里,你可能会说,“切~ 不就是算付款金额吗,购物网站上都有这个最基础不过的功能啊”,这就“响应式”啦?但凡一个与用户交互的系统都得“响应”用户交互啊

    但是在响应式编程中,基于“变化传递”的特点,触发响应的主体发生了变化。假设购物车管理和订单付款是两个不同的模块,或者至少是两个不同的类——CartInvoice。也许我们的代码是这样的:

    Product.java(假设商品有两个属性nameprice,简单起见,price就不用BigDecimal类型了)

    public class Product {
        private String name;
        private double price;
        // 构造方法、getters、setters
    }
    

    Cart模块中:

    import com.example.Invoice; // 2
    
    public class Cart {
        ...
        public boolean addProduct(Product product, int quantity) {
            ...
            double figure = product.getPrice() * quantity;
            invoice.update(figure); // 1
            ...
        }
        ...
    }
    
    1. 是由Cart的对象去调用Invoice对象的更新订单金额的方法;
    2. Cart的代码中需要import Invoice

    而我们再观察这个Excel,发现“订单总金额”的计算公式不仅位于自己的单元格中,而且这个公式能主动监听和响应购物车数据的变化事件。对于购物车来说,它没有对订单付款方面的任何公式引用。感觉就像这样:

    假设数据流有操作的商品product和变化个数quantity两个属性:

    public class CartEvent {
        private Product product;
        private int quantity;
        // 构造方法、getters、setters
    }
    

    Invoice模块中:

    import com.example.Cart // 2
    
    public class Invoice {
        ...
        public Invoice(Cart cart) {
            ...
            this.listenOn(cart);    // 1
            ...
        }
        // 回调方法
        public void onCartChange(CartEvent event) {
            ...
        }
        ...
    }
    
    1. 是由Invoice的对象在初始化的时候就声明了对Cart对象的监听,从而一旦Cart对象有响应的事件(比如添加商品)发生的时候,Invoice就会响应;
    2. Invoice的代码中import Cart

    做过Java桌面开发的朋友可能会想到Java swing中的各种监听器,比如MouseListener能够监听鼠标的操作,并实时做出响应。所以C/S的客户端总是比B/S的Web界面更具有响应性嘛。

    所以,这里我们说的是一种生产者只负责生成并发出数据/事件,消费者来监听并负责定义如何处理数据/事件的变化传递方式

    那么,Cart对象如何在发生变化的时候“发出”数据或事件呢?

    1.1.2 数据流(data stream)

    这些数据/事件在响应式编程里会以数据流的形式发出。

    我们再观察一下购物车,这里有若干商品,小明每次往购物车里添加或移除一种商品,或调整商品的购买数量,这种事件都会像过电一样流过这由公式串起来的多米诺骨牌一次。这一次一次的操作事件连起来就是一串数据流(data stream),如果我们能够及时对数据流的每一个事件做出响应,会有效提高系统的响应水平。这是响应式的另一个核心特点:基于数据流(data stream)

    如下图是小明选购商品的过程,为了既不超预算,又能省邮费,有时加有时减:

    这一次一次的操作就构成了一串数据流。Invoice模块中的代码可能是这样:

        public Invoice(Cart cart) {
            ...
            this.listenOn(cart.eventStream());  // 1
            ...
        }
    
    1. 其中,cart.eventStream()是要监听的购物车的操作事件数据流,listenOn方法能够对数据流中到来的元素依次进行处理。

    1.1.3 声明式(declarative)

    我们再到listenOn方法去看一下:

    Invoice模块中,上边的一串公式被组装成如下的伪代码:

        public void listenOn(DataStream<CartEvent> cartEventStream) {   // 1
            double sum = 0;
            double total = cartEventStream
                // 分别计算商品金额
                .map(cartEvent -> cartEvent.getProduct().getPrice() * cartEvent.getQuantity())  // 2
                // 计算满减后的商品金额
                .map(v -> (v > 199) ? (v - 40) : v)
                // 将金额的变化累加到sum
                .map(v -> {sum += v; return sum;})
                // 根据sum判断是否免邮,得到最终总付款金额
                .map(sum -> (sum > 500) ? sum : (sum + 50));
            ...
    
    1. cartEventStream是数据流,DataStream是某种数据流类型,可以暂时想象成类似在Java 8版本增加的对数据流进行处理的Stream API(下节会说到为啥不用Java Stream)。

    2. map方法用于对数据流中的元素进行映射,比如第一个将cartEvent中的商品价格和数量拿到,然后算出本次操作的金额;第二个判断是否能享受“满199减40”的活动。

    这里的伪代码用到了lambda,它非常适用于数据流的处理。没有接触过lambda的话没有关系,我们后续会再聊到它。

    这是一种**“声明式(declarative)”**的编程范式。通过四个串起来的map调用,我们先声明好了对于数据流“将会”进行什么样的处理,当有数据流过来时,就会按照声明好的处理流程逐个进行处理。

    比如对于第一个map操作:

    olW5mzADdxHt6nS.jpg

    **声明式编程范式的威力在于以不变应万变。**无论到来的元素是什么,计算逻辑是不变的,从而形成了一种对计算逻辑的“绑定”。

    再举个简单的例子方便理解:

    a = 1;
    b = a + 1;
    a = 2;
    

    这个时候,b是多少呢?在Java以及多数语言中,b的结果是2,第二次对a的赋值并不会影响b的值。

    假设Java引入了一种新的赋值方式:=,表示一种对a的绑定关系,如

    a = 1;
    b := a + 1;
    a = 2;
    

    由于b保存的不是某次计算的值,而是针对a的一种绑定关系,所以b能够随时根据a的值的变化而变化,这时候b==3,我们就可以说:=是一种声明式赋值方式。而普通的=是一种命令式赋值方式。事实上,我们绝大多数的开发都是命令式的,如果需要用命令式编程表达类似上边的这种绑定关系,在每次a发生变化并需要拿到b的时候都得执行b = a + 1来更新b的值。

    如此想来,“绑定美元政策”不也是一种声明式的范式吗~

    总结来说,命令式是面向过程的,声明式是面向结构的

    不过命令式和声明式本身并无高低之分,只是声明式比较适合基于流的处理方式。这是响应式的第三个核心特点:声明式(declarative)。结合“变化传递”的特点,声明式能够让基于数据流的开发更加友好。

    1.1.4 总结

    总结起来,响应式编程(reactive programming)是一种基于数据流(data stream)和变化传递(propagation of change)的声明式(declarative)的编程范式。

    响应式编程的“变化传递”就相当于果汁流水线的管道;在入口放进橙子,出来的就是橙汁;放西瓜,出来的就是西瓜汁,橙子和西瓜、以及机器中的果肉果汁以及残渣等,都是流动的“数据流”;管道的图纸是用“声明式”的语言表示的。

    这种编程范式如何让Web应用更加“reactive”呢?

    我们设想这样一种场景,我们从底层数据库驱动,经过持久层、服务层、MVC层中的model,到用户的前端界面的元素,全部都采用声明式的编程范式,从而搭建一条能够传递变化的管道,这样我们只要更新一下数据库中的数据,用户的界面上就相应的发生变化,岂不美哉?尤其重要的是,一处发生变化,我们不需要各种命令式的调用来传递这种变化,而是由搭建好的“流水线”自动传递。

    这种场景用在哪呢?比如一个日志监控系统,我们的前端页面将不再需要通过“命令式”的轮询的方式不断向服务器请求数据然后进行更新,而是在建立好通道之后,数据流从系统源源不断流向页面,从而展现实时的指标变化曲线;再比如一个社交平台,朋友的动态、点赞和留言不是手动刷出来的,而是当后台数据变化的时候自动体现到界面上的。

    具体如何来实现呢,请看下一节关于响应式流的介绍。

    展开全文
  • 本系列其他文章见:《响应式Spring的道法术器》。 前情提要:响应式编程 | 响应式流 1.5 响应式系统 1.5.1 响应式宣言 关注“响应式”的朋友不难搜索到关于“响应式宣言”的介绍,先上图: 这张图凝聚...

    本系列其他文章见:《响应式Spring的道法术器》
    前情提要:响应式编程 | 响应式流

    1.5 响应式系统

    1.5.1 响应式宣言

    关注“响应式”的朋友不难搜索到关于“响应式宣言”的介绍,先上图:

    这张图凝聚了许多大神的智慧和经验,见官网中文版官网,如果你认可这个宣言的内容,还可以签下你的大名。虽然这些内容多概念而少实战,让人感觉是看教科书,但是字字千金,不时看一看都会有新的体会和收获。

    这也是新时代男朋友的行为准则:

    • Responsive,要及时响应,24小时在线,不准不接电话,微信回复时间要在5分钟以内;
    • 如何做到Responsive呢,首先要Resilient,就是无论如何要有回应。即使在玩LOL,也要接电话,哪怕正在联合国演讲,那么也要设置好“对不起宝贝儿,稍后打给你么么哒~”的自动回复;
    • 做到Responsive的另一点是Elastic,要弹性应对大量命令的到来。当奉天承运的圣旨过多时完不成怎么办?对不起,不存在的,如果学不会三头六臂,那就拉几个好友帮忙;
    • 圣旨是通过异步方式传递的(Message Driven),给花店打电话订花、到蛋糕店订蛋糕等,别忘了购物车里的“消息队列”要及时处理喽~ 这些订单都是具有一定格式和目的地的消息,然后异步等待快递上门。

    以响应式系统方式构建的系统更加灵活,松耦合和可扩展。这使得它们更容易开发,而且更加拥抱变化。及时地响应,以保证良好的用户体验。系统错误和异常在所难免,当异常出现时,要优雅地处理之,不要任其蔓延、甚至到达用户眼前。

    关于宣言的具体内容官网上很详细,就不多赘述了。

    从落地方面,我们不难想到一些具体技术来支撑响应式宣言的目标:

    • 比如如今比较火热的云原生和DevOps的理念与实践,以及更早一些的自动化运维,都有助于让系统更加Elastic,不过系统架构的微服务化也是功不可没;
    • 类似于Hystrix的熔断器(Circuit Breaker)使得系统更加Resilient,因为它能够及时将服务异常遏制在可控范围内,避免雪崩;而类似kubernetes的云原生应用能够及时发现和重建系统中的异常服务;
    • 而类似RabbitMQ、ActiveMQ这样的消息队列产品有助于构建消息驱动的系统,并发挥解耦、提速、广播、削峰的作用;
    • 消息驱动有利于系统的弹性和可靠性,弹性和可靠性又使得系统的响应更加及时;
    • 等等。

    1.5.2 响应式编程与响应式系统

    响应式宣言是一组架构与设计原则,符合这些原则的系统可以认为是响应式的系统。而响应式系统与响应式编程是不同层面的内容。

    看到网上有些文章在介绍RxJava、Reactor等响应式编程技术的时候,会用响应式宣言来引出话题,稍微有点驴唇对马嘴的感觉(_)。响应式系统(或响应式宣言)与响应式编程又是一对容易被揉在一起用的两个术语(上一对容易被混用的术语是“响应式编程RP”和“函数响应式编程FRP”,见1.3.1 lambda与函数式),它们从关系上看虽然不如“雷锋”和“雷峰塔”、Java和JavaScript那么远,但并不存在必然的因果关系。

    作为《响应式宣言》的作者,Jonas Bonér和Viktor Klang解释了响应式编程与响应式系统的区别与联系(“Linux中国”上有翻译版),其中也有对响应式宣言四个原则的解读,值得学习。我从中总结了一些二者的不同点:

    1)战术与战略的区别

    响应式编程是异步编程下的一个子集,是一种范式,有具体的开发库,侧重于由信息/数据流而不是命令式的控制流来推动逻辑的前进。

    响应式宣言是一组设计原则,一种关于分布式环境下系统架构与设计的思考方式,响应式系统是符合这一架构风格的系统。

    2)事件驱动与消息驱动的区别

    响应式编程——专注于短时间的数据流链条上的计算——因此倾向于事件驱动;而响应式系统——关注于通过分布式系统的通信和协作所得到的弹性和可靠性——则是消息驱动的。

    响应式宣言中从定义上阐述了消息驱动与事件驱动的不同

    一条消息就是一则被送往一个明确目的地的数据。一个事件则是达到某个给定状态的组件发出的一个信号。在一个消息驱动系统中,可寻址到的接收者等待消息的到来然后响应它,否则保持休眠状态。在一个事件驱动系统中,通知的监听者被绑定到消息源上,这样当消息被发出时它就会被调用。这意味着一个事件驱动系统专注于可寻址的事件源而消息驱动系统专注于可寻址的接收者。

    3)组件范围与系统范围的区别

    响应式编程的“活动范围”是在组件内的,是一种管理组件或服务内部逻辑和数据流的技术,即使像1.4.2节中那样数据流从服务B向服务A的流动,也并非跨服务的消息传递,只是基于API的调用而已。

    响应式系统,强调组件/服务间的信息交流,并通过响应式宣言提供了一种处理分布式系统弹性与可靠性的原则,因此是面向分布式的系统范围的。

    4)空间解耦能力的区别

    正如前边介绍到的异步调用方式那样,事件驱动的响应式编程侧重于时间上的解耦,从而在技术层面提供了一种更高性能的并发方式。然而其范围限定了它不易于实现空间上的解耦。

    消息驱动的异步性使得响应式系统既能够在时间上解耦,还具有空间的解耦能力。服务间不仅可以通过消息队列实现分布式协作,还可以根据负载实现单个服务的弹性伸缩,从而实现响应式宣言中Elastic的能力。

    5)总结

    响应式编程技术通常用于在单个节点或服务中对数据流进行异步非阻塞的处理。当有多个结点时,就需要认真考量数据一致性(data consistency)、跨结点沟通(cross-node communication)、协调(coordination)、版本控制(versioning)、编排(orchestration)、错误管理(failure management)、关注与责任(concerns and responsibilities)分离等等的内容——这些都是响应式系统架构要考虑的内容。

    类似的,Spring WebFlux是一种响应式编程框架,用于开发响应式应用,而Spring Cloud不仅是更是一套适应于当今云原生环境下微服务架构基础,更加接近响应式宣言的目标和响应式系统的设计原则。

    不过也应该看到,也正是由于响应式宣言中对现代系统的Responsive、Resilient、Elastic和Message Driven的要求,使得对响应式编程技术的呼声越来越高,显然响应式编程技术是构建响应式系统的合适工具之一。尤其是随着面向响应式宣言的**响应式流规范(Reactive Streams Specification)**这一顶层设计的提出,类似Reactor、RxJava、Vert.x、Spring WebFlux等的响应式编程技术在响应式系统中必将发挥越来越大的作用。

    关于响应式系统的话题比较大,涉及到许多的理念、技术。本系列的文章仍主要聚焦于响应式编程的范畴,并在最后讨论响应式编程在Spring Cloud中的应用。

    展开全文
  • (2)响应式流——响应式Spring的道法术器

    万次阅读 多人点赞 2018-03-07 09:21:32
    本系列其他文章见:《响应式Spring的道法术器》。 前情提要: 什么是响应式编程 1.2 响应式流 上一节留了一个坑——为啥不用Java Stream来进行数据流的操作? 原因在于,若将其用于响应式编程中,是有局限性...
  • 命令式编程与响应式编程 消息驱动 观察者模式 Tomcat的NIO异步网络io 服务器推技术 Servlet3.0与3.1 本节内容 响应式系统主流框架概览 akka 使用Scala语言开发,后期支持Java,但是在Java社区并不如从前受欢迎 ...
  • web响应式页面

    万次阅读 2021-02-09 13:28:23
    注:在本文用到的代码是参考github ...响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。 2、 响应式优缺点 响应式布局的优点
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  • 响应式Spring的道法术器(Spring WebFlux 教程)

    万次阅读 多人点赞 2018-03-07 09:38:37
    Spring 5 之使用Spring WebFlux开发响应式应用。 lambda与函数式(15min) Reactor 3 响应式编程库(60min) Spring Webflux和Spring Data Reactive开发响应式应用(45min) 通过以上内容相信可以对Spring 5.0 ...
  • WEB响应式布局实战项目

    千人学习 2018-12-14 15:34:56
    1.前端WEB响应式布局实战-搭建项目 2.前端WEB响应式布局实战-响应式头部 3.端WEB响应式布局实战-banner&footer 4.端WEB响应式布局实战-service部分 5.前端WEB响应式布局实战-team部分 8.前端WEB响应式布局实战-...
  • (4)Reactor 3快速上手——响应式Spring的道法术器

    万次阅读 多人点赞 2018-03-08 09:54:18
    本系列其他文章见:《响应式Spring的道法术器》。 前情提要:响应式流 | lambda与函数式 1.3.2 Reactor Reactor与Spring是兄弟项目,侧重于Server端的响应式编程,主要 artifact 是 reactor-core,这是一个...
  • html响应式布局,css响应式布局,响应式布局入门

    千次阅读 多人点赞 2016-07-25 15:43:49
    html响应式布局,css响应式布局,响应式布局入门   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&...
  • (3)lambda与函数式——响应式Spring的道法术器

    万次阅读 多人点赞 2018-03-08 09:51:37
    本系列其他文章见:《响应式Spring的道法术器》。 前情提要:响应式编程 | 响应式流 1.3 Hello,reactive world 前面两篇文章介绍了响应式编程和响应式流的特性,一味讲概念终是枯燥,还是上手敲一敲代码实在...
  • 响应式编程:理解响应式编程

    千次阅读 2016-02-23 14:40:26
    了解响应式编程
  • 第一:正确理解响应式布局 第二:响应式设计基本步骤 第三:响应式设计注意事项 第四:响应式布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端都做一个...
  • 响应式布局

    千次阅读 2015-03-20 10:01:37
    相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应...
  • 深入响应式原理 数据响应式、双向绑定、数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作,提高开发效率 双向绑定 数据改变,视图改变...
  • JetLinks物联网基础平台-响应式

    千次阅读 多人点赞 2020-04-01 09:41:07
    响应式 JetLinks使用reactor作为响应式编程框架,从网络层(webflux,vert.x)到持久层(r2dbc,elastic)全部 封装为非阻塞,响应式调用. 响应式可以理解为观察者模式,通过订阅和发布数据流中的数据对数据进行处理. reactor...
  • 响应式 Web

    2016-06-30 14:28:16
    针对响应式图片、响应式表格、响应式视频方案也将逐一介绍,探讨针对各种屏幕大小设计和开发响应式网站的解决方案。  什么是响应式设计?  iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备...
  • 响应式布局和自适应布局详解响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态...
  • 响应式编程规范

    千次阅读 2019-02-01 14:40:51
    文章目录响应式宣言反应式系统的特质reactive-streams 响应式宣言 响应式编程的概念已经很早就提出来了,业内很多大牛共同构建了 响应式宣言(中文版)。如果您认可该宣言,可以在其中签下自己的大名。 内容不多,...
  • 拼图响应式前端框架版响应式后台,学习的同时也向大家推荐: http://www.pintuer.com/ 1,首先我们先看下,功能机(ldpi 320x442)分辨率下的效果。   2,然后我们再通过拼图响应式测试工具直接...
  • 响应式编程

    千次阅读 2019-05-07 15:26:39
    我们先来聊一聊响应式的由来,对于它的由来,我们可能需要先从一段常见的代码片段看起 int a=1; int b=a+1; System.out.print(“b=”+b) // b=2 a=10; System.out.print(“b=”+b) // b=2 上面是一段很...
  • 本系列其他文章见:《响应式Spring的道法术器》。 前情提要:响应式流 | Reactor3快速上手 2 响应式编程之法 上一章本着“快速上手”的原则,介绍了响应式流的概念,以及Reactor 3的使用。这一章,我们基于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,460
精华内容 27,784
关键字:

响应式