如何在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>