如何在SvelteKit中实现Server-Sent Events(SSE)？无需自定义Express服务器

替代方案：SvelteKit 内置API路由 #

SvelteKit本身就支持内置API端点，完全不需要额外搭建Express服务器。你只需要在项目的src/routes目录下创建+server.js（或.ts）文件就能定义API路由：

• 比如创建src/routes/api/data/+server.js，编写请求处理逻辑：

  export async function GET({ request }) {
    // 处理GET请求，返回数据
    return new Response(JSON.stringify({ message: 'Hello from SvelteKit API' }), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
  
  export async function POST({ request }) {
    // 处理POST请求，接收并处理数据
    const data = await request.json();
    // 这里可执行数据更新操作，比如写入数据库
    return new Response(JSON.stringify({ success: true, data }), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
  

这种方式完全基于SvelteKit内置功能，无需额外配置服务器。

数据变化时的实时更新解决办法 #

如果要实现数据变化时自动推送到客户端，有几种可行方案：

• 轮询结合load函数：在页面的+page.js里设置定时请求API端点，检查数据更新：

  export async function load({ fetch }) {
    const fetchData = async () => {
      const res = await fetch('/api/data');
      return res.json();
    };
    // 初始加载数据
    let data = await fetchData();
    // 定时轮询并触发页面更新
    setInterval(async () => {
      const newData = await fetchData();
      if (JSON.stringify(newData) !== JSON.stringify(data)) {
        data = newData;
        invalidateAll();
      }
    }, 2000);
    return { data };
  }
  

• WebSocket实时推送：无需Express，直接用Node.js的ws模块结合SvelteKit服务器钩子实现：
  1. 安装依赖：npm install ws
  2. 在src/hooks.server.js创建WebSocket服务器：

     import { WebSocketServer } from 'ws';
     
     export function handleServer(server) {
       const wss = new WebSocketServer({ server });
     
       wss.on('connection', (ws) => {
         ws.on('message', (message) => {
           // 广播更新消息给所有连接的客户端
           wss.clients.forEach((client) => {
             if (client.readyState === ws.OPEN) {
               client.send(message);
             }
           });
         });
       });
     }
     

  3. 客户端页面连接WebSocket并监听更新：

     <script>
       let ws;
       let data = {};
     
       onMount(() => {
         ws = new WebSocket(`ws://${window.location.host}`);
         ws.onmessage = (event) => {
           data = JSON.parse(event.data);
         };
       });
     
       onDestroy(() => {
         ws.close();
       });
     </script>
     
     <div>{JSON.stringify(data)}</div>
     

• Server-Sent Events (SSE)：轻量级单向实时推送方案，适合数据更新通知：
  在API端点创建SSE流：

  export async function GET({ request }) {
    const stream = new ReadableStream({
      async start(controller) {
        // 定时发送更新数据
        const interval = setInterval(() => {
          const data = { timestamp: Date.now(), value: Math.random() };
          controller.enqueue(`data: ${JSON.stringify(data)}\n\n`);
        }, 1000);
  
        // 连接关闭时清理定时器
        request.signal.addEventListener('abort', () => {
          clearInterval(interval);
          controller.close();
        });
      }
    });
  
    return new Response(stream, {
      headers: {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
      }
    });
  }
  

  客户端页面监听SSE：

  <script>
    let data = {};
  
    onMount(() => {
      const eventSource = new EventSource('/api/sse');
      eventSource.onmessage = (event) => {
        data = JSON.parse(event.data);
      };
  
      return () => eventSource.close();
    });
  </script>
  
  <div>Current value: {data.value}</div>
  

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