WebSocket&SSE实时动态数据展示

最新推荐文章于 2024-08-06 21:25:27 发布

XiuL

最新推荐文章于 2024-08-06 21:25:27 发布

阅读量1.4k

点赞数

分类专栏： java篇文章标签： websocket java spring boot

本文链接：https://blog.csdn.net/qq_35310348/article/details/128417473

版权

需求

服务器主动推送数据给浏览器，实现数据实时更新展示

实现方式

WebSocket
SSE

SSE案例（Springboot项目）

maven依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

创建一个controller

@RestController
@RequestMapping("/sse")
public class SseController {
   
    //SSE返回数据格式是固定的以data:开头，以\n\n结束
    @RequestMapping(value = "/get_data", produces = "text/event-stream;charset=UTF-8")
    public String push() throws InterruptedException {
   
        Thread.sleep(1000);
        return "data:测试数据：" + Math.random() + "\n\n";
    }
}

resource目录下创建public目录，然后创建index.html

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

    <script type="text/javascript">
        // /sse/get_data
        let source = new EventSource("http://localhost:8080/sse/get_data");

        source.addEventListener('message',function (t){
     
            var data = t.data;
            document.getElementById("result").innerText = data;
        })
        source.addEventListener('open', function(e) {
     
            console.log("连接打开.");
        }, false);
        source.addEventListener('error', function(e) {
     
            if (e.readyState == EventSource.CLOSED) {
     
                console.log("连接关闭");