简单的数据流服务端和客户端实现
网页客户端 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式读取内容</title>
</head>
<body>
<p id="content">接收数据流流==></p>
</body>
<script>
async function getRes() {
const res = await fetch(`http://127.0.0.1:8080/test_stream`,{
method: "get",
});
const reader = res.body.getReader();
const decoder = new TextDecoder();
let content=document.getElementById('content');
while(1) {
// 读取数据流的第一块数据，done表示数据流是否完成，value表示当前的数
const {done, value} = await reader.read();
if (done) {
console.log(`done?===>`, done);
break;
}
let text = decoder.decode(value);
// 打印文本内容
console.log(text, done);
content.innerHTML = content.innerHTML +text
}
}
function loopf() {
getRes(). catch((er)=>{
console.log('捕获错误:'+er);
loopf();
})
} ;
loopf();
</script>
</html>
服务端(GO):
package main
import (
"fmt"
"net/http"
"time"
"github.com/gin-gonic/gin"
)
func main() {
r := gin.Default()
r.Match([]string{"POST", "GET"}, "/test_stream", func(c *gin.Context) {
w := c.Writer
header := w.Header()
header.Set("Content-Type", "text/html")
// header.Set("content-type", "text/json")
header.Set("charset", "utf-8")
header.Set("Access-Control-Allow-Origin", "*")
//header.Set("Access-Control-Allow-Headers", "*")
//header.Set("Access-Control-Allow-Methods", "*")
w.WriteHeader(http.StatusOK)
w.Write([]byte(`
<html>
<body>
`))
w.(http.Flusher).Flush()
// 这里对每次循环输出都进行Flush刷新输出
for i := 0; i < 20; i++ {
w.Write([]byte(fmt.Sprintf(`
<p>%d</p>
`, i)))
w.(http.Flusher).Flush()
time.Sleep(1 * time.Second)
}
w.Write([]byte(`
</body>
</html>
`))
w.(http.Flusher).Flush()
})
r.Run("127.0.0.1:8080") /*visit http://127.0.0.1:8080/test_stream */
}
