SvelteKit中如何向客户端推送表单请求状态更新信息？

一、优先考虑 Server-Sent Events (SSE) #

这是最适配你需求的方案——单向服务器推送，无需复杂的连接管理，原生支持，和SvelteKit的表单流程兼容性好。

实现思路 #

放弃普通表单响应，改为返回SSE流，在处理任务的各个阶段向客户端发送状态事件；客户端通过EventSource监听这个流，接收实时状态更新。

代码示例 #

+page.server.ts

import type { Actions } from './$types';

export const actions = {
  default: async ({ request }) => {
    // 解析表单数据
    const formData = await request.formData();
    const input = formData.get('user-input') as string;

    // 创建可读流用于发送SSE事件
    const stream = new ReadableStream({
      async start(controller) {
        // 发送初始状态
        controller.enqueue(`data: {"message": "I'm processing your request!"}\n\n`);

        // 执行第一个耗时任务
        await processSomething(input);
        controller.enqueue(`data: {"message": "Thing 1 done!"}\n\n`);

        // 执行第二个耗时任务
        await processOtherThing(input);
        controller.enqueue(`data: {"message": "Thing 2 done!", "finished": true}\n\n`);

        // 关闭流
        controller.close();
      }
    });

    // 返回SSE响应头和流
    return new Response(stream, {
      headers: {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
      }
    });
  }
};

// 模拟耗时任务
async function processSomething(input: string) {
  await new Promise(resolve => setTimeout(resolve, 2000));
}

async function processOtherThing(input: string) {
  await new Promise(resolve => setTimeout(resolve, 2000));
}

+page.svelte

<script lang="ts">
  let statusMessages: string[] = [];
  let isProcessing = false;

  async function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
    isProcessing = true;
    statusMessages = [];

    const form = e.target as HTMLFormElement;
    const formData = new FormData(form);

    // 发送请求并监听SSE流
    const response = await fetch('/', {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'text/event-stream'
      }
    });

    if (!response.body) return;

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      // 解析SSE事件数据（可能包含多个事件）
      const events = chunk.split('\n\n').filter(Boolean);
      for (const event of events) {
        const dataMatch = event.match(/^data: (.*)$/m);
        if (dataMatch) {
          const parsed = JSON.parse(dataMatch[1]);
          statusMessages = [...statusMessages, parsed.message];
          if (parsed.finished) {
            isProcessing = false;
          }
        }
      }
    }
  }
</script>

<form on:submit={handleSubmit}>
  <input type="text" name="user-input" placeholder="输入信息" required />
  <button type="submit" disabled={isProcessing}>提交</button>
</form>

{#if isProcessing}
  <div class="status">
    {#each statusMessages as msg}
      <p>{msg}</p>
    {/each}
  </div>
{/if}

二、其他可选方案 #

• 轮询：客户端定期向服务器请求状态，实现最简单，但效率较低，适合极短周期的任务。比如提交表单后服务器生成唯一任务ID，客户端每隔1秒用该ID请求状态。
• 轻量WebSocket库：如果未来可能扩展双向通信，可以用ws这类原生WebSocket库，配合任务ID做定向推送——提交表单时生成唯一ID，客户端连接WebSocket时携带该ID，服务器仅向对应ID的连接发送消息，复杂度远低于socket.io。

三、投入价值评估 #

是否值得投入精力，核心看两个维度：

1. 任务耗时：如果任务耗时在5秒以内，用普通加载动画+静态提示（如"正在处理，请稍候"）足够，没必要做状态推送；如果耗时超过10秒，或任务明确分多个阶段，状态推送能有效减少用户焦虑，提升体验，值得实施。
2. 维护成本：SSE方案几乎不需要额外依赖，代码量少，后续维护成本极低；WebSocket方案需要额外管理连接和任务ID，维护成本稍高，但如果有未来扩展需求可提前考虑。

总体来说，SSE是当前需求下性价比最高的选择，投入少量精力就能实现预期功能，且体验提升明显。

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