nodejs逐字读取文件示例
像chatpGPT显示文字一样.主要是服务器流式返回数据.前端用for await读取response.body
<button id="fetchjson" onclick="FetchJSON()">fetch json看console与network</button>
<button id="fetchstream" onclick="FetchStream()">fetch stream</button>
<div id="outputBox"></div><script>async function FetchJSON(){console.log('触发请求')
let response=await fetch('/json')
console.log('got response headersnow wating for the body')
let myObject=await response.json()
console.log('turned the JSON in an object')
console.log(myObject)}async function FetchStream(){outputBox.textContent=''let response=await fetch('/json')const decoder=new TextDecoder('utf-8')for await (const value of response.body){const chunk=decoder.decode(value)console.log('======chunk',chunk);outputBox.textContent+=chunk}}
</script>
const http = require('http');
const fs = require('fs');
const path = require('path');/** 创建一个服务器 */
const server = http.createServer((req, res) => {//serve HTMLif (req.method === 'GET' && req.url === '/') {const filePath = path.join(__dirname, 'index.html');fs.readFile(filePath, (err, data) => {res.writeHead(200, { 'Content-type': 'text/html' })res.end(data);});return}//serve JSON,but slowlyif (req.method === 'GET' && req.url === '/json') {res.writeHead(200, { 'Content-type': 'application/json' })//set up a readable streamconst filePath = path.join(__dirname, 'data.json')const stream = fs.createReadStream(filePath, { 'encoding': 'utf8' });//read the stream on byte (character) at a time and send it to the clientstream.on('readable', function () {const interval = setInterval(() => {const data = stream.read(2);
//这里的stream.read(1)如果填1的话,遇到中文传输一个字,遇到英文也是一个字母console.log('======data', data);if (data !== null) {res.write(data);} else {clearInterval(interval);res.end();}}, 2000);})return}
});
const PORT = 3000
server.listen(PORT, () => {console.log(`Server is listening on port ${PORT}`)
})
