服务端推送介绍与sse的使用案例

最新推荐文章于 2024-09-12 10:07:39 发布

ITzhongzi

最新推荐文章于 2024-09-12 10:07:39 发布

阅读量634

点赞数 1

分类专栏：服务器文章标签：推送

本文链接：https://blog.csdn.net/ITzhongzi/article/details/103144772

版权

服务器专栏收录该内容

37 篇文章 0 订阅

订阅专栏

服务端推送常用技术介绍

简介：服务端常用推送技术介绍，如websocket，sse轮询等
	1、客户端轮询:ajax定时拉取

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

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

SpringBoot2.x服务端主动推送SSE

简介：讲解SpringBoot2.x服务端主动推送Sever-Send-Events
	
1、localhost:8080/index.html
2、需要把response的类型 改为 text/event-stream，才是sse的类型

核心示例代码

后台


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: " + Math.random() + "\n\n";
    }
}

前台

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