时间戳

首页 > 解决方案 > 如何在 Vue.js 应用程序中显示 HTTP 流

node.js - 如何在 Vue.js 应用程序中显示 HTTP 流

问题描述

我有一个 nodejs 应用程序，它通过端点提供 HTTP 流，比方说 /api/logs/{id}。现在，我有一个使用 Vue.js 的前端 Web 应用程序，我想使用该流端点。我怎么做最简单？

该流是“无尽的”http 流。

奖励：如何将多个此流合并到一个视图中？

nodejs 应用程序中的代码，以将流带出。流本身来自 dockerode。

exports.read_containerlogs = function (req, res) {
var container = docker.getContainer(req.params.containerid);

container.attach({stream: true, stdout: true, stderr: true}, function (err, stream) {
    res.writeHead(200, { 'Content-Type': 'text/html' })
    stream.pipe(res);
});

};

标签： node.jsvue.jsstream

解决方案

我按照这个文档在前端处理流： https ://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

fetch('/apiURL')
.then(response=> {
   const reader = reader.body.getReader()
   let data = []
   return reader.read().then(read = (result)=>{
     if(result.done){
       return data
     }

     data.push(result.value)
     return reader.read().then(read)
   })
})
.then(data => {
   // Do whatever you want with your data
})

推荐阅读