如何在 sapper 的 svelte 组件中运行服务器发送的事件

Question

我有一个名为 [symbol].svelte 的 svelte 组件，我想在其中启动与流服务的连接以接收服务器发送的事件。我还没有找到成功做到这一点的方法。

由于 EventSource 仅在浏览器中运行，因此我在onMount函数中对其进行了初始化，如下所示：

<script>
    export let quote;

    let sse = {};

    onMount(async () => {
        sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
        sse.onmessage = (event) => {
            let response = JSON.parse(event.data);
            if(!response.length) return;
            quote = response[0];
        }
    });

    onDestroy(() => {
        if(sse.readyState && sse.readyState === 1) {
            sse.close();
        }
    })  
</script>

<div>{quote.symbol}</div>

这工作正常，除非我导航到使用相同组件的另一条路由 - 因为该组件不会卸载和重新安装，onMount()不会触发，因此不会实例化新的 SSE 请求。我不知道有什么方法可以轻松地强制组件重新安装，这将是最简单的（相关的github问题在这里）

另一种尝试是使用反应式语句，如下所示：

<script>
    export let quote;

    let sse = {};

    $: {
        if(process.browser === true) { //again, this stuff won't run on the server
            if(sse.readyState && sse.readyState === 1) {
                sse.close();
            }
            sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
        }
    }

    sse.onmessage = (event) => {
        let response = JSON.parse(event.data);
        quote = response[0];
        console.log(quote);
    }
</script>

<div>{quote.symbol}</div>

当改变路由时，quote变量发生改变，从而触发反应语句来杀死现有的SSE并实例化一个新的。除了 onmessage 处理程序不会触发，可能是因为 onmessage 处理程序在创建事件源对象之前附加。

最后一次尝试是在响应式语句中尝试使用 onmessage 处理程序，如下所示：

<script>
    export let quote;

    let sse = {};

    $: {
        if(process.browser === true) { //again, this stuff won't run on the server
            if(sse.readyState && sse.readyState === 1) {
                sse.close();
            }
            sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
            sse.onmessage = (event) => {
                let response = JSON.parse(event.data);
                quote = response[0];
                console.log(quote);
            }           
        }
    }
</script>

<div>{quote.symbol}</div>

这里的问题是，由于quote被重新分配为处理程序的产品onmessage，反应性语句不断循环触发。

此时我不知所措，任何意见将不胜感激！

Answer 1

听起来您想使用{#key ...}，这会导致其内容在值更改时被拆除并重新创建，包括组件：

{#key quote}
  <!-- destroyed and recreated whenever `quote` changes -->
  <Quote {quote}/>
{/key}

此处的文档： https: //svelte.dev/docs#key

onDestroy顺便说一句，如果仅用于清理发生在以下情况的工作，则无需使用onMount：

onMount(() => {
  const sse = new EventSource(`https://myurl.com?symbol=${quote.symbol}`);
  sse.onmessage = (event) => {
    let response = JSON.parse(event.data);
    if(!response.length) return;
      quote = response[0];
    }
  };

  return () => {
    if(sse.readyState === 1) {
      sse.close();
    }
  });
});  

这更好，因为你没有顶级sse变量，并且因为返回的清理函数只需要在浏览器中，所以你不需要占位符ssr = {}赋值或检查sse.readyState.