Auto-generated transcript WebSockets. This video is going to be about how WebSockets work, where you should be using them, what the use cases of WebSockets are, and how to implement them. WebSockets are for when you want the client to be able to communicate with the server. They're kind of an upgrade of the HTTP protocol, which has a client-server architecture where the client can request updates from the server, but the server can't send requests to the client, right? WebSockets solves that problem. When you use WebSockets, you can have the client communicate with the server or the server communicate with the client. You can have any of it, right? Now, this is how the HTTP protocol works. Every single website you visit, the entire internet, right, is working on the HTTP protocol. And how this works is this is basically a request response kind of a protocol where the client over here, In this case, our browser is going to send a request to the server to get index.html, which is an HTML file. The server will respond with the response over here, which will be returns index.html. And then the browser will render it and show you the page, right? Similar thing over here. The client will send a request to the server to get the icon of the website. And the server will then respond to that request by returning the icon. So we have a client server architecture which was which is based on the request response cycle, right? The client sends a request the server returns a response if the client doesn't send a request over here if I didn't let's say if the client doesn't send a request for the Favicon over here then the server can't return it right the server won't be able to return it right because there's no request to respond to and that's the problem with http right the client always has to request an update from the server before the server can respond but when you have a situation like where where the client doesn't know whether an update has happened or not but still needs real-time communication between the client and server right let's say you're building some sort of an online messaging app right like whatsapp or discord or something if other people are sending messages to the server then your client your browser needs to be able to see those messages as well, right? So you can actually talk to people on the app. But how do you know whether new messages have arrived and you need to send requests to fetch those messages or not, right? That's the problem that WebSockets are going to solve This is how WebSocket protocol works It an event protocol which is the complete opposite of http which is a request response protocol right the client sends a request the server sends a response right websockets are based on events and the way events work is the client can send an event and the server can respond to it or the server can send an event and the client can respond to it and it's not necessary to respond back even it's a good practice but you don't even need to respond over here so for example over here the server is sending an event to the client the client doesn't respond back it doesn't need to the server sends another event to the client the client can send an inventory server and then the server sends two more events to the client so this is what websocket looks like you can have the clients communicating directly with the server and the server communicating directly with the clients without needing some sort of a request in between them you can have events you can have events and the server and the client both can send and receive events to and from each other and that's the beauty of websockets so in in in applications where you need real-time communication like some multiplayer gaming server for instance or an online messaging app or even just logging updates to a client right if you have some sort of a long running application process in the server and you want to make sure that the client gets notified of updates to that process you can use websockets for that the server can send events to the client and the and the client browser can then display those events to you the end user right now let's look at some of the code i have a very simple very minimal app written over here this is using python flask for the back end and it's using where is it it's using a simple native javascript on the browser on the client side to use web sockets and And let me just show you what this looks like. So you have an idea of WebSockets, of how WebSockets work and stuff, right? Let's run this and see what the app actually looks like. So this is what WebSockets look like in a real application. You can see I'm not sending any message over here, but the server is responding to me already with these events and these messages over here, right? I don't need to send a message, but I can, obviously. I can say hello or whatever, and it's going to respond back message received. and then it's going to keep sending its own events, right? That's the beauty of WebSockets. The server can directly communicate with the client, in this case my browser, without necessarily having to receive a request from said client right So that how WebSockets work They event which is a complete opposite of http which is request response based right and i not gonna go too deep into the code over here because because one every single developer over here is using their own tech stack most people are using node.js instead of python over here and also we live in 2026 guys ai is writing 90 of the code for us you don't need to know the syntax as much as you need to know concepts and how things work that is why i spent so much time that is why i spent so much time explaining the where is it the concept over here how web sockets work under the hood that is why i spent the entire first portion of the video discussing the differences between web sockets and the http protocol over here because let's be honest, AI can write all of the code for you. What you really need to understand in this day and age is how that code works, what it's doing, and how these different protocols and algorithms and data structures and all of these different concepts work under the hood, right? The code is not so much important anymore as much as these concepts, but I'll still give you a quick overview of the code. You have a little homepage over here that just renders the index.html template you have this um web socket routes that literally just starts a new thread that's going to run the background sender function over here right and this background sender function is just going to send random events to the clients these bunch of random events that we have defined in the list over here right so all these little events that you keep seeing over here right this is happening from that background sender function and once this thread has begun we just have an infinite loop over here that listen for new data to be received from the client. And every single time we receive some data, we send message received. So like you saw before, if I type something over here, it's going to receive that data and say message received. So that's the backend code for this over here. If I go to index.html, you'll see this is just a very basic UI that uses Tailwind and stuff to make everything look a bit pretty, right? The real code is in index.js right and even here most of the code is just for design and UI purposes you can see I'm adding a bunch of tailwind classes based on whether the client state has connected or disconnected or it's connecting right I just adding a bunch of tailwind classes over here to make the UI look pretty the real beauty is over here where we create a new WebSocket with our WebSocket URL over here And the way we do this is we basically just use the HTTPS URL over here to determine whether we need to have WSS or WS. And the difference between both of these is literally just the difference between HTTP and HTTPS. One is secure, the other is not. And you can use whichever you prefer, obviously, but use the secure version. That's going to be a lot better right so we create a new web socket by passing in the url we have a little log function over here that literally just again has a bunch of tailwind classes to display the messages that the socket sends right and then we just have a bunch of event handlers over here so what happens when the web socket is opened when we receive a message when we close the web socket if we receive an error and these are just a bunch of functions that handle these events right these are just a bunch of event handlers. And then we just have a send message function over here, which is literally just going to take our message and send it to the client over there, right? And that's what we do from this little text box over here, right? When I send a message, it runs that send message function and sends it to the WebSocket. Anyway, that's a high-level overview of the code. Like I said, that's not really important in this day and age. AI can write the code for you. What's really important is understanding the concepts so make sure you focused on the first bit of the video over here and understood the differences between the http protocol and the websocket protocol and how both of them work and what problems they solve it's not that the websocket protocol is perfect and you should use it all the time there are different use cases for http and for websockets and when you want real-time communication between client and server without needing to wait for requests and responses right that's when websockets really shines and so if you've got a use case like that then use it over there anyway that's the video like comment subscribe thank you for watching and let me know what you want to see next and a quick shameless plug to end the video i'm a web and mobile developer and i work as a freelancer building web apps and mobile apps for people and if that is something you're interested in or you know somebody who's interested in that if you want to work with me to build a project or something then go to the top link in the description and book a call with me we're going to talk on the call and we're going to just we're going to discuss your project and we're going to get to work building it if that's something you're interested in guys top link in the description other than that thank you for watching the video like comment subscribe and i'll see you in the next one