springboot 服务端推送--SSE

最新推荐文章于 2024-07-17 14:39:25 发布

chonghuan5167

最新推荐文章于 2024-07-17 14:39:25 发布

阅读量341

点赞数

文章标签： java json 前端 ViewUI

原文链接：https://my.oschina.net/u/3484671/blog/3097385

版权

package com.demo.action;

import com.demo.serviceI.DemoService;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.jackson.JsonObjectDeserializer;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;
import java.util.Random;

@RestController
public class DemoAction {

    @Autowired
    private DemoService demoService;

    /**
     * 健康检查json串模拟
     * @return
     */
    @RequestMapping(value = "health.json")
    public String healt(){

        return "{\"status\":\"UP\",\"diskSpace\":{\"status\":\"UP\",\"total\":249769230336,\"free\":71914618880,\"threshold\":10485760},\"db\":{\"status\":\"UP\",\"database\":\"MySQL\",\"hello\":1}}";
    }

    /**
     * 条件注解使用
     * @return
     */
    @RequestMapping(value = "user/info")
    public String info(){

        return demoService.info();
    }

    /**
     * 异步调用方法
     */
    @RequestMapping(value = "print")
    public void print(){
        for (int i = 0; i < 100; i++) {
            demoService.print(i);
        }
    }

    /**
     * 服务端推送技术
     */
    @RequestMapping(value = "serverPush",produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
    public String serverPush(){

        Map<String,String> demo = new HashMap<>(1);
        demo.put("name","张三"+new Random().nextInt());
        ObjectMapper objectMapper = new ObjectMapper();
        String s = "data:";
        try {
            s += objectMapper.writeValueAsString(demo)+"\n\n";
            System.out.println(s);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return s;
    }


}

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        if (!!window.EventSource) {
            var event = new EventSource("/serverPush");

            event.addEventListener('message', function(t) {
                var data = t.data;
                document.write(data+"<br/>")
            });

            event.addEventListener("open",function (t) {
                console.log("开启");
            },false);

            event.addEventListener("error",function (t) {
                if (t.readyState  == EventSource.CLOSED) {
                    console.log("关闭");
                }
            },false);



        }else{
            console.error("浏览器不支持");
        }


    </script>
</head>
<body>

</body>
</html>

注意使用过程中容易遇到的问题：

1.由于返回类型使用了text/event-stream，所以在服务端响应数据必须使用String或其他文本类型

2. 在返回数据时，必须用data:和\n\n分别开头和结尾；如：String.format("data:%s\n\n",data)，这里将我坑惨，网上和书上资料只是给了个例子没有具体说明，找了半天没找到原因和前端链接成功就是触发不了message事件