求助大佬 vue php fetch 怎么样才能实时同步返回结果？

勤勤学长

[PHP] 纯文本查看 复制代码

<?php
// 设置页面不缓存
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
header('X-Accel-Buffering: no');

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:*');
header('Access-Control-Allow-Headers:Content-Type,Content-Length, Authorization, Accept,X-Requested-With,Access-Toke');

// 开启输出缓冲
ob_start();


for ($i = 0; $i < 3; $i++) {
    $data = [
        'ctime' => time(),
        'value' => $i
    ];
    echo 'data: ' . json_encode($data, JSON_UNESCAPED_UNICODE) . "\n\n";
    // 刷新输出缓冲并立即发送数据到客户端
    ob_flush();
    flush();

    sleep(3);
}

// 关闭输出缓冲并且刷出（发送）缓冲区内容
ob_end_flush();
?>

[JavaScript] 纯文本查看 复制代码

<template>
  <div>
    <button @click="startFetch">开始请求</button>
  </div>
</template>

<script>
export default {
  methods: {
    startFetch () {
      // 使用 Fetch API 发起请求
      fetch('http://192.168.1.25:2012/test2.php')
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          // 返回一个可读流并实时处理数据
          const stream = response.body.getReader()
          const decoder = new TextDecoder()
          return new ReadableStream({
            start (controller) {
              // 读取并处理服务器发送的数据
              const read = () => {
                stream.read().then(({ done, value }) => {
                  if (done) {
                    controller.close()
                    return
                  }
                  const message = decoder.decode(value, { stream: true })
                  console.log('message', message)

                  // 继续读取下一条消息
                  read() // 递归调用自身以持续读取数据
                })
              }
              read()
            }
          })
        })
        .catch(error => {
          console.error('Fetch 请求发生错误：', error)
        })
    }
  }
}

</script>

前端代码中console.log('message', message)输出了全部。我想要的是，同步实时输出。不知道怎么实现。测试了很多遍了。ai也问了很多遍了。

brightwill

想实现这种功能你得用websocket,后端起个websocket服务

hc3w

服务端只要记录的是一次输出，不需要SLEEP，也不需要缓存输出，你不会有大量的数据吧？

主要在于你JS端的请求，需要设置一个定时器，比如3秒请求一次即可完成。 不建议设置太短。 因为请求本身往往会因为超时，需要增加验正，否则会丢失数据。

建议你请求时增加一个ID 或者标记，确保请求数据的准确且不丢数据。

steven026

https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream

[JavaScript] 纯文本查看 复制代码

const response = await fetch("http://192.168.1.25:2012/test2.php");

// Iterate response.body (a ReadableStream) asynchronously
for await (const chunk of response.body) {
  // Do something with each chunk
  console.log('message', chunk)
}