How to access websocket in svelte?

Question

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


</script>

I am trying to connect my svelte to my fastapi backend but I am getting this error using svelte kit. I get

WebSocket is not defined
ReferenceError: WebSocket is not defined

error.

How can I fix it ?

I've tried the code and it works on my machine with Svelte running. — Haroun Hajem, Sep 13 '21 at 08:05
Is that code executed on the server (during server-side-rendering) or on the client? — Christian, Sep 13 '21 at 08:24

score 11 · Answer 1 · answered Sep 13 '21 at 09:04

WebSocket is a client side specific feature, you have to make sure this code is only executed in the browser (by default the script part is executed both on server and client)

You can do the following

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

the onMount is only run in the browser so this would be the ideal place to add this code, remember to clean up listeners on destroy if necessary.

score 5 · Answer 2 · answered Oct 06 '22 at 07:12

SvelteKit uses SSR (Server Side Rendering) for the initial load, resulting in your issue. "onMount" works fine, but is only available in components.

This solution is works in more situations:

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

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

How to access websocket in svelte?

2 Answers2

Linked