进度条实现与后端进⾏交互，实时更新进度条（JAVAweb项
⽬实现）
实现思路
⽹页进度条更新有两种⽅式
1、轮询请求服务端、返回进度
2、服务端实时推送进度数据给客户端
轮询⽅式的实现⽅法，服务端在执⾏的过程中将进度数据保存再session中，客户端调⽤的时候从session中取出来，然后更新进度条的数据，从⽽改变进度条。
服务端实时推送，客户端请求执⾏任务的时候连接到websocket，服务端在执⾏的过程中将进度数据通过websocket的⽅式实时推送到客户端，客户端拿到数据后改变进度条
轮询请求⽅式
后端实现代码
/**
* 任务执⾏⽅法（在实际应⽤中要改成⾃⼰的逻辑代码）
*Title: execute
*author:liuxuli
*Description:
* @param request
* @return
*/
@RequestMapping(value = "execute")
public String execute(HttpServletRequest request) {
for (int i = 0; i <= 100; i++) {
/
/for循环只是个例⼦，在实际业务中百分⽐要进⾏实际的计算，这⾥的i就当是百分⽐
//将进度值存储到session中
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
return "success";
}
/
**
* 获取session中的进度值
*Title: getprocess
*author:liuxuli
*Description:
* @param request
* @return
*/
@RequestMapping(value = "getprocess")
public Object getprocess(HttpServletRequest request) {
//从session将执⾏进度值取出来并返回给⽤户
Session().getAttribute("processvalue");
}
⽹页端使⽤layui的进度条进⾏实现
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="executeprogress" > <div id="percentdiv" class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" id="submitbtn" lay-filter="demo1">执⾏</button>
</div>
</div>
var element;
layui.use('element', function(){
element = layui.element;
});
//定义定时器
var timer;
//开始执⾏任务
$('#submitbtn').click(function(){
//进度条设置为百分之0
element.progress('executeprogress', '0%');
//轮询获取进度条数据
getProcessvalue();
//请求后台
$.post('${tPath }/excute',function(data){
//执⾏完成进度条设置为百分之百
element.progress('executeprogress', '100%');
//关闭定时器
clearInterval(timer);
});
});
//轮询请求进度数据
function getProcessvalue(){
//1秒请求⼀次进度条的数据
timer = setInterval(function () {
$.post('${tPath }/getprocess',function(data){
//更新进度条
element.progress('executeprogress', data+'%');
});
}, 1000);
}
实时推送⽅式
1、创建websocket
/**
* 创建websocketsession类，SessionConfigurator是降httpsession放⼊到websocket的⽤户属性中，
* 如果使⽤springwebsocket就不需要这些配置了，因为spring的websocket框架已经配置好了
* Title: TestWebsocket
* Description:
* @author liuxuli
* @date 2020年6⽉29⽇
*/
@ServerEndpoint(value = "/testwebsocket",configurator = SessionConfigurator.class)
public class TestWebsocket {
/**
* 存储所有在线的⽤户（观察者模式）
*/
private static Map<String, Session> sessions = new ConcurrentHashMap<String, Session>();
/**
* 当⽤户连接到websocket，将该⽤户进⾏记录
*Title: onopen
*author:liuxuli
*Description:
* @param session
* @param config
*/
@OnOpen
public void onopen(Session session,EndpointConfig config) {
HttpSession httpsession = (HttpSession) UserProperties().get(Name());
System.out.println("连接成功");
sessions.Id(), session);
}
/**
* 当⽤户退出连接后，将该⽤户进⾏删除
*Title: onClose
*author:liuxuli
*Description:
* @param session
*/
@OnClose
public void onClose(Session session) {
HttpSession httpsession = (HttpSession) UserProperties().get(Name());
System.out.println("连接关闭");
}
@OnError
public void OnError(Throwable error,Session session) {
System.out.println("错误");
error.printStackTrace();
}
/**
* 向指定的⽤户发送消息
*Title: sendMessage
*author:liuxuli
*Description:
* @param httpsession 必须使⽤这个参数，如果不使⽤此参数来区分接收的⽤户，既浪费服务器资源，还能使所有的⽤户都能收到消息 * @param text 发送的消息
*/
public static void sendMessage(HttpSession httpsession,String text) {
Session session = (Id());
if (text != null && text.length() > 0) {
}
}
}
SessionConfigurator类代码：
/**
* ⽤来获取客户端的sessionid 从⽽绑定到websocket
* Title: SessionConfigurator
* Description:
* @author liuxuli
* @date 2020年6⽉29⽇
*/
public class SessionConfigurator extends Configurator{
@Override
public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) { //获取到客户端的session
HttpSession session = (HttpSession) HttpSession();
//将session当如到websocket的⽤户属性中
}
}
//初始化layui，进度条依赖element
var element;
layui.use('element', function(){
element = layui.element;
});
//执⾏任务
$('#submitbtn').click(function(){
//将进度条设置为05
element.progress('executeprogress', '0%');
//连接到websocket
connect();
//请求服务端进⾏执⾏任务
$.post('${tPath }/excute.do',function(data){ //服务端返回，任务执⾏完毕，关闭连接
close();
});
});
web后端是指什么var ws;
//连接到websocket
function connect(){
if ("WebSocket" in window) {
ws = new WebSocket("${websocketserver}/testwebsocket");
console.log("连接成功");
};
//接收服务端的推送信息，改变进度条
element.progress('executeprogress', evt.data+'%');
};
// 关闭 websocket
console.log("连接已关闭...");
};
}
else{
// 浏览器不⽀持 WebSocket
alert("您的浏览器不⽀持 WebSocket!");
}
}
//关闭websocket
function close(){
ws.close();
}
服务端的执⾏⽅法
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论