1 00:00:00,440 --> 00:00:05,840 Okay, so before we start writing any code, you might be asking what are the prerequisites to be able 2 00:00:05,840 --> 00:00:07,760 to follow along with this tutorial? 3 00:00:08,200 --> 00:00:11,720 So the first thing you need is to install Python on your machine. 4 00:00:11,880 --> 00:00:17,960 And then you would know the basics such as how to create variables, how to write if else statements, 5 00:00:17,960 --> 00:00:20,240 and how to create functions. 6 00:00:20,600 --> 00:00:27,680 That's it for the Python section, and some optional prerequisites would be how to write HTML, CSS 7 00:00:27,680 --> 00:00:29,000 and JavaScript. 8 00:00:29,000 --> 00:00:36,520 So we'll be using HTML for the markup, CSS for styling, and JavaScript for some interactivity on the 9 00:00:36,520 --> 00:00:37,400 browser. 10 00:00:37,400 --> 00:00:40,560 But if you have never worked with any of them, that's fine. 11 00:00:40,560 --> 00:00:44,840 We'll just see this in action and I'll actually try to walk you through it. 12 00:00:45,360 --> 00:00:52,120 Um, so before we try to write any code, let's just see the application overview so that we know what 13 00:00:52,120 --> 00:00:53,760 we're going to have at the end of the day. 14 00:00:54,480 --> 00:00:57,560 So we will need basically two different files. 15 00:00:57,680 --> 00:01:05,250 One for our back end logic which is going to be our Python file and one for the UI, right, which is 16 00:01:05,250 --> 00:01:08,810 going to be our template index dot HTML file. 17 00:01:08,810 --> 00:01:14,970 And inside this we will have some styling with CSS and some interactivity with JavaScript. 18 00:01:15,210 --> 00:01:22,210 And in the back end we will need two different packages, which is going to be for real time communication, 19 00:01:22,210 --> 00:01:27,570 and then the flask framework so that we can really render our UI. 20 00:01:27,970 --> 00:01:32,010 I know this might look pretty complicated, but it is actually pretty simple. 21 00:01:32,010 --> 00:01:33,930 And we'll see this in action. 22 00:01:33,930 --> 00:01:40,450 And then here in the UI you will also be using Socket.io so that we can send events and communicate 23 00:01:40,450 --> 00:01:41,690 with the back end. 24 00:01:41,730 --> 00:01:45,570 But as I said, uh, don't worry, this is not really complicated. 25 00:01:45,610 --> 00:01:47,370 We'll just see this in action. 26 00:01:47,730 --> 00:01:53,850 So with that in mind, the very first thing I have done is to create an empty folder on my desktop, 27 00:01:53,850 --> 00:01:56,370 and I just call it as Python Chat app. 28 00:01:56,410 --> 00:02:00,210 You can really call this anything and just open it up in VSCode. 29 00:02:00,490 --> 00:02:03,570 Now we would like to create an A terminal. 30 00:02:03,570 --> 00:02:04,130 Right. 31 00:02:04,170 --> 00:02:08,810 And here we would like to create what we call the virtual environment. 32 00:02:08,810 --> 00:02:15,690 So in Python development whenever you create a new project you basically most of the time create a virtual 33 00:02:15,690 --> 00:02:23,050 environment so that you have all the packages, uh, and dependencies put into that environment and 34 00:02:23,050 --> 00:02:24,530 not in your machine. 35 00:02:24,570 --> 00:02:25,050 Right. 36 00:02:25,090 --> 00:02:27,530 So let's say this is your machine, right? 37 00:02:27,530 --> 00:02:30,810 This is your laptop or your PC, whatever that is. 38 00:02:31,010 --> 00:02:37,970 Um, and whenever you want to create a new project, you basically create a new virtual environment, 39 00:02:37,970 --> 00:02:38,530 right. 40 00:02:38,570 --> 00:02:40,810 And let's see how we can create one. 41 00:02:41,010 --> 00:02:49,650 So it's going to be a little bit different both in Python, I mean both in Mac OS, Linux and uh, windows. 42 00:02:49,890 --> 00:02:56,010 So if you are on windows just like me, go ahead and say Python dash m Venv VM. 43 00:02:56,130 --> 00:03:00,410 But if you are on Linux or Mac OS you would say Python three. 44 00:03:00,410 --> 00:03:00,660 Re. 45 00:03:00,740 --> 00:03:06,740 And if you just go ahead and run this, this is going to create a folder which is going to be your virtual 46 00:03:06,740 --> 00:03:07,580 environment. 47 00:03:07,700 --> 00:03:08,180 Right. 48 00:03:08,460 --> 00:03:09,940 Now what does that mean. 49 00:03:09,980 --> 00:03:17,540 So here we say uh like by using the Python we say run a module as a script with this flag. 50 00:03:17,580 --> 00:03:22,860 This is not really too much important, but here we are using the Venv module to be able to create an 51 00:03:22,860 --> 00:03:23,820 environment. 52 00:03:23,820 --> 00:03:28,220 And this is the name of the folder folder that we would like to create. 53 00:03:28,220 --> 00:03:35,580 So if you go ahead and delete this and say v three or really anything, and this is going to be the 54 00:03:35,580 --> 00:03:41,860 folder name that it creates, the first one is the module and then the name of that virtual environment. 55 00:03:42,100 --> 00:03:42,660 Okay. 56 00:03:42,740 --> 00:03:46,900 So let's just go ahead and delete this and have it as Venv Venv. 57 00:03:46,940 --> 00:03:49,660 This is the convention that we use most of the time. 58 00:03:51,780 --> 00:03:55,020 And let's just say don't show this again okay. 59 00:03:55,060 --> 00:03:59,780 Now what do we want to do next is to create our files let's say App.py. 60 00:03:59,820 --> 00:04:03,860 And we would like to create the index HTML under our templates. 61 00:04:04,940 --> 00:04:08,100 Let's say index dot HTML. 62 00:04:08,460 --> 00:04:13,780 And let's scaffold this up just by doing that and let's say h1 here. 63 00:04:13,780 --> 00:04:16,780 This says Python chat app. 64 00:04:17,140 --> 00:04:19,540 And we can even put this as our title. 65 00:04:20,100 --> 00:04:20,580 Right. 66 00:04:21,140 --> 00:04:25,020 And let's capitalize these words okay. 67 00:04:25,260 --> 00:04:30,540 Now that we have created our environment, we'd like to activate it and install our packages. 68 00:04:30,540 --> 00:04:34,580 So if you are on windows you would say Venv right. 69 00:04:34,580 --> 00:04:41,140 Just go into that folder, go under the scripts right and then activate, run this file, let's say 70 00:04:41,180 --> 00:04:42,500 activate and run it. 71 00:04:42,500 --> 00:04:45,100 Now here we can see, uh, this has been activated. 72 00:04:45,100 --> 00:04:48,820 If you get this green color, uh, it means it is activated. 73 00:04:48,860 --> 00:04:50,020 Let's deactivate it. 74 00:04:50,060 --> 00:04:51,380 This is how we can do it. 75 00:04:51,420 --> 00:04:55,100 And if you are on macOS or Linux, you would say, uh. 76 00:04:55,140 --> 00:04:56,940 Source venv. 77 00:04:57,180 --> 00:05:00,300 Uh, slash bin and activate. 78 00:05:01,950 --> 00:05:02,350 Okay. 79 00:05:02,390 --> 00:05:04,950 And that would be activating it as well. 80 00:05:05,310 --> 00:05:08,550 Since we are on windows, this is what we're going to write. 81 00:05:08,870 --> 00:05:16,070 And now let's try to build this app dot Pi so that we can render our index.html file. 82 00:05:16,350 --> 00:05:22,070 But as I said to be able to make that work we need this flask package right. 83 00:05:22,110 --> 00:05:23,670 So let's go ahead and install that. 84 00:05:23,910 --> 00:05:28,750 We will say pip install and pip is the package manager for Python. 85 00:05:28,750 --> 00:05:31,750 When you install it it by default comes with it. 86 00:05:31,750 --> 00:05:36,910 But if you don't have it and this is how you can check if you have it or not, you would say pip dash 87 00:05:36,910 --> 00:05:38,470 dash version. 88 00:05:40,190 --> 00:05:45,510 And if you if you can get this kind of output with the version, that means it is installed. 89 00:05:45,510 --> 00:05:49,270 But if you don't have it, you should install it as well, which is pretty simple. 90 00:05:49,310 --> 00:05:56,190 Now I'll say pip install flask and flask underscore socket.io. 91 00:05:56,830 --> 00:06:01,720 So this is going to go ahead and install those packages and put it in our virtual environment. 92 00:06:04,320 --> 00:06:06,400 Um, let's just wait for this to complete, okay? 93 00:06:06,440 --> 00:06:07,000 There we go. 94 00:06:07,040 --> 00:06:08,160 It has been installed. 95 00:06:08,800 --> 00:06:14,120 Now, we'd like to build our Python file so that we can render this in the first place. 96 00:06:14,440 --> 00:06:16,720 Let's go ahead and grab our imports. 97 00:06:16,760 --> 00:06:24,600 So I'll say from flask we would like to import the flask render template as well as the request. 98 00:06:24,600 --> 00:06:26,200 And we'll be using all of them. 99 00:06:26,240 --> 00:06:30,760 Let's say also from flask underscore scikit io package. 100 00:06:30,800 --> 00:06:34,760 We'll take the get the scikit io as well as the image. 101 00:06:35,040 --> 00:06:40,440 Now we'll also be using the random package which is coming from Python by default. 102 00:06:40,480 --> 00:06:43,120 Let's say we would like to create a flask app. 103 00:06:43,160 --> 00:06:44,720 This is how we can do it. 104 00:06:44,760 --> 00:06:48,960 And we can create a new instance with this. 105 00:06:49,240 --> 00:06:56,360 And now we'll just say if a user visits this home route we would like to return. 106 00:06:56,360 --> 00:06:58,360 And you should have this indentation. 107 00:06:58,680 --> 00:07:01,520 Uh, first we need to get the index function right? 108 00:07:01,760 --> 00:07:02,200 Okay. 109 00:07:02,240 --> 00:07:07,320 So let's just say when someone visits this route, we would like to run this function which is going 110 00:07:07,360 --> 00:07:08,800 to go ahead and return. 111 00:07:08,840 --> 00:07:13,920 And let's indent this render template of index dot HTML. 112 00:07:14,240 --> 00:07:18,560 And so what this says um delete this. 113 00:07:18,560 --> 00:07:19,600 Bring this back. 114 00:07:19,640 --> 00:07:21,400 I think this shouldn't be indented. 115 00:07:21,400 --> 00:07:21,640 Right. 116 00:07:21,680 --> 00:07:28,880 If you just do it here, this says uh, you don't need this, uh, indentation for this decorator. 117 00:07:29,360 --> 00:07:29,800 Okay. 118 00:07:30,800 --> 00:07:39,320 Now we also want to say if the underscore underscore name is equal to and just make sure you have two 119 00:07:39,320 --> 00:07:40,240 underscores. 120 00:07:40,520 --> 00:07:48,360 If it is equal to main and again two underscores we would like to run this uh flask application. 121 00:07:48,400 --> 00:07:48,840 Right. 122 00:07:48,880 --> 00:07:52,920 So we'll say socket.io run and put the flask app into it. 123 00:07:53,360 --> 00:07:58,600 So this is how we can initialize socket and flask, uh, in our application. 124 00:07:58,640 --> 00:08:00,360 Now let's try to run this file. 125 00:08:00,400 --> 00:08:02,930 We'll say Python app.py. 126 00:08:02,970 --> 00:08:08,570 And again like one last time, if you are on macOS or Linux you would say Python three. 127 00:08:09,010 --> 00:08:11,050 Okay, let's run this here. 128 00:08:11,050 --> 00:08:12,450 It says development. 129 00:08:12,730 --> 00:08:15,090 Uh server started at this port. 130 00:08:15,250 --> 00:08:16,210 Let's click that. 131 00:08:16,490 --> 00:08:23,250 Here we can see we can get the output that says Python app which is coming from our template. 132 00:08:23,290 --> 00:08:23,770 Right. 133 00:08:25,330 --> 00:08:25,810 Okay. 134 00:08:26,090 --> 00:08:31,730 Now we would like to first uh, handle the entire backend logic, which is going to be uh, with the 135 00:08:31,730 --> 00:08:33,130 socket.io mostly. 136 00:08:33,130 --> 00:08:37,450 Then we're going to go ahead and build the UI and finally deploy this application. 137 00:08:37,730 --> 00:08:43,610 Now, if you have never worked with scikit io, let's just see some diagrams so that we can really understand 138 00:08:43,610 --> 00:08:43,890 it. 139 00:08:44,530 --> 00:08:44,850 Okay. 140 00:08:44,890 --> 00:08:50,850 So let's say we have a bunch of different users and we want to have some kind of communication that 141 00:08:50,850 --> 00:08:52,770 is working in real time. 142 00:08:52,770 --> 00:08:57,010 So we will have our server that is utilizing scikit io. 143 00:08:57,210 --> 00:08:59,410 And this is event based. 144 00:08:59,530 --> 00:09:06,330 What that means is that you can send events to the server saying, like, I just connected and server 145 00:09:06,330 --> 00:09:11,130 will get this event and um, maybe just broadcast it to everyone here. 146 00:09:11,130 --> 00:09:16,130 It's going to say, hey, this user just connected and this is going to be in real time. 147 00:09:16,530 --> 00:09:21,250 These users don't like do not have to send any requests. 148 00:09:21,250 --> 00:09:26,130 So they are not going to say, hey, could you just tell me who is connected so they don't need to send 149 00:09:26,130 --> 00:09:27,050 that request? 150 00:09:27,090 --> 00:09:34,210 Whenever an event is coming, it is just going to immediately, uh, just inform all the clients that 151 00:09:34,210 --> 00:09:35,290 are connected. 152 00:09:35,330 --> 00:09:35,850 Okay. 153 00:09:35,890 --> 00:09:38,410 Now let's just say this user is connected here. 154 00:09:38,410 --> 00:09:41,970 It's going to say, hey everyone, this user just disconnected. 155 00:09:41,970 --> 00:09:48,370 And since you are building a group chat, right, everyone can just, uh, communicate in real time 156 00:09:48,570 --> 00:09:48,770 here. 157 00:09:48,770 --> 00:09:55,010 This user can say, hey, I just want to send a message and this is going to say, hey, there is a 158 00:09:55,010 --> 00:09:58,610 new message from this user to every one of you guys. 159 00:09:58,850 --> 00:10:04,300 And I think now you get the point And we'll have a bunch of different event types, right? 160 00:10:04,340 --> 00:10:10,100 For the connection, disconnection, uh, sending messages and updating usernames. 161 00:10:11,340 --> 00:10:15,180 Now let's just see some kind of like, um, like example. 162 00:10:15,220 --> 00:10:15,740 Right. 163 00:10:15,780 --> 00:10:18,620 So here this user says I am just connecting. 164 00:10:18,620 --> 00:10:20,020 This is going to be the event name. 165 00:10:20,020 --> 00:10:26,460 Let's say uh, let's say hey I just connected and this is going to send user joined to every user. 166 00:10:26,500 --> 00:10:26,900 Right. 167 00:10:26,940 --> 00:10:30,700 So there's always a man in the like man in the middle right. 168 00:10:30,740 --> 00:10:34,620 This user doesn't immediately says uh hey guys I just connected. 169 00:10:34,660 --> 00:10:36,620 Instead it just less than server. 170 00:10:36,660 --> 00:10:36,940 No. 171 00:10:36,940 --> 00:10:40,820 So that server will navigate it to everyone efficiently. 172 00:10:41,060 --> 00:10:44,100 And here again a different example here. 173 00:10:44,100 --> 00:10:46,660 This says I am just sending a new message. 174 00:10:46,820 --> 00:10:50,180 And uh it would send the message content here. 175 00:10:50,180 --> 00:10:52,220 It maybe it says hello guys. 176 00:10:52,260 --> 00:10:58,260 And this is going to say hey guys, uh, you have a new message and this is the message content. 177 00:10:58,460 --> 00:10:59,580 So I hope this makes sense. 178 00:10:59,580 --> 00:11:04,670 That was a long explanation, but let's just see the UI as well. 179 00:11:04,950 --> 00:11:08,710 When someone joins, we're going to get this system message here. 180 00:11:08,710 --> 00:11:13,870 It says this user just joined the chat and we can see the messages. 181 00:11:13,870 --> 00:11:18,270 Someone left the chat and we can even update our username. 182 00:11:18,310 --> 00:11:25,190 And it's going to says like it's going to say, hey, this user just updated their name to this new 183 00:11:25,390 --> 00:11:25,870 name. 184 00:11:26,430 --> 00:11:26,750 Okay. 185 00:11:26,790 --> 00:11:31,950 So with that in mind, let's just try to build all these events and just make that work. 186 00:11:33,030 --> 00:11:38,070 So above the first route we'll take to create the Socket.io event. 187 00:11:38,070 --> 00:11:42,870 And here we'll just say Socket.io dot on connect. 188 00:11:44,430 --> 00:11:51,110 Now whenever you see this dot on you should just know that we are listening for something, right? 189 00:11:51,150 --> 00:11:59,070 So we are listening for let's say for the connect event. 190 00:11:59,110 --> 00:11:59,550 Okay. 191 00:11:59,950 --> 00:12:00,190 Okay. 192 00:12:00,230 --> 00:12:02,710 When someone connects, we would like to handle this. 193 00:12:02,710 --> 00:12:07,190 So we'll just go ahead and just say def handle connect. 194 00:12:07,190 --> 00:12:08,950 You can call this function anything. 195 00:12:09,270 --> 00:12:14,390 And here the very first thing we would like to do is just generate a random username. 196 00:12:14,430 --> 00:12:19,270 So I'll just say user name is going to be equal to f string. 197 00:12:19,430 --> 00:12:27,350 And we will say user underscore random package dot rand int and the range. 198 00:12:27,350 --> 00:12:30,870 So it could be from 1000 to 9 999. 199 00:12:30,910 --> 00:12:31,350 Right. 200 00:12:31,550 --> 00:12:39,310 And now we would like to also create a random gender okay I'll say gender is going to be random dot 201 00:12:39,470 --> 00:12:41,190 choice from an array. 202 00:12:41,230 --> 00:12:44,710 This could be either a girl or boy. 203 00:12:44,870 --> 00:12:47,350 And obviously this should be a string. 204 00:12:48,470 --> 00:12:48,670 Okay. 205 00:12:48,710 --> 00:12:52,510 Now you might be asking why don't we use male and female now? 206 00:12:52,510 --> 00:12:57,790 It's because we'll be using an API that specifically wants you to use a girl or boy. 207 00:12:57,830 --> 00:13:02,840 Okay, I'll just even put this if you want to test this out, start, but let me just copy this and 208 00:13:02,840 --> 00:13:03,440 show this. 209 00:13:05,480 --> 00:13:05,800 Okay. 210 00:13:05,800 --> 00:13:10,720 So if you go with the boy in the URL, this is going to give you a boy profile image. 211 00:13:10,720 --> 00:13:15,560 But if you go with the girl this is going to give you a girl profile image obviously, right. 212 00:13:15,600 --> 00:13:23,640 And depending on this randomly generated gender we'll get a like an avatar URL. 213 00:13:23,680 --> 00:13:24,160 Right. 214 00:13:24,240 --> 00:13:29,920 And we also want to store all the connected users into a Python dictionary. 215 00:13:29,920 --> 00:13:31,200 So let's say users. 216 00:13:31,760 --> 00:13:34,560 And here we can put a comment above. 217 00:13:34,560 --> 00:13:37,200 We'll say Python dictionary. 218 00:13:37,200 --> 00:13:44,120 This is and store connected users. 219 00:13:45,280 --> 00:13:54,040 Key is going to be the scikit io okay scikit id I was going to say key is scikit id. 220 00:13:54,320 --> 00:14:00,280 And then the value is going to be the username and avatar URL. 221 00:14:00,480 --> 00:14:02,330 And we'll you'll just see this in action. 222 00:14:02,570 --> 00:14:07,890 Okay, now that we have the username and gender, let's try to create an avatar URL as well. 223 00:14:07,930 --> 00:14:13,930 I'll say avatar underscore URL, which is going to be equal to again this f string. 224 00:14:14,890 --> 00:14:18,050 And we can put the entire URL as it is. 225 00:14:18,050 --> 00:14:18,690 Right. 226 00:14:18,730 --> 00:14:22,370 And the only dynamic part is going to be this gender field. 227 00:14:22,410 --> 00:14:24,810 So let's say gender just like this. 228 00:14:26,450 --> 00:14:28,210 And then the username. 229 00:14:30,410 --> 00:14:33,610 Okay so with that now we have the avatar URL as well. 230 00:14:33,850 --> 00:14:38,930 Now what do we want to do is just store this user info into this user's dictionary. 231 00:14:38,930 --> 00:14:45,450 So here we'll say user's request dot set which stands for the ticket ID. 232 00:14:45,530 --> 00:14:48,050 And this request is coming from the flask. 233 00:14:48,090 --> 00:14:49,770 If you remember right. 234 00:14:49,810 --> 00:14:55,290 And here we'll just basically say this is going to be a dictionary or an object. 235 00:14:55,490 --> 00:14:57,450 We'll say username field. 236 00:14:59,890 --> 00:15:03,130 Is going to be equal to this username variable that we created. 237 00:15:03,130 --> 00:15:09,450 And then the avatar is going to be equal to the avatar URL field that we just created. 238 00:15:09,490 --> 00:15:10,010 Right. 239 00:15:10,130 --> 00:15:16,970 And now that this user is connected we would like to notify all the clients about this new user. 240 00:15:16,970 --> 00:15:20,170 And this is where we're going to use the emit function. 241 00:15:20,210 --> 00:15:20,650 Right. 242 00:15:20,930 --> 00:15:24,530 So we have stored it in the database or in the server. 243 00:15:24,570 --> 00:15:28,690 We would like to now notify everyone with this new connection. 244 00:15:28,730 --> 00:15:31,130 We'll just say user joined. 245 00:15:31,290 --> 00:15:31,570 Right. 246 00:15:31,610 --> 00:15:34,170 You can call this anything like user connected. 247 00:15:34,210 --> 00:15:36,890 It could be but this is the name that I'll be going with. 248 00:15:37,050 --> 00:15:39,650 I'll just say user name. 249 00:15:40,490 --> 00:15:46,610 And you'll basically just giving the username as well as the avatar URL of this user. 250 00:15:46,610 --> 00:15:49,610 And here we'll just say broadcast is going to be true. 251 00:15:49,610 --> 00:15:53,130 So that it lets everyone know about this event. 252 00:15:53,170 --> 00:15:53,730 Right. 253 00:15:53,770 --> 00:15:59,210 Just like what we have done here, it's going to go ahead and just tell to everyone this user just connected. 254 00:15:59,610 --> 00:16:00,010 Okay. 255 00:16:00,050 --> 00:16:05,060 The very last thing we thing we would like to do is just give a random name for this user, right? 256 00:16:05,100 --> 00:16:13,580 So we have created the username, but we also need to uh, just notify that user about the username. 257 00:16:13,620 --> 00:16:17,980 So we'll say emit is going to be set underscore user name. 258 00:16:18,300 --> 00:16:22,380 Uh we can just say here is your username. 259 00:16:25,740 --> 00:16:26,220 Okay. 260 00:16:26,580 --> 00:16:27,740 So I hope this makes sense. 261 00:16:27,740 --> 00:16:31,380 This is the entire function where we handle the connection. 262 00:16:31,380 --> 00:16:34,580 And same is going to be for the this connection right. 263 00:16:34,620 --> 00:16:38,620 We will just delete it from the uh from our store. 264 00:16:38,620 --> 00:16:41,980 And then just let everyone this user just left. 265 00:16:42,620 --> 00:16:42,900 Okay. 266 00:16:42,900 --> 00:16:44,500 Let's go ahead and try to do it. 267 00:16:44,500 --> 00:16:48,820 Or even you can pause the video and just have it as a challenge. 268 00:16:48,980 --> 00:16:55,820 So I'll say at scikit io dot on disconnect. 269 00:16:55,820 --> 00:16:58,780 So this is the special name that we get from scikit io. 270 00:16:58,900 --> 00:17:00,460 We'll say def handle. 271 00:17:02,500 --> 00:17:09,980 This connect method, and we would like to basically delete it from the, uh, from the dictionary so 272 00:17:09,980 --> 00:17:12,180 you can do it I think like this. 273 00:17:12,180 --> 00:17:15,500 But what I'll be doing is to store it in a variable. 274 00:17:15,540 --> 00:17:18,980 Let's say user users dot pop, right? 275 00:17:19,020 --> 00:17:20,100 We'll just delete it. 276 00:17:20,140 --> 00:17:22,140 And this is the ID of that. 277 00:17:22,140 --> 00:17:28,380 And in case it is undefined we'll just return none so that we don't really have any errors and our code 278 00:17:28,420 --> 00:17:29,340 doesn't crash. 279 00:17:29,620 --> 00:17:38,500 We'll say if we have the user you'd like to emit this, uh, user left event, and we would like to 280 00:17:38,500 --> 00:17:40,100 give the username here. 281 00:17:40,100 --> 00:17:43,060 I'll just say user name. 282 00:17:45,220 --> 00:17:48,660 Which is going to be this user's username. 283 00:17:48,780 --> 00:17:49,340 Right. 284 00:17:49,380 --> 00:17:54,340 And we'll take the broadcast this so that everyone knows about this right now. 285 00:17:54,380 --> 00:17:57,700 Let's save I think this is a bit too much indentation okay. 286 00:17:57,740 --> 00:17:59,180 It should be like this. 287 00:17:59,620 --> 00:18:03,230 So this is how we handle the connection and disconnection. 288 00:18:03,230 --> 00:18:09,550 Now we have two different things left, which is going to be to be able to send the message and update 289 00:18:09,550 --> 00:18:10,670 the username. 290 00:18:10,790 --> 00:18:13,270 So we'll just say Socket.io dot on. 291 00:18:13,310 --> 00:18:16,910 You will listen for any, any incoming new messages. 292 00:18:16,950 --> 00:18:17,590 Right. 293 00:18:17,630 --> 00:18:26,350 Then we'll try to render this or handle this with the function let's say handle message which is going 294 00:18:26,350 --> 00:18:28,110 to take the message itself. 295 00:18:28,110 --> 00:18:30,870 So we can call call it as the data. 296 00:18:31,150 --> 00:18:34,190 And here we would like to first find the user. 297 00:18:34,510 --> 00:18:40,990 So users dot get and we'll say request dot socket ID. 298 00:18:42,150 --> 00:18:48,470 And we'll say if we have the user then we would like to just emit an event to everyone. 299 00:18:48,550 --> 00:18:55,430 We will say new message and we're going to give the basically profile image of that user. 300 00:18:55,550 --> 00:18:56,030 Right. 301 00:18:56,270 --> 00:19:01,920 When there is a new message coming, we will get the profile, uh, like avatar URL. 302 00:19:01,960 --> 00:19:05,320 The username as well as the message content. 303 00:19:05,760 --> 00:19:07,360 Okay, let's just do it. 304 00:19:07,440 --> 00:19:11,920 We'll go into the second argument which is going to be the data body. 305 00:19:12,080 --> 00:19:13,480 So we'll say username. 306 00:19:14,560 --> 00:19:16,080 Um get the avatar. 307 00:19:16,720 --> 00:19:21,040 And we also want to get the message content which is going to be data. 308 00:19:21,440 --> 00:19:24,600 We can just have the message out of it. 309 00:19:24,800 --> 00:19:28,680 And finally we'll just say broadcast to be equal to true. 310 00:19:28,760 --> 00:19:32,320 And that's going to be it for the send message event as well. 311 00:19:32,520 --> 00:19:35,960 The other one is going to be to be able to update the username. 312 00:19:36,280 --> 00:19:41,040 So the first thing we would like to do again just listen to it Socket.io on. 313 00:19:41,040 --> 00:19:45,160 And the event name is going to be update underscore username. 314 00:19:45,200 --> 00:19:45,760 Right. 315 00:19:45,800 --> 00:19:50,040 And we'll just handle this let's say def handle update username. 316 00:19:50,040 --> 00:19:55,360 And we're going to get the data which is going to basically have the new username. 317 00:19:55,360 --> 00:19:59,480 So let's say old underscore username. 318 00:19:59,880 --> 00:20:02,960 We can just grab this from the user's dictionary. 319 00:20:03,240 --> 00:20:07,440 We'll say request dot set, which is going to be the socket ID. 320 00:20:07,440 --> 00:20:11,600 And from this user we would like to get the user name. 321 00:20:11,800 --> 00:20:18,160 And let's get the new username which is basically the data that user sends us. 322 00:20:18,160 --> 00:20:21,080 From this we would like to get the username. 323 00:20:21,080 --> 00:20:25,640 And we would like to update this old name to be the new username. 324 00:20:25,760 --> 00:20:31,960 So here we'll just say from the user's request dot set we just find the this current user. 325 00:20:31,960 --> 00:20:36,200 And we would like to update their username to be this new username. 326 00:20:36,320 --> 00:20:40,400 And let's notify all clients about the username change. 327 00:20:40,600 --> 00:20:41,760 So we'll just go ahead. 328 00:20:41,880 --> 00:20:43,080 Let's say emit. 329 00:20:43,080 --> 00:20:48,520 And the event name could be username underscore updated. 330 00:20:48,760 --> 00:20:50,240 And let's close this off. 331 00:20:50,280 --> 00:20:55,920 Put our second object which is going to be the data that we're going to grab from the client. 332 00:20:55,960 --> 00:21:01,120 So let's say old underscore username is going to be equal to the old username. 333 00:21:01,210 --> 00:21:03,410 and same for the new one. 334 00:21:03,450 --> 00:21:06,850 Now let's just broadcast this to everyone. 335 00:21:07,450 --> 00:21:07,690 Okay. 336 00:21:07,730 --> 00:21:11,970 So basically that's it for the entire App.py file. 337 00:21:12,090 --> 00:21:14,810 Let's quickly try to reiterate what we have done. 338 00:21:14,850 --> 00:21:17,890 We have installed our packages right. 339 00:21:18,050 --> 00:21:19,770 We just got our imports. 340 00:21:19,890 --> 00:21:26,490 And we have created a flask app where we can use it to be able to render our template. 341 00:21:26,490 --> 00:21:33,250 And we got the Socket.io instance with the user's dictionary so that we can keep track of the connected 342 00:21:33,250 --> 00:21:39,650 users, where the key is going to be the socket ID, and the value is going to be the username and avatar 343 00:21:39,650 --> 00:21:40,770 URL, right? 344 00:21:42,370 --> 00:21:42,690 Okay. 345 00:21:42,730 --> 00:21:45,330 So we are listening for the connect event. 346 00:21:45,370 --> 00:21:46,930 How do we understand this? 347 00:21:47,250 --> 00:21:52,970 Uh, like if you are listening or not, it is because we have the on method, right? 348 00:21:53,010 --> 00:21:54,650 So sick io on. 349 00:21:54,650 --> 00:21:56,210 Listen for the connection. 350 00:21:56,250 --> 00:21:59,850 This connection send message and update username. 351 00:21:59,850 --> 00:22:03,050 So all these events will be coming from the user. 352 00:22:03,250 --> 00:22:09,130 So if you take a look at the diagram, it is actually pretty self-explanatory, right? 353 00:22:09,170 --> 00:22:13,850 User sends you this event and you're listening for the event itself. 354 00:22:14,330 --> 00:22:21,210 When there is a new connection, what you do basically generate all these information randomly, then 355 00:22:21,250 --> 00:22:26,810 store it on the back end so that, you know, like which user is online, which is not. 356 00:22:26,930 --> 00:22:33,970 And you say like, hey everyone, I'm just notifying you with this broadcast is equal to true. 357 00:22:34,130 --> 00:22:40,010 And this user just joined and we say, hey, this is your, uh, random username. 358 00:22:40,010 --> 00:22:43,850 And if you really want to, you can update it and so on and so forth. 359 00:22:43,850 --> 00:22:50,810 For the disconnection, we just let everyone that this user is disconnected and sending new messages 360 00:22:51,090 --> 00:22:53,490 as well as updating the username. 361 00:22:53,490 --> 00:22:55,210 So that's going to be it for this file. 362 00:22:55,250 --> 00:22:57,330 Next we're going to build our UI. 363 00:22:57,770 --> 00:23:00,170 So let's go ahead and save this file. 364 00:23:00,170 --> 00:23:02,130 And I will see you in the next section.