SvelteKit使用WebSocket连接FastAPI报错未定义如何解决？

SvelteKit 默认开启服务端渲染（SSR），你的代码会先在 Node.js 服务端环境执行一遍，而 Node.js 原生没有浏览器端的 WebSocket API，因此触发未定义报错。

方案1：使用 onMount 生命周期（最推荐） #

onMount 是 Svelte 专属生命周期，只会在代码加载到浏览器客户端后执行，完全规避服务端执行逻辑。
代码修改如下：

<script>
import { onMount } from 'svelte'

let socket
onMount(() => {
    socket = new WebSocket("ws://localhost:8000/chat")
    socket.addEventListener("open", ()=> {
        console.log("Opened")
    })
    
    // 可选：组件销毁时关闭WebSocket连接，避免内存泄漏
    return () => socket.close()
})
</script>

方案2：判断浏览器环境再执行 #

如果你需要在其他时机而非组件挂载时初始化连接，可以通过 SvelteKit 提供的 browser 变量判断当前运行环境：

<script>
import { browser } from '$app/environment'

let socket
if (browser) {
    socket = new WebSocket("ws://localhost:8000/chat")
    socket.addEventListener("open", ()=> {
        console.log("Opened")
    })
}
</script>

方案3：禁用当前页面的SSR #

如果当前页面没有SEO需求、全是客户端专属逻辑，可以直接关闭页面的服务端渲染，一劳永逸解决所有浏览器API不存在的问题。
在同目录下的 +page.js（没有就新建一个）添加如下代码：

export const ssr = false

配置完成后你的原有代码无需修改即可正常运行。

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