如何在SvelteKit（SSR）中配置Laravel Echo？

出现window is undefined是因为SSR服务端渲染阶段不存在浏览器的window对象，官方文档的代码是针对纯客户端环境编写的，直接在SSR项目中运行会报错。以下是几种可行的解决方案：

方案1：使用Svelte的onMount钩子（推荐） #

onMount是Svelte提供的生命周期函数，仅在客户端组件挂载时执行，天然避开服务端渲染阶段：

<script>
import { onMount } from 'svelte';
import Echo from 'laravel-echo';

onMount(() => {
    // 客户端环境下加载Pusher并初始化Echo
    const Pusher = require('pusher-js');
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: import.meta.env.VITE_PUSHER_APP_KEY, // 用环境变量存储密钥更安全
        wsHost: window.location.hostname,
        wsPort: 6001,
        forceTLS: false,
        disableStats: true,
    });
});
</script>

方案2：手动判断浏览器环境 #

如果不需要生命周期钩子，可以直接通过typeof window判断当前是否在客户端：

import Echo from 'laravel-echo';

if (typeof window !== 'undefined') {
    window.Pusher = require('pusher-js');
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: import.meta.env.VITE_PUSHER_APP_KEY,
        wsHost: window.location.hostname,
        wsPort: 6001,
        forceTLS: false,
        disableStats: true,
    });
}

方案3：SvelteKit专属方案 #

如果是SvelteKit项目，可以直接使用内置的browser变量判断客户端环境：

<script>
import { browser } from '$app/environment';
import Echo from 'laravel-echo';

if (browser) {
    const Pusher = require('pusher-js');
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: import.meta.env.VITE_PUSHER_APP_KEY,
        wsHost: window.location.hostname,
        wsPort: 6001,
        forceTLS: false,
        disableStats: true,
    });
}
</script>

注意事项 #

• 不要硬编码Pusher密钥，建议将密钥放在.env文件中，通过import.meta.env.VITE_*读取（需要以VITE_开头才能被Vite识别）。
• 初始化完成后，就可以在客户端组件中正常使用window.Echo监听事件了。

内容的提问来源于stack exchange，提问作者LJ S.A.