Using WebSockets With SvelteKit

Learn how to use a custom SvelteKit server for WebSockets.

👉️ Support:

YouTube Membership

Patreon

👉️ Links:

Using WebSockets With SvelteKit

Svelte For Beginners

SvelteKit For Beginners

👉️ List of what I use:

👉️ Socials:

👉️ Music:

Music by "CrazyJaZz - Happiness"

🔖 Timestamps

0:00 Using WebSockets With SvelteKit
1:35 WebSockets For Development Using a Vite Plugin
5:36 WebSockets For Production Using a Custom Express Server

#sveltekit #websockets #joyofcode

[JoyofCodeDev]

Hey friends! 👋

It's your friendly neighborhood Svelte-Man.

[kmaximoff]

If anyone stuck and confused follow instructions on his website, rather than video. He uses Vite config instead of Svlete config.

[lilbean]

Thanks so much for this, had issues figuring it out myself.

[uopb]

Great timing. I was getting this to work with vite last week but had not figured out how to make it work for production.

Here’s a question that might be useful: how would you go about if you wanted to use page endpoints to trigger socket updates? lets say i wanted to do some updates to some data with page endpoints but use sockets to propagate the content in real time for example a chat app.

[goofedupho]

Hey, I have a websocket built using gorilla/websocket in golang up and running. When I try and connect to it through the default WebSocket API, my connection always fails. I've tried many things but the issue is still there. Could you maybe tell me what is wrong? Do I need to setup config settings? Pretty new to Sveltekit so I must not have. Thanks. Btw the server is working fine with my other apps.

[askeladden]

is there a way to deploy a sveltekit project using websockets on vercel, netlify or any other platform?

[nicholassingh]

hey can you do a video showing us the most appropriate way to send a data to and endpoint via post request?

[ricko]

im here just because of the thumbnail lol

[mendodev]

Great tutorial! Thanks so much for sharing!

Is it possible register sockets using the Vercel adapter? I'm not too familiar with sockets so I'm not sure if there are any restrictions regarding keeping connections open.

[alexvass]

So websockets in svelte is similar to the 'rpc' in electronjs? A emitter and receiver of signals within an app?

[foodieconfession]

I'm getting an error from vite regarding the plugins : vite : {
Plugins : [webSocketServer],
}
When I remove it, vite starts. My code is the same exactly as in your blog entry on joy of code page.
Did anything change lately?

[EladYosha]

I neede to use Microsoft SignalR, which works on web sockets, there is a good library for it on npm.
I managed to connect and return data from SignalR server.
I also posted about it on discord channel in questions part of joy of code

[heMech]

What's your vscode/vscodium theme, I really like how stuff like arrow and equals are one symbol

[ryanchew]

I'm trying to deploy a new sveltekit app using vercel with websockets, I can get it working in dev, but not in production.

I'm getting this error, which the only fix I found online was to use adapter-auto instead of adapter-node, but you said that is required to get this to work.

Error: No Output Directory named "public" found after the Build completed. You can configure the Output Directory in your Project Settings.

Is there anything else I can do to prevent this issue and actually have the sockets run in production?

[scott_itall]

So you are forced to run 2 servers when having realtime features within your app?

[mshuman]

Have there been any updates since this was made? Is there native support now?

[wojciechbajon]

As for me, the tutorial ended too quickly. I need an example of how to write WS code for dev and production in one place.
And it would be nice to have an example of how to organize with big anout of code. When I look at my express application and compare it with SvelteKit routing... Shame on me. xD

[mohammedaslam]

The only thing svelte is missing is jsx. This makes it a lot easier.

[winnemucca-sk]

@JoyOfCode I cannot get past `Failed to load resource: net::ERR_CONNECTION_REFUSED`. Everything else has been simple enough to follow.