#1 Websocket [Real time Chat app with Golang + HTMX]

well today I'm going to start a new series that's building a realtime chart application with goang Echo gorilla web soet and HTM X well there might be other tools um but these are the three core ones that um learning and do the sharing on well um I've already started the project repos three like the basic one where we have a m MoGo file in charge of starting the echo server and all this and then I have CSS this is the twin CSS and dto so this dto will be having all the data structure that we have along the way custom fonts templates so all the HTML will go to here and I'm using the goang temper framework so the syntax is that it looks like this so it's like a temper function where I can put the HTML teag in and also some goaling functions along the way I have the a.mo for running the hot reload um for the goling server I have Mech file so Mech file essentially this is copyed from another project and the things I will be using is just this CSS watch so CSS watch it helps in generating the output. CSS um from the Tailwind so there was select like the CSS that have used and then popular output of CSS so that my code has the excuse me has the style and I'll put this GitHub repository in a in a public repository so that you can copy over the entire template and also follow me along the way of the process and without further Ado let's get started right so looking at we have already got the M.O file um ready here the first step step is I want to build a UI first but I'm missing a file so I'm going to open it out the to-do app that I've used last time and copy my twin. config.js this why I forgot to do during my setup just now oh um so I call this a twin. config.js and past it here so this will tell the TN that when you are exporting the output CSS remember to refer to the folders that specified so whatever changes put it in make sure that they in um I will have a folder call components also I just put in in case right so now we've done that I'm using yubu as well so it's very fast like the server runs super fast he oh I've already got the server running okay so here I'm running the mech CSS dwatch so that I can generate the output. CSS without restarting the command and on the right hand side I have a so that I can run my server Whenever there are changes they will also rebuild and rerun the server for me so I can just reload the website browser then uh the new changes will be there already right with the preparations done here I'm going to will do a bit of UI so let me reload it okay now my main page is not supported yet because I'm throwing error haven't started anything yet okay just remove this all right so we have the Goen htms chart chart app uh in our index template template we have the twin CSS output we also have HTM Max so HDMX um there is also an extension called multis swap that's used for swapping multiple elements we may not use it but I'm just uh putting it in just in case we also need another extension called the web socket set doj wsjs this is the hmx web soet plug in okay um guess these two are the things that we need and then uh from here let me just check if I can render the men go file already so when user go into slash I want it to trigger the templates do index file and write it to our response writer so if we reload this page we can see the HTM X golden htms chart now it's completely black because I put it black color and I want it to be uh okay so I want to go for TN CSS a bit to find out my documentation and quick search on the mean height okay how on this mean hch screen so just now I noticed that um H screen will cause my my page to overload so I cannot use that okay so our code is very simple it's a black color thingy because um I've added the uh background black from tawin and I Center align everything the next thing I'm going to do is um the center here so this is my uh sort of like my container page where I can have the all the content in the middle and align well uh with a maximum height of sorry maximum width of Max um 2XL 2XL I think is a 600 something right I don't recall that but basically just a squeezing everything in the center and here I want to render my chart list okay so the chat list is going to be a white color thingy actually don't need uh don't need to be white color I can add in uh okay for today right um probably I'm not going to focus too much on the UI I'm I'm going to focus on the logic the so logic um and then from here it's going to be message. temper and copy the entire thingy package is components and here will be our message this is the message diff that I'm going to use it later so message is a string type and it's going to be very very simple just a p the inside have a class equal to text white color and then um the message in a Content the P content and our index. Tempo is going to add in like bunch of components Dot message welome to HTM X okay right we have welcome to hmx now oh because just now I put the mean height screen um oh it's a m it's not mean relo again okay so this is how it looks like we have a p very simple p and then it will render the list of contents but I want it to align Center as well with a gap of say uh 24 pixels okay um no no no every file I probably I don't need a 24 pixel I just make it um this uh 16 pixel will do 446 okay so we have welcome to hmx um all right the G is very huge but because that that's because I put it very large if you make it smaller then uh it'll be smaller okay okay I mean the zoom okay so now we have got the messages component ready and the index temper ready I'm going to connect to the web soet but before that um definitely we need to set up the web soet in aore so aore I'm using this thing called uh gorilla server gorilla web soet reason being I don't know if this is true or not it's just that um from the internet I found that this is the more recommended one over the boiler plate provided by uh aore on the net web soet so basically I'm going to use the gorilla web soet and copy over the function they use to initialize the web soet server so it's pretty simple just copy a code copy paste only so this is the uh what we call this as joint chart okay I will move this to another F another file if the logic gets very big but now I'm just going to put it like keep it inside a the same file as a main. go and then make it a private function okay so we got the upgrader already and all this it's mentioned that the Cod is unused so I don't know why is it unused it should be used already but just going to put in e doget hello like this so join chart is going to be slash um web soet SL chart okay so my entry point for the code is um /ws chart and it's going to invoke a joint chart function that is going to in up first of all upgrade the uh communication um I don't what why is it upgrading to but oh yeah you upgrade the HTTP server connection to the web soet protocol and then uh from here is a infinite Loop you keep writing a message and keep reading a message but I do not want to do it ifin Loop like this I'm just going to send a bite first and then uh after sending it wait for a while sleep for a duration uh prob second time 10 so it's a 10 seconds every 10 seconds Um send a hello client message to the fly inside and this is a infinite Loop so essentially any connection that come to Joint chart will keep looping inside the for loop I figure out how to do how to improve the like keep alive because if I don't do a infinite Lo right every time the user join the chat it will get disc disconnected as soon as um the router logic has has ended so I don't want to end just keep it looping but definitely I feel that will be a better way of doing things aside from using a time do sleep but there a story afterwards but today I'm just going to focus on this um the logic of sending message to the client okay so I have a joint chart ready now um the set up from the back side I think is already done just that for the front end right for front end I need to initiate the web soet connection so that the client can connect to the back end and receive and communicate with the backend with sockets it's also very simple um basically they code here already first is in my main container I'm going to add in the extension from HTM X so hxw s uh and then the web soet connect is /ws chat okay so this is done and we have a division to contain all the okay so basically right I'm going to put this in the external container and the internal one is going to receive uh messages so it's called the ID is called chart room so this chart room section is going to receive a message and add in message messages along the way where it receives a new one okay so that's the idea I'm going to check if there's anything wrong with my application so you can see that um nothing has changed basically the exact same messages have been right um shown on the screen but if you go to the network right you reload it you can see the chart that is a socket connection has been initiated with between the client and the server and this is when you click click the network and click the record right you can see that every 10 seconds you receive the message from the B call hello client and then the front side the only thing you need to do is need to swap the components I mean like display the messages that sent by uh the B end on the screen okay so that's how the real time application is being built and one more thing about web soet R for the the um web extension by hmx it actually has a retry mechanism that grows exponentially so for example if the first time they lost connection they'll try to um they try to reconnect within a short period of time but as the fail re attempts increasing it will get slower and slower for the interval for the next retry and afterwards it will be like very very long time for it to reconnect back because um of the logic and there's actually way to resolve this but it's not the key thing and I feel that the exponential retry mechanism is good enough because it will retry yeah and it won't retry if it the same thing keeps failing okay so coming back um now we got the messages from the B already uh we got the receiving messages from web soet section in the HTM X documentation where it tells you that oh it will pass the data sent down by the web soet and pass it as a HTML and swap in with the ID property same logic as out of band swaps so out of band swaps is actually um I mean like when when we uh mention about swapping it means that we exchange or we modify the components the HTML elements with a new HTML data that's all and um what I want to do now is that um I want to check the message right because we adding this message right I want the um the behavior to be when we see the the front end right the behavior is that um if we do like normal swapping right it will exchange the element that we already have with a new element but this behavior is not the thing I want like welcome to hmx this thing I want to keep the section divider also I want to keep I just want to append it at the bottom every time the new message comes so what I need to do is that I need to okay first thing is men. go instead of sending the message as bite like the string bite it has to be in a HTML but bite okay it's actually very simple to do because of the goang the The Temper framework so component or I call this a library but anyway um equals to this components do message hello client okay so this is the component it will uh is auto automatically generated one if you want to know more about temper you can watch my previous video on the getting start with HTM X and go right so it basically in instantiate one HTML element with the data of hello client and then from here I'm going to write um to prepare a buffer that I can send it so buffer is a it means a uh you can think it as a as a structure that can be done converted into a bite um afterwards so render it with a context. background and then the writer will be okay um sorry buffer is uh for [Music] already goang buffer right there okay by subject blah blah blah okay so this is from AO I think I need to find the documentation for oh here so it's called B stop buffer so this is The Temper documentation we can use a component that is rendered by The Temper engine into a standard output like the console log or S string or even as this um buffer types so I can Co to string afterwards so coming back to the thing the syntaxes should be like this uh okay hopefully it works okay now I have the buffer already um component do render component. render context. background and then the buffer right here okay so this is um how we write the HTML into the buffer and then buffer will contain will not contain the message the HTML message I'm just going to send instead of the hello client it becomes the buffer dob that is all okay so basically um in action I think it's easier for you to see the changes right uh oh okay so this now you can see that um the soet connection right you you will you will return back a string of this u p class equals to text white hello client HTML element then this element can then be used by HTM X to do the swapping so swapping is on the client side now I have The message. Temper being returned every time it um the the band triggers a hello client response the right message function now I want to specify where I want to put the item in and from here it's going to be uh using this hash swap oob um attribute so this one um I'm also not wor familiar but um any valid HH swap so hash swap value is actually the um the position like inner hash HTML after uh after HTML Etc and it controls where we want to put the HTML element so I think from the here it it should be the before end so it will insert my HTML element after the last CH of the target element which is I want to put it right here uh okay sorry #x swap oh OB equal to it's going to be any value H Val followed by the messages uh sorry chat room ID so it will go to find my chat room um chat room ID which is the this chart room and then it will attempt to add it before and before the this ID chat room ends meaning that it will pan to the bottom B uh here I think this is all the things I I I need to do to do the swapping let's see if that does the magic reload and hopefully does the work right uh wait a minute oh it okay okay hey uh text isn't um the text white isn't looted in our CSS so this is the CSS related issue where we need to MD cat and see if that works uh it adds the data in that's true hey the hello client is not um the data is populated but it doesn't have any uh any style actually it's a very very strange because I do pass in the p uh hello client all this maybe I'm just going to change it with the entire message inside like this so and then this is not going to do a swapping I don't to do a swapping in the inside but just we okay let's try again hopefully it works now uh why is there a huge G uh where's my okay uh swap is going to swap the before and with leave swap the P he okay let's see if that H anything that I miss let's restart the server just in case okay boom [Music] mhm I wonder why is this um has swap OB before oh because index. temper has the messages and uh okay cannot I can this let me check again how to do this basically it does one just it doesn't it doesn't add in the the the P in um that's actually very strange but anyway um for the day right I I'll solve this afterwards to keep this video shorter without seeing me um keep debugging it uh the idea is there already where I will every time uh when there's a data swap in oh actually I may not the reason uh no I don't know the reason it's a text message right reading the buffer and then the messages hello client entire components okay how [Music] about how about binary message h no okay although I feel like solving this but it's okay I'll keep this um to the next stage next stage section about what what's happening in my code and see how can I solve this but this is the idea as in the communication with htx is via HTML the same be it a HT HTTP communication or a web soare communication is still the same thing um communicate via HTML that is the key towards um building any sort of application including a real time app after this um because this is a one-sided communication where server keep pumping in the data to the front end which is not the case for normal chart or messaging app server needs to have the capability for the client to send message and to react based on the message that's been sent by the client be it broadcasting to the other active clients or other things we will see um how it goes after this right thanks see you

Channel: JXiong's Dev Diary

Views: 8,888

Keywords:

Id: dec3jr5RBFQ

Length: 27min 8sec (1628 seconds)

Published: Sat Nov 11 2023