WebSocket应用实例–进度条实现

应用背景:


系统新增资料 批量上传 功能,用户再上传过程中,不知道上传进度,等待时间过长会误以为系统导入异常 而关闭页面,重新导入,可能出现资料重复的问题。为此,需要提供类似文件上传进度 将执行进度回复给前端页面的方案。

消息从服务端客户端主动推送到客户端,最直接的方案是使用WebSocke(可以双向通信就行)。感觉是有点大材小用了。

具体实现

a,页面加载时与WebSocket服务端建立连接

b,服务端接收连接请求并记录下客户端socket连接

c,执行导入

d,服务端将进度返回前端(当前记录行/总记录行数)

e,前端解析

 

1,前端:

2,后段实现:

遇到的问题:

在使用Form 对button是submit类型,提交到Action时,页面点击 [执行导入]时,Firefox存在一个问题:载入页面时与 ws: 的连接中断。官方也一直没有解决此问题。Chrome就可以正常执行。

解决办法就是使用Ajax,如此页面URL就不会是等待加载 的状态了,数据也能提交执行,然后通过WebSocket将进度传回前端。

留下评论

电子邮件地址不会被公开。 必填项已用*标注