Using WebSockets With SvelteKit

hey friends welcome in this one we're going to learn how we can use web sockets with zeldkid this is a tutorial on using websockets and how they work but how to get it working in swell kit so you can work on your project like if you have a multiplayer game and etc in my use case i was working on an editor for jerk code and here on the right i'm using web sockets 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 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 so here i'm only using a normal circle project nothing special here i'm running the development server and on the side is the project and then let's go back to the post and i mentioned here this might change in the future and cell kit 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 so you can read more about this in the discussion here that i going to link in the post and then if you go here 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 so let me go back here i'm going to close this so another solution is to create a separate server but then you have to run two things on separate ports so let me show you how we can use swell kit instead so first we're going to explore how to do it in development which is simple we're going to write a simple lead plugin and hook into his development server it sounds complicated but it's really not if you can see here this is the example called this is the entire plugin almost right and yeah that's it there's more socket io code than vid to be honest with you so the only other thing you're going to need because this is a tutorial websockets i'm using socket io as an example which is a really awesome library so you don't have to worry about web sockets and you're going to need the swelt adapter node because it doesn't work without the swelt adapter node and you're going to learn why so we can close this so the first thing to make this work in development is go to the swell config and as i show this in this code you have to change this from adapter auto to node and then we can import server from socket io and then we're going to create our plugin so we can say export const websocket server which is an object let's give it a name socket server and then let's use configure server it gives us a server and we can say consio new server we're going to use the server and we're going to get the http server from it and if you're not sure where this is from this is from wheat and you can learn that from the documentation so yeah so we can use our websockets we can say on connection so in 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 so 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 web socket server and then we can save it but don't remember you have to read on 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 so let me just go to source routes here is our index file i just want to show you how it would look like on the client yeah so we can go here and we can say script language typescript and then we can import socket io on the client we can say io from socket io client const socket io let's invoke it and i'm going to say event from server again this isn't a web service tutorial but i just want to give you some helpful information and then we can log this out so if you're unsure with web sockets here is where we emitted this event from and our client should catch this so one thing we have to do is restart our development server so let me go here and you know me i'm always paranoid let me just start this up in pr dev and we should see the message here when we restart this and here it is hello world and that's awesome so now you have websockets working in development but the problem is how do you get it working in production which is the second step so if i go here in the post also before you go here let me just show you something awesome so if you have some reactive value and you need to emit it when a value changes you can just use a reactive block in swell kit which is really awesome so you can send the message to the server this way so just letting you know and let's go to the production so we're going to need express let me see if i already installed it yeah express which is awesome yes i think i can close this so let me explain why we need the node adapter so let me just stop the development server let me run vm run build if you're using npm the commands are the same so let me just show you the side here so you can see what's going on i'm going to collapse this pnp and run build and this should work so here you can see it created a build folder and here is the index and a handler js so we can create our own custom express server and we can pass it the handler as an express middleware so svelkit is going to take care of everything rest like the routing etc so we don't really have to run two servers right so that's what i explained here in the post so let's see how this works in practice so at the root of the project just because it's easier to include it in the script in a moment i've created a folder server so let's create server index js let me just collapse everything so again we're in the root server in the js but you can place it whatever you want or whatever your build step is right yes let me just close the terminal and let's just make our own little cute custom server right so you can see import express from express and don't worry if you don't understand back and i'm not the backend expert i just made this work and i'm showing it to you now right so create server from http this is our server that we previously passed from vtrite and then we're basically doing the same thing so we're saying server from socket io and here is the handler so we need to save from then we need to go to the build we need to get the handler and then we define port 3000 then we say app express then we create the server create a server pass the app and again same as before we say io new server server and then we can say i o on connection and then again we have the socket and we say socket emit event from server you can say hello world let me copy our emoji i actually have an emoji picker but if i would use it here it would mess with the recording so that's why i always copy the emojis if you're curious so here i even commented for you how this works and i link to the github repository where this code is so yeah so we can use the middleware app use and middleware in express is basically it intercepts the response and requests object and it changes it so basically swell kit is here like jesus he takes the wheel and we don't have to worry about anything else and then we say server listen port and then we save this and for the last step go to your package.json we're going to add a script so if we scroll down here you can see our scripts we can include a start script and say note yes we're just invoking it with nodewrite this is going to start the 12k development server and our websocket yeah so we can save this so let me just recap so we created a custom server by creating a custom express server that we're going to create a script here and start it so this starts instead of the one in the build because usually circuit would run this so here it describes the same thing and it shows you here how it works so let me just close this and i'm going to close the sidebar and for the moment of truth don't forget we have to run our server so you don't run npm route dev but now we have to execute our script which if you remember just start and we can just do that by saying start you don't have to say run so everything should work we're now in production and if i refresh this it works and also if you need to pass environment variables i have a post on using environment variables in silicate so that's it thanks for watching and catch you later

Channel: Joy of Code

Views: 18,933

Keywords: sveltekit, websockets, tutorial

Id: mAcKzdW5fR8

Length: 10min 0sec (600 seconds)

Published: Fri May 06 2022