WebSockets are one the best ways to create dynamic frontend applications, they provide two-way communication between a browser and the website's server in a single connection. They were released in 2011 and browsers fully implemented the standard by a few years later. They differ from the regular HTTP protocol, which is request and response based. Prior to them becoming available you had a few options, one of which was to use a method over HTTP called long polling. In a nutshell long polling does this: the browser initiates a request and the server lets the request stay open until an event occurs on the backend or the request times out after so many seconds. Then the server immediately opens another request and asynchronously proceeds to handle the event returned by the server if one occurs. This is still a valid method to create dynamic frontends that respond to the backend in real time, but I think WebSockets are a more holistic solution.
Using WebSockets with SvelteKit comes with a bit of a challenge, it isn't natively supported (but may be in the future, so everything below may change). Thankfully we can easily integrate with them because of SvelteKits flexibility in deployment methods, we can deploy a WebSocket server alongside our application using @sveltejs/adapter-node, this flexibility is one of the reasons I love and prefer SvelteKit. We also can set up the same server in Vite during development. This set up almost feels native once complete! In this article I will share the code snippets you need and where to add them in your existing application.
Prerequisites
- You need to have a SvelteKit application ready to go, you can see how to do that on the official documentation website here
- The examples will be using TypeScript, so make sure you select that option when you create your app
- You need a basic understanding of node
- You need an understanding of deploying SvelteKit with node server, you can read about it here
- Specifically, I will be using express for my node server, you can substitute another one if you'd like, so you need understanding of express
Step 1 - Install Libraries
Install the following libraries in your SvelteKit app:
The main library we're going to be using to implement WebSockets is Socket.IO, and its very easy to get going with! This also makes sure you have the correct adapter for node and express, just so you have the ability to following along.
Step 2 - Implement WebSocket Server
There's a number of ways you could probably do this, but I like to keep everything organized in my src/lib folder (which should already exist for your SvelteKit app). Create a file at the path <app directory>/src/lib/websockets/start-websocket-server.ts and add this code to it:
Super simple code here, we are just creating a WebSocket server and exporting the bootstrapping where your events can be listened for. We want to make this a separate function so the server can used in the dev environment and also in our production build.
Side note: you may notice that I left httpServer as type any. You'll see in the next step we pass in the Vite server as an argument, I basically didn't think it was necessary to reconcile the Vite dev server type with the Socket.IO argument type in this article. But this is just the node http server type, you can look into on the Socket.IO official documentation here.
Step 3 - Set Up the Development Server
We'll set this up so everything works in development. To do that we need to create a simple Vite plugin, first create another file at the path <app directory>/src/lib/websockets/dev-server.ts:
The file above is intentionally left outside of the start-websockets-server.ts file because we'll compile this and use it in our production build below in the next step.
Next you'll want to add this exported file to vite.config.ts:
In this file we are importing the Vite plugin that we created above, you can see that we aren't using the path prefix $lib, which is provided by SvelteKit. Our WebSockets server has to be started outside of the context of the framework, this is one of the drawbacks of not having a native implementation. Also this means that things like the handy environment variable tools it comes with aren't necessarily available in start-websockets-server.ts either, at least with this implementation.
Step 4 - Set Up the Production Server
Now we need to set up the WebSockets server in our production deployment, you'll need to make sure the start-websockets-server.ts file ends up in your build output so it can be referenced by the express server we create using the adapter-node file (Note: this is the way I did it and it seems to work, feel free to find a solution you feel comfortable with):
Disclaimer on the next file here, you can hook the built start-websocket-server.js file into any server that you prefer, the snippet below is just the way I handled it. Create a file at the root of your repo called server.js, and put the following code in it:
You'll see here that we import the startWebsocketServer function we created in step 2 above and run it along side our server. And that's it!
You'll need to make sure this server file gets included in your production build, I normally just copy it into a docker container and use it as the entrypoint for the container.
Step 5 - Connect On the Frontend
Below is an example of what it looks like on the frontend, it's very simple! And it will work in both dev and production:
Conclusion
And that's how you can build a SvelteKit app that uses WebSockets! Happy coding 👋