SpringBoot2.0实现服务器主动推送SSE技术

绝地灬酷狼 2023-07-11 08:41 3阅读 0赞

### 文章目录 ###

*  一、服务器推送技术
 *  二、SpringBoot2.0 实现 SSE

# 一、服务器推送技术 #

1.  **客户端轮询**：`Ajax`定时拉取
2.  **服务器主动推送**：`WebSocket`

`WebSocket` 是 `HTML5` 开始提供的一种在单个 `TCP` 连接上进行全双工通讯的协议。

`WebSocket`使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 `WebSocket API` 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 `WebSocket API` 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

1.  服务端主动推送:`SSE`(`Server Send Event`)

指的是网页自动获取来自服务器的更新，`HTML5`新标准，用来从服务端实时推送数据到浏览器端，直接建立在当前`http`连接上，本质上是保持一个`http`长连接，轻量协议。所有主流浏览器均支持`SSE`，除了`IE`。

案例:`Facebook`、`Twitter`更新、估价更新、新的博文、赛事结果等。

`js`代码：

var source=new EventSource("htttp://www.xxx.com");
    source.onmessage=function(event){ 
      document.getElementById("result").innerHTML+=event.data + "<br />";
    };

*  创建一个新的 `EventSource`对象，然后规定发送更新的页面的`url`
 *  每接收到一次更新，就会发生 `onmessage` 事件
 *  当 `onmessage`事件发生时，把已接收的数据推入 `id` 为`"result"`的元素中

# 二、SpringBoot2.0 实现 SSE #

**①服务器端代码**

@RestController
    @RequestMapping("/sse")
    public class SSEController { 
    
        @RequestMapping(value = "/data",produces = MediaType.TEXT_EVENT_STREAM_VALUE)
        public String data(){ 
            try { 
                Thread.sleep(500);
            } catch (InterruptedException e) { 
                e.printStackTrace();
            }
            return "模拟动态数据...."+Math.random();
        }
    
    }

**②前端代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试服务器推送技术</title>
        <script type="text/javascript"> var data=new EventSource("http://localhost:8080/sse/data") data.onmessage = function (event) { document.getElementById("result").innerText=event.data } </script>
    </head>
    <body>
        <h1>动态数据</h1>
        <div id="result"></div>
    </body>
    </html>

**③测试效果**

![在这里插入图片描述][20200304203417979.gif]

[20200304203417979.gif]: https://img-blog.csdnimg.cn/20200304203417979.gif