spring mvc异步请求 sse 大文件下载 断点续传下载Range

学习连接

异步Servlet3.0

Spring Boot 处理异步请求（DeferredResult 基础案例、DeferredResult 超时案例、DeferredResult 扩展案例、DeferredResult 方法汇总）

spring.io mvc Asynchronous Requests 官网文档

spring.io webflux&webclient官网文档

SpringBoot+vue 大文件分片下载
SpringBoot+vue文件上传&下载&预览&大文件分片上传&文件上传进度
spring mvc异步请求 & sse & 大文件下载 & 断点续传下载

springmvc异步请求

Spring MVC广泛接入Servlet 3.0异步请求处理：

• DeferredResult和Callable返回值，并为单个异步返回值提供基本支持。
• 控制器可以流式传输多个值，包括SSE和原始数据。
• 控制器可以使用反应式客户端并返回响应处理的反应式类型。

DeferredResult

一旦在Servlet容器中启用了异步请求处理特征，控制器方法就可以用DeferredResult包装任何支持的控制器方法返回值，如下例所示：

@GetMapping("/quotes")
@ResponseBody
public DeferredResult<String> quotes() {DeferredResult<String> deferredResult = new DeferredResult<String>();// Save the deferredResult somewhere..return deferredResult;
}// From some other thread...
deferredResult.setResult(result);

控制器可以从不同的线程异步地产生返回值——例如，响应外部事件（JMS消息）、定时任务或其他事件。

示例

