两种方式实现websocket获取数据库查询进度

本文介绍如何利用WebSocket实现实时查询数据库查询进度。详细展示了两种方式:一是通过额外接口获取进度,二是边查询边返回进度。同时,还介绍了如何使aiomysql支持pandas的read_sql_query方法。

两种方式实现websocket获取数据库查询进度

本文实现了两种方式用websocket连接实现前端通过API获取数据库查询进度,作为websocket初步学习的记录

内容目录概要:

  1. 使用额外接口获取指定数据库查询进度,查询进度的接口与获取数据的接口分开实现
  2. 查询数据的同时可以同时返回进度
  3. 使aiomysql支持pandas的read_sql_query方法

食用前提:

  • sanic web服务
  • pandas分块读取mysql数据库,示例中伪造了dataframe代替数据库中的数据,pandas异步查询mysql的实现方式放在最后额外的part

第一种方式,查询进度的接口和获取数据的接口分开实现

# -*- coding: utf-8 -*-
import asyncio
import json

import pandas as pd
from sanic import Sanic
from sanic import Websocket, Request

app = Sanic("sanic")

# 这里为了简单,将进度存储设置成了全局变量容器,合理的做法可以放到一个可共用的类、第三方存储位置等,并设置过期自动清理
query_progress = {
   
   }


class MysqlDatabaseQuery:
    async def read_query(self):
        data = pd.DataFrame({
   
   "id": [3, 5, 8], "name": ["a", "b", "c"]}, index=[1, 2, 3])
        rowcount = len(data)
        for idx, row in data.iterrows():
            await asyncio.sleep(1)
            rownumber = idx
            yield dict(row), f"{
     
     (rownumber / rowcount): .2%}"


# 方式一
# 尝试单独用一个接口来查询数据库query的进度
async def read_query_progress(requests: Request, ws: Websocket):
    query_id = requests.args.get("query_id")
    while True:
        progress = query_progress.get(str(query_id)) or "0%"
        if ws.recv_cancel:
            break
        _ = await ws.recv()
        await ws.send(progress)


# 异步处理的任务:储存数据库查询的进度
async def dispatch_query_progress(**context):
    global query_progress
    query_progress = context


# 获取的数据接口
async def read_query(requests: Request, ws: Websocket):
    data_reader = MysqlDatabaseQuery().read_query()
    records = []
    query_id = "1"  # 需要提前定义好查询id
    async for record, progress in data_reader:
        records.append(record)
        # sanic提供的发布信号并在后台执行任务的方法,定义事件名称,传递参数,任务会异步执行:https://sanic.dev/zh/guide/advanced/signals.html#%E6%B7%BB%E5%8A%A0%E4%BF%A1%E5%8F%B7-adding-a-signal
        await requests.app.dispatch("query.read.progress", context={
   
   query_id: progress})
        if ws.recv_cancel:
            break
    else:
        await ws.send(json.dumps(records))


app.add_websocket_route(read_query, "/query1")
app.add_websocket_route(read_query_progress, "/read_progress1")
app.add_signal(dispatch_query_progress, "query.read.progress")  # 添加接收信号后的处理方法handler到app中

if __name__ == '__main__':
    app.run(auto_reload=True, dev=True)

接口调用效果:

# 查询接口ws://127.0.0.1:8000/query1的返回数据:
[{"id": 3, "name": "a"}, {"id": 5, "name": "b"}, {"id": 8, "name": "c"}]

在查询接口查询的过程中,调用进度接口
在这里插入图片描述

第二种方式,数据边查询边返回进度

# -*- coding: utf-8 -*-
import asyncio
import json

import pandas as pd
from sanic import Sanic
from sanic import Websocket, Request

app = Sanic("sanic")

# 这里为了简单,将进度存储设置成了全局变量容器,合理的做法可以放到一个可共用的类、第三方存储位置等,并设置过期自动清理
query_progress = {
   
   }


class MysqlDatabaseQuery:
    async def read_query(self):
        data = pd.DataFrame({
   
   "id": [3, 5, 8], "name": ["a", "b", "c"]}, index=[1, 2, 3])
        rowcount = len(data)
        for idx
