cgi로 시간이 걸리는 처리를 javascript의 fetch 비동기로 받는다. ~ 진행률 막대 구현 준비 ~
10143 단어 ShellScriptCgi자바스크립트fetch
목적
환경
$ httpd -v
Server version: Apache/2.4.46 (Unix)
Server built: Aug 7 2020 12:58:18
참고
참고로 해 주신 자료입니다. 언제나 선인들의 지혜에 감사합니다. 감사합니다.
아직 XMLHttpRequest를 사용하고 있습니까? fetch의 추천 ← (거의이 사용법입니다)
서버에서의 무거운 처리 경과를 실시간으로 통지 (← 이것은 사용하지 않습니다)
시간이 많이 걸리는 cgi 준비
cgi 준비
test_fetch_stream.cgi
#!/usr/bin/env bash
# 結果の出力
echo "Content-type: text/plain; charset=UTF-8;"
echo ""
echo "counter kicked."
for i in {1..5}; do
sleep 1;
echo $i;
done
/var/www/cgi/test/count.bash &
exit 0
Content-type: ~를 기술합니다. 하위 프로세스 준비
/var/www/cgi/test/count.bash
#!/usr/bin/env bash
for i in {100..105}; do
sleep 20;
echo $i;
done
exit 0
sleep 로 모의합니다. html 준비
/var/www/html/test/test_fetch_stream.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript test fetch</title>
</head>
<body>
<h1>
test fetch steam
</h1>
<button id="btn">
fetch
</button>
server responce =
<span id="result"></span>
<script>
let str = new TextDecoder;
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('btn').addEventListener('click', function () {
const url = "/cgi/test/test_fetch_stream.cgi";
fetch(url)
.then(async response => {
console.log(response.status);
// response.body にレスポンス本文のストリーム（ReadableStream）が入っている
const reader = response.body.getReader();
while (true) {
// ストリームからデータを読む
const {done, value} = await reader.read();
const res = str.decode(new Uint8Array(value));
console.log(done, res);
document.getElementById('result').textContent = res;
if (done) {
// doneがtrueならストリームのデータを全部読み終わった
document.getElementById('result').textContent = "done";
break;
}
}
})
}, false);
}, false);
</script>
</body>
</html>
done 에 await 로 간략 표현해 read() 합니다. 이 근처는 참고 문헌과 같습니다. try{} catch{} 그리고 async await 사용법 등을 참조해 주세요. fetch 를 두 번 누르면 두 개의 cgi가 시작되어 각각의 결과를 받는 것 같습니다. cgi로 복수의 기동을 금지하거나 처리가 필요할 것 같습니다. - 그래서 브라우저는 얼마나 기다리는지(타임아웃)가 문제가 됩니다만, 30초( sleep 30 )는 OK였습니다. sleep 60에서는 NG였습니다. 아이 커맨드도 10초 정도로 뭔가 돌려주면 소수처의 대응은 할 수 있을 것 같습니다.
화면
Reference
이 문제에 관하여(cgi로 시간이 걸리는 처리를 javascript의 fetch 비동기로 받는다. ~ 진행률 막대 구현 준비 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Woodie/items/e0ecc428e20a6c1d394a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
