JavaScript를 통해 HTTP 통신~HTTPStreaming 편 배우기~
10667 단어 JavaScript
개시하다
본고는Chunked transfer encoding(WebSocket을 사용하지 않는 PUSH 통신의 한 공식)을 통해HTTPStreaming의 견본 프로그램을 보여 준다.
Chunked transfer encording에 따른 HTTPStreaming
WebSocket을 사용하지 않는 PUSH 통신 방식백문이 불여일견이라서 HTTP Streaming 모드 테스트 데모 사이트를 소개했다.이 사이트는 PHP/jQuery에서 이루어졌습니다.
서버에서 응답 통신 방법
Content-Type: text/plain
Transfer-Encoding: chunked
1
a
2
aa
3
aaa
4
aaaa
5
aaaaa
6
aaaaaa
7
aaaaaaa
8
aaaaaaaa
9
aaa
aaaaaa
a
aaaaaaaaaa
b
aaaaaaaaaaa
c
aaaaaaaaaaaa
d
aaaaaaaaaaaaa
e
aaaaaaaaaaaaaa
0
[CRLF]
구문을 사용합니다.아래와 같다.
chunked-body = *chunk
last-chunk
trailer-part
CRLF
chunk = chunk-size [ chunk-ext ] CRLF
chunk-data CRLF
chunk-size = 1*HEXDIG
last-chunk = 1*("0") [ chunk-ext ] CRLF
chunk-data = 1*OCTET ; a sequence of chunk-size octets
고객은 어떻게 받아들일까요
#!/usr/bin/ruby
puts "Content-Type: text/plain"
puts "Transfer-encoding: chunked"
puts "\n"
15.times{|n|
if(n > 0) then
puts n.to_s(16) # 16進数
puts 'a' * n
STDOUT.flush
end
sleep 1
}
puts "0"
puts # 空行
function startStream(){
const url = "./streaming.cgi"
fetch(url)
.then((res)=>{
if(res.ok){
const reader = res.body.getReader();
let received = 0;
const txt = new TextDecoder();
reader.read().then(function processText({done, value}){
if(done){
console.log("Stream Complete")
return;
}
received += value.length;
const chunk = txt.decode(value);
let listItem = document.createElement('li');
listItem.textContent = 'Read ' + received + ' bytes. Current chunk = ' + chunk;
document.getElementById("result").appendChild(listItem);
return reader.read().then(processText);
})
}else{
console.log(res);
}
})
.catch((err)=>{
console.log(err);
})
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTTP streaming Test</title>
<script src="./index.js"></script>
<style></style>
</head>
<body>
<h1>HTTP streaming Test</h1>
<button onclick="startStream()">Streaming開始</button>
<ul id="result"></ul>
</body>
</html>
실행 결과
참조 정보 요약
Reference
이 문제에 관하여(JavaScript를 통해 HTTP 통신~HTTPStreaming 편 배우기~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Gatz/items/dc08b13e982e6a3d5043텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