1.  前言 1.1.  项目简要说明 VMS平台是视频监控管理平台,是一个基于服务器,依托于数据库和网络的服务系统,是中大型视频监控方案的中央管理平台,能够实现设备接入管理、用户权限管理、流媒体管理、报警管理、录像管理等。 vms-api-gateway作为VMS的网关,负责请求和响应的鉴权、路由等操作,其中的WebSocket功能,在实际使用中存在一系列体验和性能问题: (1)WebSocket内容格式不统一; (2)推送进度流程问题; (3)乱序问题; (4)VMS local大数据量推送下断连问题。 因此,本项目是针对上述存在的问题进行优化,达到体验优化的效果。 1.2.  任务概述 本任务是针对VMS的vms-api-gateway模块下web端WebSocket功能的优化,为了不影响之前的功能,要求尽量不改变源代码,以新增功能的方式进行开发。 1.3.  可用资源 1.VMS软件,包括: (1)VMS api-gateway原有组件,包括web端的WebSocket实现; (2)VMS manager原有组件,包括进度推送类任务的实现。 2.ipc-simulator-port-local-1.1-SNAPSHOT:实现模拟设备(包括IPC、NVR)的添加和激活。 1.4.  术语定义 术语 定义 WebSocket 一种网络传输协议,可在单个 TCP 连接上进行全双工通信,位于 OSI 模型的应用层;VMS通过该协议进行消息主动推送。 STOMP STOMP(Simple Text Oriented Messaging Protocol,简单文本定向消息协议)是一个面向文本的协议,但消息负载可以是文本或二进制。VMS的web端依靠该协议实现WebSocket。 VMS Video Management System,视频监控管理平台,是一个基于服务器,依托于数据库和网络的服务系统,是中大型视频监控方案的中央管理平台,能够实现设备接入管理、用户权限管理、流媒体管理、报警管理、录像管理等 1.5.  参考资料 VMS - websocket 优化方案 - EBG-Internal-Shared - Confluence,该文档展示了在性能测试中暴露出来的一些问题以及解决方案的设计; STOMP Protocol Specification,STOMP1.2基本格式、特性、用法说明; STOMP :: Spring 框架 - Spring 框架,Spirng框架下的STOMP特性。 2.  需求分析 需求分析文档:【需求分析】VMS WebSocket功能优化 - CRD_EP_Software_Service - Confluence 3.  原理概述 3.1.  协议分析 VMS的Web端的WebSocket依托STOMP框架实现,本节结合业务对该协议进行简要分析,基于分析和需求进行统一封装。 3.1.1.   协议描述 STOMP(Simple/Streaming Text Oriented Messaging Protocol)是一种基于帧的轻量级消息传输协议,专为消息中间件(Message-Oriented Middleware, MOM)设计,旨在简化客户端与消息代理(Broker)之间的异步通信。 3.1.2.   协议数据格式 1.帧(Frame)结构: TOMP消息以文本帧形式组织,包含三个部分: 命令(Command):定义操作类型(如CONNECT、SEND、SUBSCRIBE等)。 头部(Headers):键值对,传递元数据(如目标地址destination、消息类型content-type)。 消息体(Body):可包含文本或二进制数据,长度由content-length头指定。 示例: STOMP标准格式 COMMAND header1:value1 header2:value2 Body^@ 其中,需要对“Body”部分进行说明,按照官网文档,如图所示: 该说明指出只有SEND、MESSAGE、ERROR三个消息可以有消息体(body)。 2.目前格式设计 本部分的协议数据格式的封装设计主要针对body部分,现在消息推送、订阅响应都属于COMMAND=MESSAGE的范畴,但是目前二者的body由各个业务决定,没有统一的格式。 目前,由StompDestination枚举类中有49条常量可知,WebSocket其中的Topic有49个。 其中可以分为两种类型:进度类推送、事件类推送。除此之外,网关也会向Web发送订阅响应。因此,设计标准格式需要考虑这三种类型: (1)进度类推送:通常用于耗时较长的事件,通过WebSocket连接不断向web端返回执行进度信息,比如“local设备添加进度推送”、“批量执行指令进度推送”等。 以“local设备进度添加”为例,目前返回数据格式如下: local设备添加进度推送 {   "errorCode": "number",   "message": "string",   "result": {       "success": "number",       "fail": "number",       "total": "number",       "status": "number",       "macConflict": "boolean"       "taskId":"string"       "failList": {            "devId": "string",            "name": "string",            "ipString": "string",            "mac": “string”,            "hasPassword": "boolean",            "errorCode": "integer",            "message": "string",            "secLeft": “string”       }    } } result中的taskId指的是用于后续删除mac地址重合的设备,仅有重合时有值。 (2)事件类推送:服务器主动向web端推送特定事件或通知,通常用于实时通知客户端某些业务事件的发生,比如“设备信息变更推送”等。 设备信息变更推送 {   "diviceId": "string",   "status": "integer",   "name": "string"   "isDelete": "boolean",   "oldSiteId": "number",   "siteId": "number",   "upgradeStatus": "number",   "timezoneDstChange": "boolean" } (3)订阅响应:网关收到订阅之后返回给web端的订阅成功的消息。 订阅响应 {   "message": "success",   "errorCode": 0,   "data": null } 综上,可以看到三种发给Web端的消息格式不一。 3.2. 标准格式设计 1.标准格式 标准格式设计示例如下: 消息载荷内容设计 {   "type": "string",   "errorCode": "number",   "taskId": "string",   "status": "string",   "sequenceNumber": "number",   "data": "object" } 其中,字段说明如表所示: 字段 进度类推送 事件类推送 订阅响应 备注 type MESSAGE SUBSCRIBE SUBSCRIBE 任务类型,SUBSCRIBE/MESSAGE,用以标识是订阅响应还是推送消息 errorCode 批量任务中有失败时置为非0 默认0 默认0 错误码,前端在COMPLETE时通过errorCode判断是否执行失败逻辑,即发起任务结果查询 taskId XXXX 无 无 进度类推送任务topic中的uuid,用以标识不同推送任务 status RUNNING/COMPLETE COMPLETE COMPLETE 任务状态,RUNNING/COMPLETE;非进度类推送默认COMPLETE sequenceNumber 0 无 无 消息编号,每个Topic从0开始递增;SUBSCIRBE默认无sequenceNumber; 使用此字段时需要确保topic有taskId区分每次任务,需要各业务在处理时每次加1后推送。 无taskId的topic使用时保持sequenceNumber字段未空,前端不执行乱序处理逻辑 data 对象 对象 无 业务对象,需控制大小 2.封装后的示例如下: (1)进度类推送,以“local批量设备添加进度推送”为例: local批量设备添加进度推送 {   "type": "MESSAGE",   "errorCode": 0,   "taskId": "唯一字符",   "status": "RUNNING",   "sequenceNumber": 5,   "data": {       "success": a,       "fail": b,       "total": c ,       "macConflict":        "taskId":"string"   } } (2)事件类推送,以“设备信息变更推送”为例: 设备信息变更推送 {   "type": "MESSAGE",   "errorCode": 0,   "status": "COMPLETE",   "data": {      "diviceId": "string",      "status": "integer",      "name": "string",      "isDelete": "boolean",      "oldSiteId": "number",      "siteId": "number",      "upgradeStatus": "number",      "timezoneDstChange": "boolean"   } } (3)订阅响应: 订阅响应 {   "type": "SUBSCRIBE",   "status": "COMPLETE",   "errorCode": 0,   "data": null } 3.3 官方的乱序解决 参考消息顺序 :: Spring Framework - Spring 框架的内容,如下所示: 该描述中提到消息乱序的原因之一是消息发出的时候使用了多线程,同时提出了解决方案,也告诉我们该方案有一定的性能损耗。 因此,对该具体实现进行研究。 具体实现是OrderMessageChannelDecorator类,该类通过ConcurrentLinkedQueue 保证多线程环境下消息入队/出队的原子性,AtomicBoolean sendInProgress 确保同一时间仅一个线程执行发送操作。 与单线程的对比: 单线程 多线程下setPreservePublishOrder=true 入队 单线程 多线程 出队(发送) 单线程 单线程 回调 单线程 多线程 通过“并发入队+串行发送”的混合架构,在保障消息顺序的同时释放了多线程并发处理能力。其中,多线程可快速填充队列提升吞吐量,而sendInProgress原子锁与回调链机制确保发送环节严格有序,既避免了单线程的阻塞瓶颈,又通过动态可配置的拦截器实现按需顺序保障,兼顾高并发性能与顺序可靠性。 4.  系统架构描述 4.1.  概述 主要是在vms-api-gateway和vms-manager两个模块进行开发。 4.2.  模块结构 整体模块图如图所示: 4.3.  模块描述和建模 模块 功能名称 功能描述 WebSocket消息代理模块 WebSocket消息解析 WebSocket消息解析,解析前端的消息。 WebSocket消息封装 WebSocket消息封装,得到http请求。 WebSocket消息路由 WebSocket消息路由,路由到manager的controller。 WebSocket消息格式标准化模块 WebSocket消息格式标准化 定义统一格式。 设备添加进度推送模块 设备添加进度推送 往代理推送设备添加进度的消息。 查询任务结果模块 查询WebSocket任务分页结果 查询WebSocket推送进度类任务的结果,以分页或者列表的形式展示。 4.4.  流程设计 4.4.1. local设备添加流程 以“local设备添加流程”为例,该部分可分为四部分: a.请求解析、封装、路由功能 b.设备添加功能 c.添加进度推送功能 d.查询任务结果功能 整体的时序图如下所示: 对send的消息格式、内容进行说明: 将addDiscoveredDevices原有的HTTP请求包含的业务参数放进send的body里面,示例如下: Send消息格式 COMMAND:SEND destination: /api/v1/vms/{vmsId}/local/sites/{siteId}/devices/addDiscoveredDevices content-type:application/json vmsId:{vmsId} siteId:{siteId} CSRF-TOKEN:{token} SourceType:vms_web {   "username": "string",   "password": "string",   "initUsername": "string",   "initPassword": "string",   "resetPwdEmail": "string",   "selectAll": false,   "discoverType": "string",   "uuid": "string",   "language": "string",   "country": "string",   "powerLineFre": "string",   "zoneId": "string",   "timeZone": "string",   "followSiteTime": false,   "searchValue": "string",   "question1": "string",   "whetherRsa": false,   "answer1": "string",   "answer2": "string",   "question2": "string",   "answer3": "string",   "question3": "string",   "devIds": ["id1", "id2"] }^@ 【说明】: (1)本次的uuid与subscirbe中的taskId相同,用以标识是同一任务。 (2)该send内容在MessageinboundInterceptor.presend方法中解析,封装成HTTP请求,异步发送到/api/v1/vms/{vmsId}/local/sites/{siteId}/devices/addDiscoveredDevices。 4.4.2. 任务结果查询流程 对查询任务结果流程再细化说明。 当前该功能的前端展示依赖UI设计,当前UI支持列表展示,因此设计WebSocket任务结果列表查询的流程。 【扩展性保障】但是设备数量在大规模添加情况可能会很大,因此设计分页接口支持未来可能的扩展需求,同时也更符合业务情况。 【接口灵活性】前端通过当前的UI设计判断使用哪一种查询接口,接口分离实现解耦。 流程图如下。 以分页查询为例,时序图如下所示: 5. 数据库及中间件设计 为了实现单独的查询任务结果的接口,需要设计缓存用以缓存WebSocket任务执行结果。 目前VMS的缓存都是通过Redis实现,参考VMS Cache和Lock Key记录表,设计具体如下: 服务-模块 key 缓存类型 value示例 过期时间 用途 manager websocket:result:{vmsId}:{sn} WebSocketResultDTO {     "success":number,     "fail":number,     "total":number,     "content":[Object,...] } 30min websocket任务执行结果缓存 6.  接口概要设计 6.1.  概述 对“设备添加进度推送”、“查询WebSocket任务分页结果”、“查询WebSocket任务列表结果”的接口进行设计。 6.2.  接口分类与功能 Yapi链接如下: 1.设备添加进度推送:websocket - local设备添加进度推送v2 2.查询WebSocket任务分页结果:websocket - 任务结果分页查询请求 3.查询WebSocket任务列表结果:websocket - 任务结果列表查询请求 6.3. 兼容性说明 目前是针对现有功能进行优化,为了兼容之前的实现,新建Topic v2版本。 进度推送时,需要往两个Topic同时推送。待后续版本考虑删除旧Topic。 改动如下: 枚举 含义 原Topic 新Topic 备注 DEVICE_ADD_PROGRESS 设备批量添加实时进度推送 /vms/{vmsId}/users/{userId}/device-add-progress/{uuid} /vms/{vmsId}/users/{userId}/device-add-progress/{uuid}/v2 加了v2后缀(这是概要设计,有什么需要修改、补充的)
09-26
<think>嗯,用户想知道在Java中如何实现文件上传时显示进度。这个问题听起来挺常见的,可能用户正在开发一个需要上传大文件的应用,需要给用户反馈,避免他们以为程序卡死了。那首先我得回忆一下Java中处理文件上传的方式,以及如何监控上传的进度。 首先,Java后端处理文件上传通常会用Servlet或者一些框架,比如Spring MVC。如果是Servlet的话,可能用的是Apache Commons FileUpload库,或者是Servlet 3.0之后的标准Part接口。但不管用哪种方式,关键在于如何获取上传过程中的已传输字节数,然后计算进度百分比。 接下来,用户可能需要前端配合,比如通过AJAX或者WebSocket来实时更新进度条。但用户的问题可能更关注后端如何获取进度数据,所以先集中解决后端部分。 假设用户使用的是Servlet,那可能需要使用Commons FileUpload的ProgressListener。比如在上传过程中,监听器会定期回调,报告已上传的字节数和总字节数。不过需要注意的是,这个监听器可能会被频繁调用,所以不能在里面做太耗时的操作,否则会影响上传性能。此外,可能还需要考虑并发上传的情况,比如每个上传请求需要有自己的进度记录,可以通过会话(session)或者请求相关的ID来区分不同的上传进程。 举个例子,当用户开始上传文件时,后端生成一个唯一的上传ID,并将该ID返回给前端。前端在上传过程中定期向服务器查询该ID对应的进度,然后更新进度条。这样后端需要维护一个上传进度的存储结构,比如一个ConcurrentHashMap,以上传ID为键,存储当前的上传进度。 另外,如果是使用Spring框架的话,可能更方便。比如Spring MVC中,可以使用MultipartFile来接收文件,但需要自定义一个上传进度监听器。可能需要重写CommonsMultipartResolver的相关方法,或者在处理上传的Controller中手动跟踪进度。 不过,需要注意的是,使用Commons FileUpload的话,需要在Servlet中配置相应的处理。例如,在doPost方法中,创建DiskFileItemFactory和ServletFileUpload,然后设置一个ProgressListener。每次有数据块上传时,监听器会被触发,更新当前的上传进度。 这时候,还需要考虑线程安全问题,因为多个用户同时上传的话,进度数据需要隔离。可以通过将进度信息保存在会话中,或者使用一个线程安全的Map来存储,每个上传请求对应一个唯一的标识符,比如Session ID加上时间戳,或者其他唯一键。 另外,可能还需要考虑大文件上传时的内存问题,比如使用临时文件来存储上传的内容,而不是全部放在内存中。这可以通过配置DiskFileItemFactory的缓冲区大小和临时目录来实现。 那具体实现步骤大概是这样的: 1. 后端处理文件上传的Servlet或Controller中,初始化文件上传组件,并设置一个ProgressListener。 2. 在监听器中,实时计算已上传的字节数和总大小,保存到某个上下文中(比如Session或全局Map)。 3. 前端在上传文件的同时,定期发送请求(比如通过AJAX轮询)到后端的一个获取进度的接口,该接口返回当前的上传进度。 4. 后端根据上传请求的标识,从存储结构中获取进度数据,返回给前端。 5. 前端根据返回的进度更新UI,比如显示进度条或百分比。 可能的注意事项包括:监听器的性能问题,避免阻塞上传线程;进度存储的线程安全;以及处理上传中断或取消的情况,清理进度数据。 另外,如果用户使用的是异步上传,比如通过AJAX的XMLHttpRequest,可以利用其提供的progress事件来获取前端的上传进度,但这属于前端的实现。不过用户的问题更可能关注后端如何配合,所以需要明确前后端如何协作。 例如,前端使用FormData对象上传文件,通过XMLHttpRequest的upload事件监听progress,这样前端可以实时显示进度。但这只是前端的进度,可能和后端的处理进度有差异,尤其是在网络较慢的情况下,前端的上传进度可能已经完成,但后端还在处理文件保存等操作。不过对于用户的问题,可能主要关注上传过程的进度,即从客户端发送到服务器的过程,所以这种情况下,前端自己就能获取进度,不需要后端返回。但为什么还需要后端提供进度呢?可能因为用户希望在后端处理大文件时,比如处理上传的文件并进行一些耗时的操作,这时候需要将整个处理过程的进度反馈给用户,而不仅仅是网络传输的进度。这时候可能需要后端在处理过程中分阶段报告进度。 不过根据问题描述,用户可能仅指文件上传的传输进度,即从客户端到服务器传输过程中的进度。这种情况下,如果前端能直接通过XMLHttpRequest获取上传进度,可能不需要后端参与。但如果是通过表单提交,或者需要后端处理时同时提供进度,那么就需要后端的支持。 可能用户的情况是后端需要处理上传的文件流,并在接收数据的过程中报告进度,这时候就需要像之前提到的ProgressListener或者类似机制。 总结一下,实现步骤可能包括: 后端(Java Servlet): - 使用Apache Commons FileUpload库处理上传。 - 在Servlet中创建ServletFileUpload实例,并设置ProgressListener。 - 在监听器中更新当前上传的进度到会话或全局Map。 - 提供另一个接口供前端查询当前进度。 前端: - 使用XMLHttpRequest或Fetch API上传文件,并监听上传进度事件。 - 或者,上传文件后,定期轮询后端进度接口,更新UI。 或者,如果用户想在后端处理时获取进度,比如保存文件到磁盘或进行其他处理时的进度,可能需要分阶段处理,比如读取流的时候计算已读取的字节数。 不过一般来说,文件上传的进度主要是指从客户端到服务器的传输进度,这时候前端的XMLHttpRequest可以直接监听progress事件,而不需要后端提供。但可能用户的情况是,后端需要处理上传后的文件,比如解压、转码等,这时候需要后端在处理过程中报告进度。不过问题明确说是“上传文件的时候给出进度”,所以应该指的是传输阶段的进度。 可能用户对前端如何显示进度和后端如何提供进度之间的协作不太清楚,所以需要分情况讨论。这时候,在回答中应该涵盖两种情况:一种是前端自己监听上传进度(纯前端实现),另一种是后端配合提供进度信息(需要前后端协作)。但根据问题中的“Java如何实现”,可能用户更关注后端如何配合,所以需要重点讲解后端如何跟踪上传进度,并提供一个接口让前端获取。 例如,后端用Servlet,在ProgressListener中将进度存入session,然后前端通过另一个请求获取session中的进度值。但需要注意session的并发问题,可能需要每个上传请求有独立的标识,而不仅仅是session,因为同一用户可能同时上传多个文件。 因此,更合理的做法是,每个上传请求生成一个唯一的上传ID,后端将该ID返回给前端,前端在查询进度时带上这个ID,后端根据ID查找对应的进度。这样即使同一用户多次上传,也能区分不同的进度。 具体代码示例可能如下: 后端Servlet处理上传: ```java @WebServlet("/upload") public class FileUploadServlet extends HttpServlet { private Map<String, Long> progressMap = new ConcurrentHashMap<>(); protected void doPost(HttpServletRequest request, HttpServletResponse response) { String uploadId = UUID.randomUUID().toString(); request.getSession().setAttribute("uploadId", uploadId); DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setProgressListener((bytesRead, contentLength, items) -> { progressMap.put(uploadId, bytesRead); }); // 处理文件上传... // 上传完成后,从progressMap中移除uploadId } } @WebServlet("/progress") public class ProgressServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) { String uploadId = (String) request.getSession().getAttribute("uploadId"); Long bytesRead = progressMap.get(uploadId); // 返回进度信息... } } ``` 不过以上代码可能存在一些问题,比如Servlet的线程安全问题,因为progressMap是实例变量,而Servlet默认是多线程的,但使用ConcurrentHashMap的话应该没问题。另外,需要处理上传完成或失败时清理progressMap中的条目,避免内存泄漏。 另外,使用Servlet 3.0的异步处理或者Spring框架的相应功能,可能更方便。例如,在Spring中,可以创建一个ProgressListener,并将其与当前的上传请求关联,通过@ControllerAdvice或者拦截器来管理进度状态。 总结,关键点在于使用库提供的进度监听机制,将进度保存,并提供另一个接口供查询。同时处理好并发和资源清理。</think>在Java中实现文件上传时显示进度,通常需要结合后端处理与前端配合。以下是分步说明及示例代码: --- ### **1. 后端实现(使用Servlet和Apache Commons FileUpload)** #### **步骤说明** 1. **添加依赖**:引入Apache Commons FileUpload库。 2. **创建Servlet处理上传**:接收文件并监听上传进度。 3. **保存进度信息**:使用线程安全的`ConcurrentHashMap`存储各上传请求的进度。 4. **提供进度查询接口**:允许前端通过唯一ID查询当前进度。 #### **示例代码** ```java @WebServlet("/upload") public class FileUploadServlet extends HttpServlet { // 存储上传进度,Key为上传ID,Value为已上传字节数 private static final Map<String, Long> progressMap = new ConcurrentHashMap<>(); protected void doPost(HttpServletRequest request, HttpServletResponse response) { String uploadId = UUID.randomUUID().toString(); // 生成唯一ID request.getSession().setAttribute("uploadId", uploadId); try { DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); // 设置进度监听器 upload.setProgressListener((bytesRead, contentLength, itemIndex) -> { progressMap.put(uploadId, bytesRead); }); List<FileItem> items = upload.parseRequest(request); // 解析请求,触发监听 // 处理上传的文件... } catch (Exception e) { e.printStackTrace(); } finally { progressMap.remove(uploadId); // 清理进度数据 } } } ``` ```java @WebServlet("/getProgress") public class ProgressServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) { String uploadId = (String) request.getSession().getAttribute("uploadId"); Long bytesRead = progressMap.getOrDefault(uploadId, 0L); Long totalSize = request.getSession().getAttribute("totalSize"); // 需在上传前获取总大小 double progress = (double) bytesRead / totalSize * 100; response.getWriter().write(String.format("{ \"progress\": %.2f }", progress)); } } ``` --- ### **2. 前端实现(JavaScript监听进度)** #### **步骤说明** 1. **通过AJAX上传文件**:使用`FormData`和`XMLHttpRequest`发送文件。 2. **监听上传进度**:利用`xhr.upload.onprogress`事件实时更新UI。 3. **轮询后端进度(可选)**:如果需后端处理进度(如保存到磁盘),可定期查询进度接口。 #### **示例代码** ```html <input type="file" id="fileInput" /> <button onclick="uploadFile()">Upload</button> <div id="progressBar"></div> <script> function uploadFile() { const file = document.getElementById('fileInput').files[0]; const formData = new FormData(); formData.append("file", file); const xhr = new XMLHttpRequest(); // 前端直接监听上传进度(网络传输阶段) xhr.upload.onprogress = function(e) { if (e.lengthComputable) { const percent = (e.loaded / e.total * 100).toFixed(2); document.getElementById('progressBar').innerHTML = `Uploading: ${percent}%`; } }; xhr.open("POST", "/upload"); xhr.send(formData); } </script> ``` --- ### **3. 结合后端进度查询(复杂场景)** 如果后端需处理耗时操作(如文件解析),可扩展进度接口: ```java // 在FileUploadServlet中保存总大小 request.getSession().setAttribute("totalSize", fileSize); // 前端定期轮询进度 function checkProgress() { fetch('/getProgress') .then(response => response.json()) .then(data => { console.log(`Current Progress: ${data.progress}%`); if (data.progress < 100) setTimeout(checkProgress, 500); }); } ``` --- ### **注意事项** - **线程安全**:使用`ConcurrentHashMap`避免多线程冲突。 - **资源清理**:上传完成后务必移除进度数据,防止内存泄漏。 - **性能优化**:进度监听器内避免复杂操作,防止拖慢上传速度。 - **跨会话管理**:上传ID需唯一,可结合用户会话(Session)或数据库管理。 --- 通过上述方法,可实现从文件传输到后端处理的完整进度跟踪,适用于大文件上传或需要后端处理的场景。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值