java 与前端实现进度条

Java 后端与前端技术实现进度条功能
使用 Spring Boot 和 jQuery 实现下载进度条
为了实现在Java后端和HTML前端之间的实时交互的下载进度功能，在后端需要创建一个服务来提供文件流并计算进度，而在前端则需构建一个能够轮询该进度并触发相应UI变化的机制。
在服务器端采用Spring Boot框架的情况下：
// 定义控制器处理请求
@RestController
@RequestMapping("/download")
public class DownloadController {

private static final Logger logger = LoggerFactory.getLogger(DownloadController.class);

/**
* 开始下载操作，并返回任务ID以便查询状态.
*/
@PostMapping("/start")
public ResponseEntity<String> startDownload(@RequestBody String params){
// 创建唯一标识符用于跟踪此特定下载过程
UUID taskId = UUID.randomUUID();

// 将参数保存到数据库或者缓存中关联taskId

// 返回给客户端的任务Id
return new ResponseEntity<>(taskId.toString(), HttpStatus.OK);
}

/**
* 查询指定下载任务的状态.
*/
@GetMapping("/{id}/status")
public Map<String, Object> getProgress(@PathVariable("id") String id){
// 通过传入的任务Id获取当前下载百分比或其他形式表示的进展程度
Integer progressPercentage = ... ; // 获取实际进度逻辑

HashMap<String,Object> resultMap=new HashMap<>();
resultMap.put("progress",progressPercentage);
return resultMap;
}
}
登录后复制
对于上述代码片段中的getProgress()方法，可以通过Redis或者其他存储方式记录每个下载任务的具体进展情况[^1]。当有新的HTTP GET请求到达时，则读取对应的进度数值作为响应数据发送回浏览器。
接下来是在客户端部分利用JavaScript库比如jQuery来进行周期性的AJAX调用来检查最新的下载情况:
let interval;

function initProgress(taskId) {
$.ajax({
url: '/download/' + taskId + '/status',
method: 'GET'
}).done(function(response) {
$('#progressbar').css('width', response.progress+'%');

if (response.progress < 100) {
clearInterval(interval); // 如果完成就停止定时器
}
});

interval=setInterval(() => {initProgress(taskId)}, 2000); // 每两秒刷新一次进度
}

$('#start-download-btn').click(function(){
var formData={};

$.post('/download/start', JSON.stringify(formData), function(data,status){
let taskId=data;
initProgress(taskId);
});
});
登录后复制
这段脚本会在点击按钮发起POST请求启动后台作业之后立即开启一个每秒钟两次向服务器询问最新进度的过程直到达到百分之百为止。
另外一种更高效的方式是使用WebSocket协议替代传统的基于轮询的方法。这允许建立持久连接从而减少延迟并且提高性能。下面给出的是关于如何设置WebSockets的相关配置以及简单的消息推送例子[^4]:
@ServerEndpoint("/ws/progress/{userId}")
@Component
public class ProgressWebSocketHandler {

@OnOpen
public void onOpen(Session session,@PathParam("userId")String userId){
// 存储session对象至静态集合或map结构里方便后续查找
}

@OnMessage
public void handleMessage(String message, Session session){
// 处理来自客户端的消息
}

@OnError
public void onError(Throwable error){
// 错误日志记录
}

@OnClose
public void onClose(){
// 清除资源释放工作
}

public static void sendProgressUpdateToUser(String userId,int percentComplete){
try{
Set<Session> sessions=...;// 根据userId找到对应的所有活动会话

for (Session s :sessions ) {
synchronized(s){
if (!s.isOpen()) continue;

s.getBasicRemote().sendText("{\"percent\":"+percentComplete+"}");
}
}

}catch(Exception e){
log.error(e.getMessage());
}
}
}
登录后复制
每当有任何重要的事件发生（例如某个大文件的一部分被成功传输），就可以调用sendProgressUpdateToUser()函数通知所有订阅了相同主题的用户界面组件更新其视图。