spring mvc 服务端推送 - SSE

SSE  (Server Send Event) 服务端发送事件

需要新式浏览器支持

服务端:

package com.example.demo.controller;

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

import java.time.LocalDateTime;

import static java.util.concurrent.TimeUnit.SECONDS;

@RestController
public class SSEController {

    /**
     * 每5秒向浏览器发送消息
     * 媒体类型必须为:text/event-stream
     * 输出的格式:
     * <pre>
     * :这是注释 单独一个冒号,代表服务器推送的一个注释。(这个可解决http中的324,发送心跳包)
     * id:11 代表数据标识符,客户端接收到消息后,会把这个 ID 作为内部属性 Last-Event-ID,在断开重连 成功后,会把 Last-Event-ID 发送给服务器。
     * data:我是谁 这个数据就是客户端所接受到的数据(可推送格式化过的json数据),客户端会把这个字段解析为字符串,如果一条消息有多个 data 字段,客户端会自动用换行符 连接成一个字符串。
     * event:myEvent 客户端收到消息时,会在当前的 EventSource 对象上触发一个事件,这个事件的名称就是这个字段的值,如果消息没有这个字段,客户端的 EventSource 对象就会触发默认的 message 事件。
     * retry:3000 客户端在http超时断开后多长时间重新连接 ,只接受整数,单位是毫秒。如果这个值不是整数则会被自动忽略。
     * </pre>
     *
     * @author Canaan
     * @date 2019/8/28 23:15
     */
    @RequestMapping(value = "sse_push", produces = "text/event-stream")
    public String push() throws InterruptedException {
        SECONDS.sleep(5);
        String msg = "当前时间为-" + LocalDateTime.now().toString();
        return String.format("data:%s\n\n", msg);
    }

}

 

客户端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script type="text/javascript">
    if (!!window.EventSource) {

        var source = new EventSource("/demo/sse_push");
        source.addEventListener("message", function (e) {
            //data:服务器端传回的数据
            //origin: 服务器端URL的域名部分,即协议、域名和端口。
            //lastEventId:数据的编号,由服务器端发送。如果没有编号,这个属性为空。
            console.info(e.data);
        });

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

        source.addEventListener("error", function (e) {
            if (e.readyState === EventSource.CLOSED) {
                console.info("连接关闭");
                return;
            }
            console.info(e);
        }, false);

    } else {
        alert("你的浏览器不支持 SSE");
    }

</script>
</html>

 

参考:
https://www.cnblogs.com/goloving/p/9196066.html

 

 

转载于:https://my.oschina.net/u/2552286/blog/3096982

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值