Using WebSockets With SvelteKit

Introduction and use case

Hey friends, welcome. In this one we're going to learn how we can use WebSockets with SvelteKit. This is a tutorial on using WebSockets and how they work, but how to get it working in SvelteKit so you can work on your project, like if you have a multiplayer game, etc. In my use case I was working on an editor for Jerk Code and here on the right I'm using WebSockets to have a live preview because what you see on the left gets sent to the server and it gets crunched in some markdown processing chain and then I get an output on the right, so I get a live update preview.

Problem and initial research

So that's my use case, but I ran into a problem: I couldn't figure out how to get WebSockets working. So I started digging around and I figured it out, so let me share that with you. Here I'm only using a normal SvelteKit project, nothing special. I'm running the development server and on the side is the project. In the post I mentioned this might change in the future and SvelteKit might have support for WebSockets natively, so it might be something like this if you're watching this in the future, but this doesn't exist yet unfortunately. You can read more about this in the discussion here that I am going to link in the post. If you go there you can see all this interesting discussion. Also thanks to Bob Fanger for giving me this helpful tip here how to make this work in development. Another solution is to create a separate server but then you have to run two things on separate ports. Let me show you how we can use SvelteKit instead. First we're going to explore how to do it in development, which is simple: we're going to write a simple Vite plugin and hook into its development server. It sounds complicated, but it's really not.

Vite plugin for development WebSockets

If you can see here this is the example called — this is the entire plugin, almost, right? There's more Socket.IO code than Vite to be honest with you. So the only other thing you're going to need, because this is a tutorial on WebSockets, I'm using Socket.IO as an example which is a really awesome library, so you don't have to worry about WebSockets, and you're going to need the Svelte adapter node because it doesn't work without the Svelte adapter node and you're going to learn why. So we can close this. The first thing to make this work in development is go to the Svelte config. As I show in this code you have to change this from adapter auto to node. Then we can import server from Socket.IO and then we're going to create our plugin. So we can say export const websocketServer which is an object. Let's give it a name: socketServer. Then let's use configureServer, it gives us a server, and we can say const io = new Server. We're going to use the server and we're going to get the http server from it. If you're not sure where this is from, this is from Vite and you can learn that from the documentation. So yeah, so we can use our WebSockets. We can say on connection, so on connects, say socket, and then we can say socket.emit 'event-from-server' because we're going to catch it on the client. You can say 'hello world'. Let me just copy over this emoji. Oops. Yeah, and that's almost it, so we just need to use the plugin. Here we can seek it — let me just close the terminal because, yeah. So we can save it. You should get auto completion. Plugins, and then we can say websocketServer, and then we can save it. But don't remember: you have to restart your server. But first let me just include the client code, and also if this gets out of hand you can just abstract this into a separate file, and that's it.

Client-side Socket.IO setup and testing

So let me just go to src/routes. Here is our index file. I just want to show you how it would look like on the client. So we can go here and we can say