springboot与服务器推送技术整合

一、主流服务器推送技术说明1.1 需求与背景若干年前,所有的请求都是由浏览器端发起,浏览器本身并没有接受请求的能力。所以一些特殊需求都是用ajax轮询的方式来实现的。比如对于某些需要实时更新的数据(例如Facebook/Twitter 更新、股价更新、新的博文、赛事结果等)。又例如我们通过页面启动一个定时任务,前端想知道任务后台的的实时运行状态,就需要以较小的间隔,频繁的向服务器建立http连接询问定时任务是否完成,然后更新页面状态。但这样做的后果就是浪费大量流量,对服务端造成了巨大压力。在
摘要由CSDN通过智能技术生成

一、主流服务器推送技术说明

1.1 需求与背景

若干年前,所有的请求都是由浏览器端发起,浏览器本身并没有接受请求的能力。所以一些特殊需求都是用ajax轮询的方式来实现的。

比如对于某些需要实时更新的数据(例如Facebook/Twitter 更新、股价更新、新的博文、赛事结果等)。又例如我们通过页面启动一个定时任务,前端想知道任务后台的的实时运行状态,就需要以较小的间隔,频繁的向服务器建立http连接询问定时任务是否完成,然后更新页面状态。但这样做的后果就是浪费大量流量,对服务端造成了巨大压力。

在html5被广泛推广之后,我们可以使用服务端主动推动数据的方式来,解决上面提到的问题。

1.2 服务端推送常用技术

1、全双工通信:WebSocket全双工的,全双工就是双向通信,http协议是“对讲机”之间的通话,那我们websocket就是移动电话。本质上是一个额外的tcp连接,建立和关闭时握手使用http协议,其他数据传输不使用http协议 ,更加复杂一些,比较适用于需要进行复杂双向实时数据通讯的场景。 2、服务端主动推送:SSE (Server Send Event)html5新标准,用来从服务端实时推送数据到浏览器端, 直接建立在当前http连接上,本质上是保持一个http长连接,轻量协议 。客户端发送一个请求到服务端 ,服务端保持这个请求直到一个新的消息准备好,将消息返回至客户端,此时不关闭连接,仍然保持它,供其它消息使用。SSE的一大特色就是重复利用一个连接来处理每一个消息(又称event)。

1.3 websocket与SSE比较

是否基于新协议 是否双向通信 是否支持跨域 编码难度
SSE 否(Http 否(服务器单向) 否(Firefox 支持跨域)
WebSocket 是(ws 略高
但是IE和Edge浏览器不支持SSE。

二、服务端推送事件SSE

2.1 模拟网络支付场景

ssetest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE</title>
</head>
<body>
    <div id = "message"></div>
    <script>
        if (window.EventSource) {
            var source = new EventSource('orderpay');
            innerHTML = '';
            source.addEventListener('message', function(e) {
                innerHTML += e.data + "<br/>";
                document.getElementById("message").innerHTML = innerHTML;
            });
​
            source.addEventListener('open', function(e) {
                console.log("连接打开.");
            }, false);
​
            // 响应finish事件,主动关闭EventSource
            source.addEventListener('finish', function(e) {
                console.log("数据接收完毕,关闭EventSource");
                source.close();
                console.log(e);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值