阿超 > Streamable-HTTP-Demo

Streamable-HTTP-Demo

2025-07-15

java

观古今于须臾,抚四海于一瞬 。一一陆机《文赋》

使用Streamable-HTTP进行前后端交互传输

依赖和代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>demo</name>
    <description>Demo project for Streamable HTTP with Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 可选: 测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>
1
2
3
4
5
6
7
8
9
10
11
12
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package com.example.demo.controller;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class StreamController {

    @GetMapping(value = "/stream", produces = MediaType.TEXT_PLAIN_VALUE)
    public void stream(HttpServletResponse response) throws IOException {
        response.setContentType("text/plain");
        response.setHeader("Transfer-Encoding", "chunked");
        ServletOutputStream out = response.getOutputStream();

        for (int i = 1; i <= 10; i++) {
            String chunk = "Chunk " + i + "\n";
            out.write(chunk.getBytes());
            out.flush();
            try {
                Thread.sleep(1000); // 模拟数据实时推送
            } catch (InterruptedException e) {
                Thread.currentThread().interrupt();
            }
        }
        out.close();
    }
}

前端src/main/src/main/resources/static/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Streamable HTTP Demo</title>
</head>
<body>
<h1>Streamable HTTP Demo</h1>
<button id="startBtn">开始流式接收</button>
<pre id="output"></pre>
<script>
    document.getElementById('startBtn').onclick = async function() {
        const output = document.getElementById('output');
        output.textContent = '正在接收...\n';
        const response = await fetch('/stream');
        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');
        while(true) {
            const {done, value} = await reader.read();
            if(done) break;
            output.textContent += decoder.decode(value);
        }
        output.textContent += '\n接收完成。';
    };
</script>
</body>
</html>

运行项目，访问localhost:8080

即可得到：

1
2
3
4
5
6
7
8
9
10
11
12
13
正在接收...
Chunk 1
Chunk 2
Chunk 3
Chunk 4
Chunk 5
Chunk 6
Chunk 7
Chunk 8
Chunk 9
Chunk 10

接收完成。