如何实现实时的进度条？

三种思路:

1. WebSocket
2. 内嵌一个 iframe,写一个 timer 不停去刷新 iframe 中的内容(iframe 的 src 属性指向你的长耗时任务的 URL),根据内容字符串的最后一个百分号的值，获得进度。
3. 使用 ajax XMLHttpRequest level 2 API

给出一个例子:

后端:

```Javascript
'use strict';

const http = require('http');

const server = http.createServer();
server.on('request', function(req, res) {
console.log('HTTP', req.method, req.url);
let n = 0;
res.writeHead(200, {
'Content-Type': 'text/plain',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*',
'Content-Length': 100
});

const inter = setInterval(function() {
res.write('.');
n++;
if (n >= 100) {
clearInterval(inter);
res.end();
}
}, 50);

res.on('error', function(err) {
console.log(err);
});

res.on('close', function() {
console.log('Connection close');
})
});

server.listen(8000);

```

前端:

```html
<!DOCTYPE html>
<HTML>
<head>
<meta charset="utf-8"/>
<style>
.progress-bar {
border: 1px solid rgb(230, 230, 230);
padding: 0px;
position: relative;
height: 4px;
border-radius: 2px;
}

.progress-bar > .progress-bar-inner {
margin: 0px;
width: 30%;
background-color: rgb(0, 180, 20);
height: 4px;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="progress-bar">
<div id="pro" class="progress-bar-inner"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var progress = $('#pro');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/', true);
xhr.Onprogress= function(event) {
if (event.lengthComputable) {
var pro = event.loaded/event.total;
console.log(pro);
progress.css('width', pro*100 + '%');
}
};
xhr.send();
</script>
</body>
</HTML>
```

Powered

2016-10-28 21:09:13 +08:00

上面的例子使用使用 ajax XMLHttpRequest level 2 API 做的

eyp82

2016-10-28 21:10:34 +08:00

没有必要, 你观察一下就会发现大多数的进度条都是假的, 只是视觉安慰而已.
除非你真的需要根据这个进度条精确定位(但其实这个很难, 比如很难估计一项任务到底要花多少时间)

shlabc

2016-10-28 21:20:59 +08:00

前端用 Flash 编程，可以做到实时

adv007

2016-10-28 22:10:59 +08:00 via iPhone

@shlabc 啥年代了，还 fla

adv007

2016-10-28 22:11:34 +08:00 via iPhone

websocket http-chunk

shlabc

2016-10-28 22:17:41 +08:00

@adv007 呵呵，我只是说这个技术绝对能做到啊

silencefent

2016-10-28 23:08:25 +08:00

卡 99%好吧，解决了就 100%

SourceMan

2016-10-28 23:10:24 +08:00 via iPhone

你看看苹果的"少于一分钟"，你就知道你现在这个需求有没有意义了

guyskk

2016-10-29 00:58:54 +08:00 via Android

我记得有个讨论是说: 数据是从客户端发送出去的，客户端本身就应该知道已经发送了多少数据，也就能知道百分比，为何要询问服务端自己已经知道的事情？

现在 XMLHttpRequest 有上传进度的接口，具体可以在 MDN 找到。 5 楼的实现是正确的，也可以去翻 jQuery 等涉及 AJAX 的库源码，应该能找到上传进度的实现，我之前也是在一个库里看到的，不过一时找不到在哪了。