SpringMvc4x高级配置(三) 服务器端推送技术之S

发表于

一. 点睛

服务器端推送技术在我们日常开发中较为常用，可能早期很多人的解决方案是使用Ajax向服务器轮询消息，使浏览器尽可能第一时间获得服务端的消息，因为这种方式的轮询频率不好控制，所以大大增加了服务端的压力。

下面要介绍的服务端推送方案都是基于：当客户端向服务端发送请求，服务端会抓住这个请求不放，等有数据更新的时候才返回给客户端，当客户端接收到消息后，再向服务端发送请求，周而复始。这种方式的好处是减少了服务器的请求数量，大大减少了服务器的压力。

除了服务器端推送技术之外，还有一个另外的双向通信的技术——WebSocket，后面会在介绍Spring Boot的时候进行演示。

下面将提供基于SSE(Server Send Event 服务端发送事件)的服务器端推送和基于Servlet3.0+的异步方法特性的演示，其中第一种方式需要新式浏览器的支持，第二种方式是跨浏览器的。

二. 示例

  1. 演示控制器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
复制代码package org.light4j.springMvc4.web;

import java.util.Random;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class SseController {

    @RequestMapping(value="/push",produces="text/event-stream") //①
    public @ResponseBody String push(){
         Random r = new Random();
        try {
                Thread.sleep(5000);
        } catch (InterruptedException e) {
                e.printStackTrace();
        }   
        return "data:Testing 1,2,3" + r.nextInt() +"\n\n";
    }

}

代码解释：

① 注意，这里使用输出的媒体类型为text/event-stream，这是服务器端SSE的支持，本例演示每5秒向浏览器推送随机消息。

  1. 演示页面

在src/main/resources下面新建sse.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
复制代码<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSE Demo</title>

</head>
<body>
<div id="msgFrompPush"></div>
<script type="text/javascript" src="<c:url value="assets/js/jquery.js" />"></script>
<script type="text/javascript">

 if (!!window.EventSource) { //①
       var source = new EventSource('push'); 
       s='';
       source.addEventListener('message', function(e) {//②
           s+=e.data+"<br/>";
           $("#msgFrompPush").html(s);

       });

       source.addEventListener('open', function(e) {
            console.log("连接打开.");
       }, false);

       source.addEventListener('error', function(e) {
            if (e.readyState == EventSource.CLOSED) {
               console.log("连接关闭");
            } else {
                console.log(e.readyState);    
            }
       }, false);
    } else {
            console.log("你的浏览器不支持SSE");
    } 
</script>
</body>
</html>

代码解释：

① EventSource对象只有新式的浏览器才有(Chrome，Firefox等)。EventSource的SSE的客户端。
② 添加SSE客户端监听，在此获得服务器端推送的消息。

  1. 配置

在文件MyMvcConfig的方法addViewControllers中添加viewController映射访问演示页面sse.jsp的映射，代码如下：

1
复制代码 registry.addViewController("/sse").setViewName("/sse");

添加完成之后的代码如下所示：

1
2
3
4
5
6
7
复制代码@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/index").setViewName("/index");
    registry.addViewController("/toUpload").setViewName("/upload");
    registry.addViewController("/converter").setViewName("/converter");
    registry.addViewController("/sse").setViewName("/sse");
}
  1. 运行。

访问http://localhost/springMvc4.x-serverSendEvent/sse，可以看到效果如下图所示：

三. 源代码示例：

github地址：点击查看
码云地址：点击查看

打赏 欢迎关注人生设计师的微信公众账号
公众号ID：longjiazuoA

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%