如何在 Sveltekit 服务器加载函数中响应流

Question

下面，当我收到股票更新时，我尝试用流进行响应。

+页面.server.js：

import YahooFinanceTicker from "yahoo-finance-ticker";

const ticker = new YahooFinanceTicker();
const tickerListener = await ticker.subscribe(["BTC-USD"])

const stream = new ReadableStream({
  start(controller) {
    tickerListener.on("ticker", (ticker) => {
      console.log(ticker.price);
      controller.enqueue(ticker.price);
    });
  }
}); 

export async function load() {

    return response????
};

注意：YahooFinanceTicker 无法在浏览器中运行。

如何在 Sveltekit 加载函数中处理/设置响应。

Answer 1

解决方案：HB 评论向我展示了向客户端推送未经请求的价格更新的正确方向。

API 路线：yahoo-finance-ticker+server.js

import YahooFinanceTicker from "yahoo-finance-ticker";

const ticker = new YahooFinanceTicker();
const tickerListener = await ticker.subscribe(["BTC-USD"])

/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
  const ac = new AbortController();

  console.log("GET api: yahoo-finance-ticker")
  const stream = new ReadableStream({
    start(controller) {
      tickerListener.on("ticker", (ticker) => {
        console.log(ticker.price);
        controller.enqueue(String(ticker.price));
      }, { signal: ac.signal });
    },
    cancel() {
      console.log("cancel and abort");
      ac.abort();
    },
  })

  return new Response(stream, {
    headers: {
      'content-type': 'text/event-stream',
    }
  });
}

页面路由：+page.svelte

<script>
  let result = "";

  async function getStream() {
    const response = await fetch("/api/yahoo-finance-ticker");
    const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
    while (true) {
      const { value, done } = await reader.read();
      console.log("resp", done, value);
      if (done) break;
      result += `${value}<br>`;
    }
  }

  getStream();
</script>

<section>
  <p>{@html result}</p>
</section>

Answer 2

据我所知，这些load函数不能用于此目的，因为它们的响应是 JS/JSON 序列化的。您可以使用端点 in+server返回一个Response可以从 构造的对象ReadableStream。