SpringBoot2.0服务器端主动推送SSE技术讲解

最新推荐文章于 2024-06-11 16:51:51 发布

小哇666

最新推荐文章于 2024-06-11 16:51:51 发布

阅读量601

点赞数 1

分类专栏： # springboot

本文链接：https://blog.csdn.net/qq_41712271/article/details/105311888

版权

springboot 专栏收录该内容

67 篇文章 2 订阅

订阅专栏

服务端推送常用技术介绍
1、客户端轮询:ajax定时拉取

2、服务端主动推送:WebSocket，主流技术，支持双向通讯
全双工的，本质上是一个额外的tcp连接，建立和关闭时握手使用http协议，其他数据传输不使用http协议
更加复杂一些，适用于需要进行复杂双向数据通讯的场景

3、服务端主动推送:SSE (Server Send Event)，只能推送，简单
       html5新标准，用来从服务端实时推送数据到浏览器端，
       直接建立在当前http连接上，本质上是保持一个http长连接，轻量协议
       简单的服务器数据推送的场景，使用服务器推送事件

后台接口开发
注意：返回的参数必须以data:开头，"\n\n"结尾，并添加 produces = "text/event-stream;charset=UTF-8"

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/sse")
public class SSEController {

    @RequestMapping(value = "/get_data", produces = "text/event-stream;charset=UTF-8")
    public String push() {
    	  
          try {
              Thread.sleep(1000); 
              //第三方数据源调用
          } catch (InterruptedException e) {
              e.printStackTrace();
          }

          return "data:xdclass 行情" + Math.random() + "\n\n";
    }
}

前台开发，测试时，可放在resources/static目录下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">  
//需要判断浏览器支不支持，可以去w3c进行查看

var source = new EventSource('sse/get_data');
source.onmessage = function (event) {
  console.info(event.data);
  document.getElementById('result').innerText = event.data
};

</script>  
</head>

<body>
模拟股票行情
 <div>xdclass test</div>  
    <div id="result"></div>  
</body>

</html>

测试发现，浏览器的数据，在不刷新的情况下，数据就可以一直变动
打开浏览器的检查，切换到Network标签，发现浏览器是在不停的向服务器发送请求

小哇666

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot2.0服务器端主动推送SSE技术讲解

服务端推送常用技术介绍1、客户端轮询:ajax定时拉取2、服务端主动推送:WebSocket，主流技术，支持双向通讯全双工的，本质上是一个额外的tcp连接，建立和关闭时握手使用http协议，其他数据传输不使用http协议更加复杂一些，适用于需要进行复杂双向数据通讯的场景3、服务端主动推送:SSE (Server Send Event)，只能推送，简单 ...
复制链接

扫一扫

专栏目录