如何在 svelte 中访问 websocket？

Question

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


</script>

我正在尝试将 svelte 连接到 fastapi 后端，但使用 svelte 套件时出现此错误。我明白了

WebSocket is not defined
ReferenceError: WebSocket is not defined

错误。

我该如何解决它？

Answer 1

WebSocket是客户端特定功能，您必须确保此代码仅在浏览器中执行（默认情况下，脚本部分在服务器和客户端上执行）

您可以执行以下操作

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

仅在浏览器中运行，因此这onMount将是添加此代码的理想位置，请记住在必要时在销毁时清理侦听器。

Answer 2

SvelteKit 使用 SSR（服务器端渲染）进行初始加载，导致出现问题。“onMount”工作正常，但仅在组件中可用。

该解决方案适用于更多情况：

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

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