@Slf4j
@RestController
@RequestMapping("/async")
public class TestController {@RequestMapping("testDeferred")public DeferredResult<String> testDeferred(Long timeoutValue) {log.info("testDeferred");// 1、timeoutValue为null，表示不超时.// 2、如果超时了，将返回这里默认值timeoutResult（不会影响给deferredResult设置值的线程）DeferredResult<String> deferredResult = new DeferredResult<>(timeoutValue,()->{return "timeoutValue";});new Thread(()->{try {log.info("异步处理 start");TimeUnit.SECONDS.sleep(5);// 此方法可以检测是否已超时，// 也就是即使超时，当前new的线程也会继续执行，下面setResult方法也会执行，只是不会把设置的值给前端，因为超时的默认值已经给了。log.info("是否超时: {}", deferredResult.isSetOrExpired());} catch (Exception e) {log.info("异步处理异常: {}", e);deferredResult.setErrorResult("error~");return;}deferredResult.setResult("testDeferred~");log.info("异步处理 end");}).start();log.info("testDeferred end");return deferredResult;}}

Callable

控制器可以使用java.util.concurrent.Callable包装任何支持的返回值，如下例所示：

@ResponseBody
@RequestMapping("test11")
public Callable<String> processUpload() {return new Callable<String>() {public String call() throws Exception {log.info("call");return "data";}};
}

该callable会交给配置的taskExecutor执行。

示例

@RequestMapping("testCallable")
public Callable<String> testCallable(Integer timeout) {log.info("testCallable start");Callable<String> callable = new Callable<String>() {@Overridepublic String call() throws Exception {TimeUnit.SECONDS.sleep(timeout);// task-1线程执行的log.info("testCallable 异步执行");return "call result";}};log.info("testCallable end");return callable;}

异步处理

springmvc异步处理流程

以下是Servlet异步请求处理的非常简洁的概述：

• 可以通过调用request.startAsync()将ServletRequest置于异步模式。这样做的主要效果是Servlet（以及任何过滤器）可以退出，但响应保持打开状态，以便稍后完成处理。
• 对request.startAsync()的调用返回AsyncContext，您可以使用它来进一步控制异步处理。例如，它提供了dispatch方法，类似于Servlet API的转发，只是它允许应用程序在Servlet容器线程上继续请求处理。
• ServletRequest可以访问到对当前的DispatcherType，您可以使用它来区分处理初始请求、异步调度、转发和其他类型。

DeferredResult处理流程如下：

• 控制器返回一个DeferredResult并将其保存在某个可以访问的内存的队列或列表中。
• Spring MVC调用request.startAsync()。
• 同时，DispatcherServlet和所有配置的过滤器退出请求处理线程，但响应保持打开状态。
• 应用程序从某个线程设置DeferredResult，Spring MVC将请求分派（dispatcher）回Servlet容器。
• 再次调用DispatcherServlet，并使用异步生成的返回值恢复处理

Callable处理流程如下：

• 控制器返回一个Callable。
• Spring MVC调用request.startAsync()并将Callable提交给TaskExecutor以在单独的线程中进行处理。
• 同时，DispatcherServlet和所有过滤器退出Servlet容器线程，但响应保持打开状态。
• 最终Callable产生一个结果，Spring MVC将请求分派回Servlet容器以完成处理。
• 再次调用DispatcherServlet，并使用来自Callable的异步生成的返回值恢复处理。

有关进一步的背景和上下文，您还可以阅读在Spring MVC 3.2中介绍异步请求处理支持的博客文章。

（经过查看DeferredResultMethodReturnValueHandler，发现还可以返回ListenableFuture、CompletionStage类型的返回值。
源码的重点是在：WebAsyncManager的创建和使用、StandardServletAsyncWebRequest对异步请求的封装、RequestMappingHandlerAdapter#invokeHandlerMethod对分发之后的处理）

Exception Handling异常处理

当您使用DeferredResult时，您可以选择是调用setResult还是setErrorResult并带有异常。在这两种情况下，Spring MVC都会将请求分派回Servlet容器以完成处理。然后将其视为控制器方法返回给定值或产生给定异常。然后异常通过常规异常处理机制（例如，调用@ExceptionHandler方法）。

当您使用Callable时，会出现类似的处理逻辑，主要区别在于结果是从Callable返回的，或者由Callable引发异常。

Interception拦截

HandlerInterceptor实例可以是AsyncHandlerInterceptor类型，以在初始请求启动异步处时接收afterConcurrentHandlingStarted回调（而不是postHandle和afterCompletion）。

HandlerInterceptor实现还可以注册CallableProcessingInterceptor或DeferredResultProcessingInterceptor，以便更深入地与异步请求的生命周期集成（例如，处理超时事件）。AsyncHandlerInterceptor了解更多详细信息。

DeferredResult提供了onTimeout(Runnable)和onCompletion(Runnable)回调。有关详细信息，请参阅DeferredResultjavadoc。Callable可以替换为公开超时和完成回调的其他方法的WebAsyncTask。

与WebFlux相比

Servlet API最初是为Filter-Servlet链而构建的。Servlet 3.0中添加的异步请求处理允许应用程序退出Filter-Servlet链，但保留响应以供进一步处理。Spring MVC异步支持是围绕这种机制构建的。当控制器返回DeferredResult时，Filter-Servlet链就会退出，Servlet容器线程就会释放。稍后，当设置DeferredResult时，会进行ASYNC分派（到同一个URL），在此期间，控制器会再次映射，但不会调用它，而是使用DeferredResult值（就像控制器返回它一样）来恢复处理。

相比之下，Spring WebFlux既不基于Servlet API构建，也不需要这样的异步请求处理特征，因为它在设计上是异步的。异步处理内置于所有框架契约中，并在请求处理的所有阶段得到支持。

从编程模型的角度来看，Spring MVC和Spring WebFlux都支持异步和响应式类型作为控制器方法中的返回值。Spring MVC甚至支持流，包括响应式背压机制。但是，对响应的单个写入仍然是阻塞的（并且在单独的线程上执行），这与WebFlux不同，WebFlux依赖于非阻塞io，并且每次写入不需要额外的线程。

另一个根本区别是Spring MVC不支持controller方法参数中的异步或反应式类型（例如@RequestBody、@RequestPart等），也不支持将异步和反应式类型作为Model属性。而webflux支持所有。

HTTP流（ResponseBodyEmitter ）

您可以对单个异步返回值使用DeferredResult和Callable。如果您想生成多个异步值并将它们写入响应怎么办？本节介绍如何执行此操作。

您可以使用ResponseBodyEmitter返回值生成对象流，其中每个对象都使用HttpMessageConverter序列化并写入响应，如下例所示：

@GetMapping("/events")
public ResponseBodyEmitter handle() {ResponseBodyEmitter emitter = new ResponseBodyEmitter();// Save the emitter somewhere..return emitter;
}// In some other thread
emitter.send("Hello once");// and again later on
emitter.send("Hello again");// and done at some point
emitter.complete();

您还可以使用ResponseBodyEmitter作为ResponseEntity中的主体，让您自定义响应的状态和标头。

当emitter抛出IOException（例如，如果远程客户端断开连接）时，应用程序不负责清理连接，也不应调起emitter.complete或emitter.completeWithErrorError。相反，servlet容器会自动启动AsyncListener错误通知，其中Spring MVC进行completeWithError调用。该调用反过来执行对应用程序的最后一次ASYNC分发，然后Spring MVC调用配置的异常解析器并完成请求。

（查看ResponseBodyEmitterReturnValueHandler，得知ResponseBodyEmitter也是基于DeferredResult来实现的）

示例

@RequestMapping("emitter")
public ResponseEntity<ResponseBodyEmitter> responseBodyEmitter() {log.info("testEmitter start");ResponseBodyEmitter emitter = new ResponseBodyEmitter(10000L);emitter.onCompletion(() -> {log.info("testEmitter onCompletion");});emitter.onTimeout(() -> {log.info("testEmitter onTimeout");});emitter.onError((e) -> {log.info("testEmitter onError: {}", e);});new Thread(()->{for (int i = 0; i < 10; i++) {try {emitter.send("testEmitter~" + i);log.info("testEmitter~" + i);} catch (IOException e) {throw new RuntimeException(e);}try {TimeUnit.MILLISECONDS.sleep(500);} catch (InterruptedException e) {throw new RuntimeException(e);}if (i > 5) {emitter.completeWithError(new ArithmeticException("计算错误"));}}log.info("发送完毕~");emitter.complete();}).start();log.info("testEmitter end");HttpHeaders httpHeaders = new HttpHeaders();httpHeaders.add("Access-Control-Allow-Origin", "*");httpHeaders.add("Content-Type", "text/html");httpHeaders.add("Cache-Control", "no-cache");httpHeaders.add("Transfer-Encoding", "chunked");return new ResponseEntity<ResponseBodyEmitter>(emitter, httpHeaders, HttpStatus.OK);
}

<!DOCTYPE html>
<html>
<head><title>分块数据实时展示</title>
</head>
<body><h1>实时数据接收:</h1><div id="output" style="border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: auto;"></div><script>// 要实现浏览器逐步接收并显示分块传输的数据，可以通过以下步骤使用 Fetch API（原生支持流式响应）配合前端实时渲染。// 启动请求并处理流式响应async function fetchStreamData() {const outputDiv = document.getElementById('output');try {const response = await fetch('http://localhost:8080/async/emitter');// 获取可读流const reader = response.body.getReader();const decoder = new TextDecoder();// 持续读取数据块while (true) {const { done, value } = await reader.read();if (done) break; // 流结束// 解码数据并追加到页面const chunk = decoder.decode(value, { stream: true });outputDiv.innerHTML += chunk;outputDiv.scrollTop = outputDiv.scrollHeight; // 自动滚动到底部}console.log('数据接收完成');} catch (error) {console.error('请求失败:', error);outputDiv.innerHTML += '请求失败: ' + error.message;}}// 页面加载后自动启动fetchStreamData();</script>
</body>
</html>

sse（SseEmitter）

SseEmitter（ResponseBodyEmitter的子类）支持Server-Sent Events，其中从服务器发送的事件根据W3C SSE规范进行格式化。要从控制器生成SSE流，返回SseEmitter，如下例所示：

@GetMapping(path="/events", produces=MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter handle() {SseEmitter emitter = new SseEmitter();// Save the emitter somewhere..return emitter;
}// In some other thread
emitter.send("Hello once");// and again later on
emitter.send("Hello again");// and done at some point
emitter.complete();

虽然SSE是流式传输到浏览器的主要选项，但请注意，IE不支持 Server-Sent Events。考虑将Spring的WebSocket与SockJS作为兜底（包括SSE）一起使用以覆盖大部分浏览器。

有关异常处理的说明，请参见HTTP流处理章节。

（使用与ResponseBodyEmitter完全一致，因为就是基于ResponseBodyEmitter。）

留意下：StreamingHttpOutputMessage 这个

原数据直传

有时，绕过消息转换机制并直接通过响应输出流（OutputStream）进行流式传输非常有用（例如实现文件下载功能）。为此，您可以将返回值的类型设为StreamingResponseBody，如下方示例所示：

@GetMapping("/download")
public StreamingResponseBody handle() {return new StreamingResponseBody() {@Overridepublic void writeTo(OutputStream outputStream) throws IOException {// write...}};
}

您可以使用StreamingResponseBody作为ResponseEntity中的主体来自定义响应的状态和标头。

（它内部是通过WebAsyncTask包装Callbale来实现的。它相比于直接使用repsonse的outputStream写入，是异步的，不会阻塞处理请求的线程。它支持分块传输吗？这点存疑。）

示例（文件下载）

后端代码

@GetMapping("/download")
public ResponseEntity<StreamingResponseBody> handle() {File file = new File("D:\\Projects\\practice\\demo-boot\\src\\main\\resources\\test.png");StreamingResponseBody streamingResponseBody = new StreamingResponseBody() {@Overridepublic void writeTo(OutputStream outputStream) throws IOException {byte[] buffer = new byte[1024];FileInputStream fis = new FileInputStream(file);int len = -1;while ((len = fis.read(buffer)) != -1) {outputStream.write(buffer, 0, len);}outputStream.flush();fis.close();}};return ResponseEntity.ok().header(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, "*").header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\"").contentType(MediaType.APPLICATION_OCTET_STREAM).contentLength(file.length()).body(streamingResponseBody);

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Download Example</title>
</head>
<body><h1>File Download Example</h1><button onclick="downloadWithFetch()">Download with Fetch (Streaming)</button><script>async function downloadWithFetch(filename) {try {const response = await fetch(`http://127.0.0.1:8080/async/download`);console.log(response.ok);if (!response.ok) {throw new Error('File not found');}// 获取文件名，可以从Content-Disposition头部解析let downloadFilename = 'demo.png';const contentDisposition = response.headers.get('Content-Disposition');if (contentDisposition && contentDisposition.indexOf('filename=') !== -1) {downloadFilename = contentDisposition.split('filename=')[1].replace(/"/g, '');}// 创建Blob对象并下载const blob = await response.blob();const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = downloadFilename;document.body.appendChild(a);a.click();// 清理window.URL.revokeObjectURL(url);document.body.removeChild(a);} catch (error) {console.error('Download failed:', error);alert('Download failed: ' + error.message);}}</script>
</body>
</html>

示例（大文件下载）

后端代码

@Slf4j
@RestController
@RequestMapping("/download")
public class LargeFileDownloadController {// 配置线程池（用于异步处理）// 或 Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors());// 安全下载目录private static final Path SAFE_BASE_DIR = Paths.get("D:\\Projects\\practice\\demo-boot\\file");@CrossOrigin(origins = "*",methods = {RequestMethod.GET, RequestMethod.HEAD, RequestMethod.POST},allowedHeaders = "*",exposedHeaders = {"Accept-Ranges", "Content-Range", "Content-Type", "Content-Length"})@GetMapping("/{fileName}")public ResponseEntity<StreamingResponseBody> downloadLargeFile(HttpServletRequest request,HttpServletResponse response,@PathVariable String fileName,@RequestHeader(value = "Range", required = false) String rangeHeader) {// 1. 安全校验if (!isValidFileName(fileName)) {return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();}Path filePath = SAFE_BASE_DIR.resolve(fileName).normalize();// 2. 文件存在性检查if (!Files.exists(filePath) || Files.isDirectory(filePath)) {return ResponseEntity.notFound().build();}try {// 3. 获取文件信息long fileSize = Files.size(filePath);if (request.getMethod().equals("HEAD")) {return ResponseEntity.status(HttpStatus.OK).header("Accept-Ranges", "bytes").contentLength(fileSize).body(null);}HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);headers.setContentDisposition(ContentDisposition.builder("attachment").filename(fileName).build());log.info("Range请求头: {}", rangeHeader);// 4. 处理断点续传（Range请求）if (rangeHeader != null && rangeHeader.startsWith("bytes=")) {log.info("断点续传请求");return handleRangeRequest(filePath, fileSize, rangeHeader);}log.info("完整文件下载请求");// 5. 完整文件下载headers.setContentLength(fileSize);StreamingResponseBody responseBody = output -> {try (InputStream is = Files.newInputStream(filePath)) {byte[] buffer = new byte[64 * 1024]; // 64KB缓冲区int bytesRead;while ((bytesRead = is.read(buffer)) != -1) {output.write(buffer, 0, bytesRead);log.info("写入字节数: {}", bytesRead);output.flush();}} catch (IOException e) {log.error("文件下载中断", e);throw new RuntimeException(e);}};return ResponseEntity.ok().headers(headers).body(responseBody);} catch (IOException e) {return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}// 处理断点续传（HTTP 206 Partial Content）private ResponseEntity<StreamingResponseBody> handleRangeRequest(Path filePath, long fullSize, String rangeHeader) throws IOException {// 解析Range头（示例简化实现）String[] ranges = rangeHeader.substring(6).split("-");long start = Long.parseLong(ranges[0]);long end = ranges.length > 1 ? Long.parseLong(ranges[1]) : fullSize - 1;long contentLength = end - start + 1;HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);headers.setContentLength(contentLength);headers.set("Content-Range", String.format("bytes %d-%d/%d", start, end, fullSize));StreamingResponseBody responseBody = output -> {try (RandomAccessFile raf = new RandomAccessFile(filePath.toFile(), "r")) {byte[] buffer = new byte[64 * 1024];raf.seek(start);log.info("RandomAccessFile跳转到: {}", start);// 还需要读的剩余字节数long remaining = contentLength;while (remaining > 0) {int readSize = (int) Math.min(buffer.length, remaining);int bytesRead = raf.read(buffer, 0, readSize);log.info("读取字节数: {}", bytesRead);if (bytesRead == -1) {log.info("无数据可读了");break;}output.write(buffer, 0, bytesRead);output.flush();remaining -= bytesRead;}log.info("读完了: {}", remaining);}};return ResponseEntity.status(HttpStatus.PARTIAL_CONTENT).headers(headers).body(responseBody);}// 校验文件名合法性（防止路径遍历）private boolean isValidFileName(String fileName) {return fileName.matches("[a-zA-Z0-9_\\-]+\\.?[a-zA-Z0-9_\\-]+");}
}

前端代码1

1、不占用tomcat的线程；
2、支持断点续传需要客户端支持；
3、前端能够看到进度

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>ajax 文件导出</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><button type="button" onclick="downloadFile()">下载</button><script type="text/javascript">const downloadFile = async () => {try {const response = await axios({method: 'get',url: `http://127.0.0.1:8080/download/test.mp4`,responseType: 'blob',onDownloadProgress: (progressEvent) => {const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);console.log(`下载进度: ${percent}%`);},});// 创建下载链接const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'test.mp4');document.body.appendChild(link);link.click();link.remove();} catch (error) {console.error('下载失败:', error);if (error.response?.status === 404) {alert('文件不存在');}}};</script>
</body></html>

前端代码2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>断点续传下载示例</title><style>.container {max-width: 600px;margin: 20px auto;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}.progress-container {width: 100%;height: 20px;background-color: #f0f0f0;border-radius: 10px;margin: 20px 0;}.progress-bar {height: 100%;background-color: #4CAF50;border-radius: 10px;transition: width 0.3s ease;}button {padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;}button:hover {background-color: #45a049;}#status {margin-top: 10px;color: #666;}#downloadLink {display: none;margin-top: 20px;color: #2196F3;text-decoration: none;}</style>
</head>
<body><div class="container"><button id="controlBtn">开始下载</button><div class="progress-container"><div id="progressBar" class="progress-bar" style="width: 0%"></div></div><div id="status">准备就绪</div><a id="downloadLink" download>下载文件</a></div><script>const fileUrl = 'http://127.0.0.1:8080/download/test.mp4'; // 替换为实际文件URLlet controller = null;let isDownloading = false;let receivedBytes = 0;let totalBytes = 0;let chunks = [];// 初始化IndexedDBconst initDB = () => {return new Promise((resolve, reject) => {const request = indexedDB.open('ResumableDownloadDB', 1);request.onupgradeneeded = (event) => {const db = event.target.result;if (!db.objectStoreNames.contains('downloads')) {db.createObjectStore('downloads', { keyPath: 'url' });}};request.onsuccess = () => resolve(request.result);request.onerror = () => reject(request.error);});};// 保存下载进度const saveProgress = async () => {const db = await initDB();const transaction = db.transaction('downloads', 'readwrite');const store = transaction.objectStore('downloads');store.put({ url: fileUrl, receivedBytes, chunks });};// 加载下载进度const loadProgress = async () => {const db = await initDB();return new Promise((resolve) => {const transaction = db.transaction('downloads');const store = transaction.objectStore('downloads');const request = store.get(fileUrl);request.onsuccess = () => {if (request.result) {receivedBytes = request.result.receivedBytes;chunks = request.result.chunks || [];}resolve();};});};// 更新进度显示const updateProgress = () => {const progress = (receivedBytes / totalBytes * 100).toFixed(1);document.getElementById('progressBar').style.width = `${progress}%`;document.getElementById('status').textContent = `已下载 ${progress}% (${formatBytes(receivedBytes)} / ${formatBytes(totalBytes)})`;};// 字节单位转换const formatBytes = (bytes) => {if (bytes === 0) return '0 B';const units = ['B', 'KB', 'MB', 'GB'];const i = Math.floor(Math.log(bytes) / Math.log(1024));return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;};// 开始/暂停下载const toggleDownload = async () => {if (isDownloading) {// 暂停下载controller.abort();isDownloading = false;await saveProgress();document.getElementById('controlBtn').textContent = '继续下载';} else {// 开始/继续下载isDownloading = true;document.getElementById('controlBtn').textContent = '暂停下载';try {await loadProgress();// 获取文件大小if (totalBytes === 0) {const headRes = await fetch(fileUrl, { method: 'HEAD' });totalBytes = parseInt(headRes.headers.get('Content-Length'), 10);if (!headRes.headers.get('Accept-Ranges')) {throw new Error('服务器不支持断点续传');}}controller = new AbortController();const response = await fetch(fileUrl, {headers: { 'Range': `bytes=${receivedBytes}-` },signal: controller.signal});if (response.status !== 206) {throw new Error('服务器不支持范围请求');}const reader = response.body.getReader();while (true) {const { done, value } = await reader.read();if (done) break;chunks.push(value.buffer);receivedBytes += value.byteLength;updateProgress();}// 下载完成const blob = new Blob(chunks);const url = URL.createObjectURL(blob);// 清理数据库记录const db = await initDB();const transaction = db.transaction('downloads', 'readwrite');transaction.objectStore('downloads').delete(fileUrl);// 显示下载链接document.getElementById('downloadLink').href = url;document.getElementById('downloadLink').style.display = 'inline';document.getElementById('status').textContent = '下载完成';} catch (err) {if (err.name === 'AbortError') {console.log('下载已暂停');} else {console.error('下载错误:', err);document.getElementById('status').textContent = `错误: ${err.message}`;}}isDownloading = false;document.getElementById('controlBtn').textContent = '开始下载';}};document.getElementById('controlBtn').addEventListener('click', toggleDownload);</script>
</body>
</html>

前端代码3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><button onClick="downloadChunks()">下载</button>
</body>
<script>function downloadChunks() {const chunkdownloadUrl = 'http://localhost:8080/download/test.mp4'// 分片下载大小 5MBconst chunkSize = 1024 * 1024 * 20;// 文件总大小(需要请求后端获得)let fileSize = 0;axios.head(chunkdownloadUrl).then(res => {// 定义 存储所有的分片的数组let chunks = [];// 获取文件总大小fileSize = res.headers['content-length']// 计算分片数量const chunksNum = Math.ceil(fileSize / chunkSize)// 定义下载文件分片的方法function downloadChunkFile(chunkIdx) {if (chunkIdx >= chunksNum) {alert('分片索引不可超过分片数量')return}let start = chunkIdx * chunkSizelet end = Math.min(start + chunkSize - 1, fileSize - 1)const range = `bytes=${start}-${end}`;axios({url: chunkdownloadUrl,method: 'post',headers: {Range: range},responseType: 'arraybuffer'}).then(response => {chunks.push(response.data)if (chunkIdx == chunksNum - 1) {// 下载好了console.log(chunks, 'chunks');// 组合chunks到单个文件const blob = new Blob(chunks);console.log(blob, 'blob');const link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = 'demo.mp4';link.click();return} else {++chunkIdxdownloadChunkFile(chunkIdx)}})}downloadChunkFile(0)})}
</script></html>

断点续传概念

概述

所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的，HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。

Range

Range:用于客户端到服务端的请求，在请求头中，指定第一个字节的位置和最后一个字节的位置，可以通过改字段指定下载文件的某一段大小及其单位，字节偏移从0开始。典型格式：

Ranges: (unit=first byte pos)-[last byte pos]

• Ranges: bytes=4000- 下载从第4000字节开始到文件结束部分

• Ranges: bytes=0~N 下载第0-N字节范围的内容

• Ranges: bytes=M-N 下载第M－N字节范围的内容

• Ranges: bytes=-N 下载最后N字节内容

以下几点需要注意：

• 这个数据区间是个闭合区间，起始值是0，所以“Range: bytes=0-1”这样一个请求实际上是在请求开头的2个字节。

• “Range: bytes=-200”，它不是表示请求文件开始位置的201个字节，而是表示要请求文件结尾处的200个字节。

• 如果last byte pos小于first byte pos，那么这个Range请求就是无效请求，server需要忽略这个Range请求，然后回应一个200，把整个文件发给client。

• 如果last byte pos大于等于文件长度，那么这个Range请求被认为是不能满足的，server需要回应一个416，Requested range not satisfiable。

示例解释：

• 表示头500个字节：bytes=0-499

• 表示第二个500字节：bytes=500-999

• 表示最后500个字节：bytes=-500

• 表示500字节以后的范围：bytes=500-

• 第一个和最后一个字节：bytes=0-0,-1

• 同时指定几个范围：bytes=500-600,601-999

Content-Range

用于响应头，指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。在服务器向客户返回一个部分响应，它必须描述响应覆盖的范围和整个实体长度。一般格式：
Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth]

Header示例

GET /test.rar HTTP/1.1 
Connection: close 
Host: 116.1.219.219 
Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头

一般正常回应

HTTP/1.1 200 OK 
Content-Length: 801      
Content-Type: application/octet-stream 
Content-Range: bytes 0-800/801 //801:文件总大小

一个最简单的断点续传实现大概如下：
1.客户端下载一个1024K的文件，已经下载了其中512K
2.网络中断，客户端请求续传，因此需要在HTTP头中申明本次需要续传的片段：Range:bytes=512000-
这个头通知服务端从文件的512K位置开始传输文件
3. 服务端收到断点续传请求，从文件的512K位置开始传输，并且在HTTP头中增加：
Content-Range:bytes 512000-/1024000
并且此时服务端返回的HTTP状态码应该是206，而不是200。

但是在实际场景中，会出现一种情况，即在终端发起续传请求时，URL对应的文件内容在服务端已经发生变化，此时续传的数据肯定是错误的。如何解决这个问题了？显然此时我们需要有一个标识文件唯一性的方法。在RFC2616中也有相应的定义，比如实现Last-Modified来标识文件的最后修改时间，这样即可判断出续传文件时是否已经发生过改动。同时RFC2616中还定义有一个ETag的头，可以使用ETag头来放置文件的唯一标识，比如文件的MD5值。

终端在发起续传请求时应该在HTTP头中申明If-Match 或者If-Modified-Since 字段，帮助服务端判别文件变化。

另外RFC2616中同时定义有一个If-Range头，终端如果在续传是使用If-Range。If-Range中的内容可以为最初收到的ETag头或者是Last-Modfied中的最后修改时候。服务端在收到续传请求时，通过If-Range中的内容进行校验，校验一致时返回206的续传回应，不一致时服务端则返回200回应，回应的内容为新的文件的全部数据。

响应式类型

Spring MVC支持在控制器中使用响应式客户端库（也可以阅读WebFlux部分中的响应式库）。这包括来自spring-webflux的WebClient和其他，例如Spring Data响应式数据存储库。在这种情况下，能够从控制器方法返回响应式类型很方便。

反应式返回值处理如下：

• 单值promise（promise）会被自动适配，其处理方式与使用DeferredResult类似。例如：Reactor框架的Mono或RxJava的Single均支持这种适配。

• 对于采用流式媒体类型（如 application/stream+json 或 text/event-stream）的多值流，框架会自动适配，其处理方式类似于使用 ResponseBodyEmitter 或 SseEmitter。例如：Reactor 的 Flux 或 RxJava 的 Observable 均支持此类适配。应用程序也可以直接返回 Flux<ServerSentEvent> 或 Observable<ServerSentEvent>。

• 对于使用其他任何媒体类型（例如 application/json）的多值流，框架会将其适配为类似 DeferredResult<List<?>> 的处理方式。

Spring MVC通过spring-core的ReactiveAdapterRegistry支持React和RxJava，这使得它可以适应多个反应式库。

对于流式传输到响应，支持反应式反压机制，但对响应的写入仍然是阻塞的，并且通过配置 TaskExecutor在单独的线程上运行，以避免阻塞上游源（例如从WebClient返回的Flux）。默认情况下，SimpleAsyncTaskExecutor用于阻塞写入，但在负载下不适合。如果您计划使用反应式类型流式传输，您应该使用MVC配置来配置任务执行器。

断开连接

当远程客户端消失时，Servlet API不提供任何通知。因此，在流式传输响应时，无论是通过SseEmitter还是反应式类型，定期发送数据都很重要，因为如果客户端断开连接，写入就会失败。发送可以采取空（仅注释）SSE事件或任何其他数据的形式，对方必须将其解释为心跳并忽略。

或者，考虑使用具有内置心跳机制的Web消息传递解决方案（例如基于WebSocket的STOMP或带有SockJS的WebSocket）。

配置

必须在Servlet容器级别启用异步请求处理特征。MVC配置还公开了几个异步请求选项。

Servlet容器

过滤器和Servlet声明有一个true标志，需要设置为asyncSupported以启用异步请求处理。此外，应声明过滤器映射以处理ASYNC javax.servlet.DispatchType。

在Java配置中，当您使用AbstractAnnotationConfigDispatcherServletInitializer初始化Servlet容器时，这是自动完成的。

在web.xml配置中，您可以添加<async-supported>true</async-supported>到DispatcherServlet和Filter声明，并添加<dispatcher>ASYNC</dispatcher>到滤波器映射。

Spring MVC

MVC配置公开了以下与异步请求处理相关的选项：

• Java配置：使用configureAsyncSupport回调/回传WebMvcConfigurer。
• XML命名空间：使用<async-support>下的<mvc:annotation-driven>元素。

您可以配置以下内容：

• 异步请求的默认超时值，如果未设置，则取决于底层Servlet容器。
• AsyncTaskExecutor用于在使用反应式类型流式传输时阻止写入，以及执行从控制器方法返回的Callable实例。如果您使用反应式类型流式传输或具有返回Callable的控制器方法，我们强烈建议配置此属性，因为默认情况下，它是一个SimpleAsyncTaskExecutor。
• DeferredResultProcessingInterceptor实现和CallableProcessingInterceptor实现。

请注意，您还可以在DeferredResult、ResponseBodyEmitter和SseEmitter上设置默认超时值SseEmitter对于Callable，您可以使用WebAsyncTask提供超时值。