SvelteKit服务端设置Store并保持响应性的解决方法

我正在构建一个通过setInterval回调在服务端修改数据的程序，理想场景是服务端间歇性检查数据并存入缓存，供前端组件在浏览器中展示。目前我的+server.ts文件按间隔修改数据并更新至Store，控制台也有日志输出，但前端无法感知到变化，怀疑与上下文有关。

相关代码如下：

stores.js #

export const colorMachine = writable();

+page.svelte #

<script>
    import { colorMachine } from "$lib/utils/store.js";
    import { onMount } from 'svelte';
    
    onMount(async () => {
        const machine = await fetch('/api/machine/');
        const newColor = await machine.json();
        colorMachine.set(newColor);
    });
</script>
{$colorMachine}

/api/machine/+server.ts #

import { json as json$1 } from '@sveltejs/kit';
import { colorMachine } from "$lib/utils/store.js";

let colors = ['red','green','yellow','purple','blue'];

/** @type {import('./$types').RequestHandler} */
export function GET({ params }) {
    startLoop();
    return json$1(colors[0]);
}

function startLoop() {
setInterval(looper, 8000);
}

async function looper () {
    const random = Math.random() * 4;
    const rounded = Math.round(random);
    
    const newColor = colors[rounded];
    
    colorMachine.set(newColor);
    
    let countValue;
    colorMachine.subscribe(value => {
        countValue = value;
    });
    
    console.log(countValue)
}

初始的onMount中的fetch请求没有问题，问题出在本应重置Store变量的循环函数上，请问有什么解决思路？

核心问题：服务端与客户端的Store实例不共享 #

SvelteKit的服务端（Node.js环境）和客户端（浏览器环境）是完全隔离的上下文，你导入的colorMachine在服务端和前端各是一个独立实例。服务端setInterval里修改的是服务端的Store，前端的Store根本感知不到这个变化，这就是问题的根源。

具体解决方案 #

方案1：使用Server-Sent Events（SSE）实现服务端主动推送

SSE是服务端向前端单向推送数据的标准方案，适合这种定时更新的场景：

1. 修改/api/machine/+server.ts，改成返回SSE流：

import { colorMachine } from "$lib/utils/store.js";

let colors = ['red','green','yellow','purple','blue'];
let intervalId: NodeJS.Timeout | null = null;

export function GET({ request }) {
    // 创建SSE响应流
    const stream = new ReadableStream({
        start(controller) {
            // 发送初始颜色
            controller.enqueue(`data: ${JSON.stringify(colors[0])}\n\n`);
            
            // 启动定时更新推送
            intervalId = setInterval(() => {
                const random = Math.random() * 4;
                const rounded = Math.round(random);
                const newColor = colors[rounded];
                
                // 推送新颜色到前端
                controller.enqueue(`data: ${JSON.stringify(newColor)}\n\n`);
                console.log('推送颜色:', newColor);
            }, 8000);
            
            // 监听连接关闭，清理定时器
            request.signal.addEventListener('abort', () => {
                if (intervalId) clearInterval(intervalId);
                controller.close();
            });
        }
    });

    return new Response(stream, {
        headers: {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive'
        }
    });
}

2. 修改+page.svelte，监听SSE流并更新Store：

<script>
    import { colorMachine } from "$lib/utils/store.js";
    import { onMount, onDestroy } from 'svelte';
    
    let eventSource: EventSource | null = null;
    
    onMount(() => {
        // 建立SSE连接
        eventSource = new EventSource('/api/machine/');
        
        eventSource.onmessage = (event) => {
            const newColor = JSON.parse(event.data);
            colorMachine.set(newColor);
        };
        
        eventSource.onerror = (error) => {
            console.error('SSE连接出错:', error);
            eventSource?.close();
        };
    });
    
    onDestroy(() => {
        // 页面销毁时关闭SSE连接
        eventSource?.close();
    });
</script>
{$colorMachine}

方案2：前端定时轮询API

如果不想用SSE，也可以让前端定时调用API获取最新数据：
修改+page.svelte：

<script>
    import { colorMachine } from "$lib/utils/store.js";
    import { onMount, onDestroy } from 'svelte';
    
    let intervalId: number | null = null;
    
    async function fetchColor() {
        const res = await fetch('/api/machine/latest');
        const newColor = await res.json();
        colorMachine.set(newColor);
    }
    
    onMount(async () => {
        // 初始获取
        await fetchColor();
        // 定时轮询
        intervalId = setInterval(fetchColor, 8000);
    });
    
    onDestroy(() => {
        if (intervalId) clearInterval(intervalId);
    });
</script>
{$colorMachine}

新增/api/machine/latest/+server.ts返回最新颜色：

import { json } from '@sveltejs/kit';

let colors = ['red','green','yellow','purple','blue'];
let currentColor = colors[0];

// 启动定时更新颜色的循环
setInterval(() => {
    const random = Math.random() * 4;
    const rounded = Math.round(random);
    currentColor = colors[rounded];
    console.log('更新颜色:', currentColor);
}, 8000);

export function GET() {
    return json(currentColor);
}

方案3：使用WebSocket（双向通信）

如果需要双向交互，WebSocket是更好的选择，但实现稍复杂，适合需要前端给服务端发指令的场景。

关键注意事项 #

• 服务端的内存状态（比如currentColor）在多实例部署时存在一致性问题，生产环境建议用Redis等共享缓存存储状态。
• SSE和WebSocket需要服务器支持长连接，部署时要注意配置反向代理（如Nginx）的超时时间。

内容的提问来源于stack exchange，提问作者rivero17