WebSockets with Python and WebSocket API

hello everyone welcome so I'll show you how to create a WebSocket server with Python using the WebSockets package how to connect to the server from the browser using the web sockets API that's built into every browser how to connect them and how to communicate and send messages between the client and the server starting off we need to create a virtual environment so Python - MVN and while that's going I can go through the code that we're going to be copying so first of all obviously we need to install this so it's getting to get started pip install WebSockets right there this is done so we go inside of that scripts activate and then install in the WebSockets package after that we will be copying go back this bit of the code so this is just a simple echo server the web sockets package uses a sink over here to have a server to serve a server what this code does is I'll explain as I copy so hi so first of all we import a cinco and WebSockets then we defined an echo or echo server or just a handler you can name this any any way you want you can images server it doesn't really well maybe server is not the best name but we can name it server right he doesn't doesn't matter the name doesn't matter it's a handler the handler a WebSocket handler takes the WebSocket which is the connection that's made between the client the server and the path the path is slash for example if it's just localhost we'll change the port you like say five thousand so localhost five thousand is just the path is gonna be slash if it's slow called 5,000 slash test the path be slash test okay that's what path is and then what this coding here does is it a synchronously goes into the WebSocket it finds the message and then it allows you to do whatever you want with the message inside of this for part of the code so right now um the server will receive a connection and will connect it will receive a message and then it will send it back well maybe cost time I customize the message sent back just so there's a some variety there so I'll do got your message it's this and now in order to start our server we can say Python app that PI and the server is on so right now we have a simple echo server that receives a message from us and then returns got your message it's this I already have the client code in here basically is just this code right here I copy this code right here the only difference is that I said I'm sending a message on connect icon so log that the connection has been made and then I send a message whenever this send message button is key this is very simple JavaScript and also I explain this code a bit more in my express version of the same tutorial so if you want to learn more about the this specific very part of the code you can you can watch that video so let's start our client 1 if we open the console it says connected to the server if we send a message we get hello from client one message from server got your message ok so right now we have a simple WebSocket server that returns whatever we send to it with this sort of prefix if we have let's say two clients connect so we have your next one end index 2 if they both connect and we can send server we can send a message to the server and they so right now the server receives messages and sends the mess of the response back to the WebSocket or the connection that are set in the message so the server talks to the client the client talks to the server you can't talk to other clients now if you want to add functionality to our web socket server so that clients can talk to each other we can do that and there's examples of that in the code right here so if you scroll a bit more down so a bit more down just a bit more down here there's the registration section registration of basically what the section talks about is creating a connected set which is a set or list like say a set is a similar to a list just every element in it is unique which will hold all of our current connections and then whenever user connects or a client connects they're added to this set and then when we send a message we can iterate through this set and then send the message to every website a connection that currently exists so we'll be copying a bit of the code from here and just editing it okay so okay so this answer the comments say this registers a new WebSocket just adds it to the set then in here we want to add this bit all right there and then the wait list needs to be inside that and then finally whenever the connection is dead we want to unregister or remove the connection from the connected set so what we want to do in here is once this is added inside when we have this message available to us what we want to do in here is say for each let's say connection in connected so for each connection and connected we wanna we want to send this message right so let's do that we want to send connection and then we want to send got a new message for you and then the message so right now we can you start the client whenever a connection is made the connection is added to the connected set and then it takes the message whenever a message is received by the WebSocket server it iterates through every connection in the connected set and then sends the message that it received to all of them so if we refresh these two pages so from so from here if I send a message I receive message from server gotten a message for you hello from Taiwan if we go to the second one we also get the same one and same happens here but in this situation maybe we don't want the client one to send the message to the server and the server to send it back to him because when you send messages to people you want them to receive a new message you don't want to send the message to them and also yourself so in order to avoid sending the message to ourselves or we can add an if statement in here so if connection there's no equal the web socket and the WebSocket in this case is the curve the connection that sent the the message then do this so it's going to iterate through all of the connections and then whatever it goes drug connections going to check is this connection the WebSocket that is sent a message if it is not send a message to it if it is go next right so let's restart the client of the server and then refresh the client so if we send a message from client one its inclined to if we send a message from client to it's in client one if we open another client to so we have to client twos so let's refresh all three just so it's clean so I'll see if I send a message from client one we get it in two places and there's my two you get it in two places but this one doesn't get it so if you can have infinite mile clients and then the one that send the message you won't receive it if you want that one to also receive the message you can just remove this line and that's basically when it comes to the basics of WebSockets there's more documentation here available and you can do a lot of really cool things with it it's quite simple and then you can also let me use the path to define like different chat rooms for example that's an idea for chat rooms if you don't want to have authentication you can add a slash something path and then if a message is sent to slash tests every one that is in slash test so everyone that has the slash test socket will only listen to changes in slash test and etc etc right you can you can send objects this a lot of ways to configure that but this is some basic WebSocket stuff and you can use this to create whatever app you want or need thanks for watching hope you learn more about WebSockets and bye bye

Channel: Vuka

Views: 85,411

Keywords: vuka, vuka951, ws, websocket, websocket api, websockets, http, tutorial, how to, basics, server, websocket server, websocket client, client, connection, routes, message, events, eventlistener, python, py, python3, py3, windows, web, web server, ws server, messages, connect, communicate

Id: lv0oEnQY1pM

Length: 8min 18sec (498 seconds)

Published: Thu May 21 2020