Coding Livestream - Creating an Online Chat App w/ Python!

Key Takeaways

All right. Okay. I think we're good. I think we're in. You guys are going to have to let me know in the chat whether or not you can see me and if this music is too loud or not. Once I get that, then we will kind of get going. I'll start explaining what we're going to be doing today. But music, I need to know if it's too loud, if you guys can hear it, if it's too quiet, um, and all that. So, please do let me know in the chat. And then once we fix some technical difficulties, we'll we'll go. Uh, music too loud or music is good, my man. Okay, awesome. All right, sweet. Okay, so this stream is going to be a little bit different than what you guys are probably expecting if you've seen anything previously I've done with live streaming. This is actually because I need to work on a project. I have a job interview coming up in two days and they want me to just showcase this back-end project that I've worked on. So, I figured let's just build a new one and let's do it on live stream and let's make a chat application. I figured that's not super complicated. Um, but it's, you know, impressive enough that I could showcase. What I'm planning on doing is building a chat app that works over sockets. So, if you guys know, we'll explain kind of everything and how it's going to work as we go through. And then I'm actually going to make a Flask front end or I guess I'll use Flask as my web server. And then I'm just going to do a custom JavaScript HTML front end that will handle, you know, the UI for this chat application. In terms of how long I'm going be streaming, that's a very good question. So, for right now, for me, it's 7:00 p.m. I'm kind of planning on going until like midnight and then picking the stream back up tomorrow morning. Although, knowing me, we might go till 4 in the morning. We might go till 10:00 p.m. Really depends on how much work I get done and how, you know, confident or how comfortable I feel with what we've done so far. Um, other than that, what I'm going to be doing is kind of just looking at the chat every now and then. You guys know I like to do some pretty chill kind of coding streams where it's just kind of me talking and a little bit of chill music and then answering some of your questions. If throughout any of this you guys have any questions or you think I'm doing something wrong cuz I probably am, please do leave a comment in the chat. I can't tell you guys how much it helps me to actually look at the chat while I'm programming because a lot of people I know we have, you know, hundreds of sets of eyes that are able to see everything I'm doing at every point in time and reverse and look at all of it. Um, so yeah. Okay, so let's look at the chat here. Say hello to some people. Witherfall Gaming. This guy's been in many times in this chat. First time for bed. What? I can't understand what most of you guys say. Job interview for what company? I will tell you guys the job interview for the company later. I want to keep you guys in the stream. Um, you got mad interested in coding. Love you, bro. Love your videos. Where are you from? I'm from Canada. Um, and in case anyone asks, I am 19. Okay. So, what I'm going to do is actually I haven't even really thought about kind of the architecture or the design of this program. So, I'm going to go on my drawing tablet, which I have right here. I think you guys should see that. And I'm just going to draw it and kind of do some sketches and think about how I want to do this implementation just so you guys understand what I'm trying to build. And then from there, if you guys have any questions about the implementation, I'll answer them and then we'll actually start coding. All right. So, hopefully you guys can see this. So, what I'm thinking of doing is a chat app, right? So, I want my chat app to just be basic like a little window. I want it to pop up on the first screen where you just type your name in. Like it just one little popup. a nice Bootstrap website. I'm probably just going to do some custom CSS with Bootstrap. I'm not going to go crazy on front end and I'm not very good at front-end web development. So, it's just going to be enough that it looks like decent. You're going to type your name in, and then what's going to happen is it's just going to randomly put you in a chat room. So, I'm thinking about having either multiple chat rooms or just starting with one chat room and just having everyone go in the same chat room. And then what I'm picturing for the chat room is like if this is the window, we'll have a window like this. you can, you know, type your thing, you can send a message, and then it will have all the messages popping up here. And pretty much the basic way that I'm going to do this is I'm going to have a server like this. So, I'm going to have a server that's going to be my message communication server. And then I'm going to have another server, which is actually going to be my web server. So, what's going to happen is you can connect to this web server that will actually display this web page, right? This website, cuz this is just going to be using Flask. And then what's going to happen is this web server is going to communicate back and forth with the chat server which will actually display and get these messages here. So what's going to end up happening is if you send a message, you'll actually send from the web server a signal to the server saying what message you sent and then that message will be broadcast out to all of the other clients that are in this chat room and then they'll get that message and it will show it. So there's a few things we need to consider when we do that. Um I've actually stolen a little bit of socket code. I have like a link in the description for the reference for that so you guys don't get mad at me that I'm going to be using just because I don't want to redesign the whole chat um architecture because it's kind of well defined already. And yeah, I mean other than that, that's kind of what we're going to be doing. I want to see what you guys are saying here. Um, how long do you plan to code? Can you code my parents' marriage back together? I'm not sure, man. Maybe. Uh, yes. Uh, yes. Yes. How long would it take to learn basic? Okay, guys. So, I'm not going to answer like all of those kind of questions. Um, but we'll go through some of them. Are you going to get a fang internship? Possibly. I'll make a video on it if I do. Uh, oh, we got 175 people. 180 people. Wow. Thank you guys. But right now, if you're in the chat, go ahead and please leave a like and leave a comment on the video. It just helps a lot. Um, when this video actually goes live later on so that people will actually see it. And if you guys are here watching me code for 6 hours, least you could do, leave a thumbs up on the video. Okay, so let's throw this um drawing tablet away. I'm actually going to get started coding pretty quickly. Um, but I will say again like I don't have a UML for this. I don't have a design document. So, it's probably going to be pretty flustered at the beginning. I'm actually going to start by programming the chat server. So, what I want to do is make a pretty good interface for communicating so that essentially all I have to do at the end of this is I've done the hard part and I just set up the front end for the website which is just more tedious than it is difficult and then make a little chat um window and send some stuff through that. So, anyways, all right. Right. So, let's get started with Arc Server. I go new Python file. Let's just call this server. py. I'm going to show you guys what I'm going to look at here. Um, where is it? So, I found this article online that tells you how to make like a basic chat server. I've done this a lot before with sockets. So, I'm going to kind of work off of this. I don't want you guys to think I'm just straight up plagiarizing his code, but I mean, this is usually what I do if I'm trying to learn something or look at something. And a lot of this video will actually be me kind of referencing documentation um and all kind of stuff like that. Let's see what you guys are saying in the chat here. Uh 40 hours if you have it. What is this? Okay. Anyways, you guys are not saying much meaningful things in the chat. Okay, so let's get started. Um we're just going to say from socket import afet. Uh we do need socket and we do need sock stream as well. Okay, let's make this a bit smaller. Let me know if this text is like I don't like this gray text. I don't know why it's giving me this. Um, it's interesting. I'm going to see if I can change this first before we go too far cuz I really don't like the way this is looks right now. Okay, let's go editor font. Uh, 20 is fine. Fire code medium. That looks a bit better. Apply enable. I don't know what that is. Okay. All right. And let's see if I just do defaf glow. Someone gave me a really good color. Do you if any of you guys know any good color schemes for PyCharm? Let me know because someone gave me a really good one before uh that I was using, but now I don't know. So, import thread. Okay. So, for those of you that don't know, this is going to be a multi-threaded application, which essentially means there's going to be threads so that things don't hang. Um, so what that means is there's going to be two concurrent things running at the same time. So, for example, on the server, what we're going to have is a thread that's concurrently running, waiting for any new connections. And then we're going to have a thread that's waiting for any messages. And then we'll actually have another thread that will send any outcoming data to all the other clients. Um, so the first thing we're going to need is this accept incoming connections. So, this essentially just actually we need to create the server down here. Okay. So, let's do this down here. I forget what the basic syntax is. It's it's this. We're going to steal this here. Okay. All right. So, host port, buff size, address, host port. Um, we're just going to do this on localhost for now. I'm actually going to change the port to be 5500. That's usually what I use. Buffer size is just how big the messages are going to be. Woo. We've got a super chat in here. 7. I want to say that's I don't know what R stands for. Currency. Hi, Tim. Always nice to see you coding live. Appreciate that, man. Uh, yeah. I mean, I don't want to tell you guys just to donate to me, but I will respond to your thing if you do make a super chat. Okay. Um, all right. So now what we need to do is make this server.listen waiting for connection accept thread. I'm really just going to steal all this code, too. We'll get more custom stuff later. I know you guys want to see me typing it out, but just for this basic stuff, it's it's not worth it me trying to mess with it rather when I can just take this. Okay, so target equals accept incoming connection. So I'm actually just going to say um let's see, wait for connection uh like that. Okay, so essentially what this thread does, it just starts a new thread. So, we just need a function in here. We're just going to say wait_4 connection like that. Now, in here, I actually want the IP address of the host. I want the chatbot. I need a list of clients. There's a lot of things I need. Okay. Um, I'm just trying to keep up with the chat, but you guys know how hard it is to focus when I keep looking at the chat. I always mess myself up like that. Okay. So, define wait for connection. So wait for connection is going to correspond to this. So all this is going to do is just go in an infinite loop essentially and just wait for connections from any different clients. So we'll do actually I'm just going to say run equals true. Oh, what the heck? Why' it do that? Run equals true. While run, we'll say I believe it's client. And I'm just going to literally copy this add equals server.accept connection. Server is going to be global. I don't really like passing global variables. So, what I'm going to do in here is actually say I think it's like params. There's I forget what this is. I'm going to have to look this up. One second, guys. All right. So, let's go here. We're going to go Python thread. Start new thread. Okay. Let's see if this has here. Start new thread. Args. Quarks. Okay. Nice. All right. So, let's get rid of that. So, what I'm going to do in here is just pass the argument of server. And that should be good. We'll do server here. Server.accept. Okay. And then what else do we have here? Print client. Okay. So, that's fine for now. I want this thread actually. Okay. Okay. So, thread handle client. I'm just going to say client communication. Actually go define client communication like that. And then for args we do need that client like so. Okay. So what I'm actually going to do is I'm going to create some client objects. And each client object is simply going to store a address. So like an IP address from whoever connected. Um and then a name. The reason I'm going to have that is because I need to have a list of all these different clients so that when I send back to the server I know like which client is talking with who. Um and yeah, this should be actually they've done this in a dictionary though. So I might go with that approach cuz that actually seems to make sense. Uh but I just got to get this damn server stuff done cuz I can never remember how to do this. Okay. So server.x But except uh we have ADR. We'll pass client. We'll start the new thread. This thread will run. This will be a while true loop again. So actually we'll say run equals true. Why does this keep autocorrecting to other stuff? Run equals true. We'll say while run. The reason I'm going to do this is because I'm actually going to do a try catch here because sometimes this actually fails. Um and I do like to have this so it doesn't crash my server whenever that happens. Except exception as E print fail failure. Let's go comment. Okay. What do you guys say in the chat? What version of Python? Pretty good editor. Have you tried Uni? Google is every coder's best friend. Same here. I'm okay. Yeah. So, a lot of this stream is literally just going to be me looking stuff up. Like this is how I usually program. My other streams I've been doing Pygame stuff that I'm like pretty good with. So, um I don't usually what do you call it there? um have to look up documentation, but for this one I will because this is something new that I'm doing. So, okay, client communication while true. We're going to accept data from the client. I believe that's going to be like a blocking request. We'll say message equals clientreceive. I will actually put this buff size up at the top. This buffer size is essentially how many bits of data we're going to get. 1,024 seems like a lot to me. I'm actually going to go 512 for now. Uh, and we can up that if we need later, but essentially I'm going to limit the size of all messages so that they won't be too long. Uh, so we'll receive that. And then we'll actually need to decode that message, I believe. Um, the message name plus Okay, I'm just trying to see what they've done here. Client.receive.deode bytes cuz we'll just send it. Okay, so I actually don't need to decode it. So essentially what's going to happen is in here if um we receive a message from the client cuz this is a blocking command right here. Then what we'll do is we'll just send that to the broadcast function which they have here which will broadcast to all of our clients that message. Uh and then if that doesn't if we send a message here saying that we've like left the server like we quit it. Uh then we'll just remove our client and disconnect that socket. So that's what this is doing here in this wild true loop. Um so I'll copy a little bit just this close yeah has left the chat. Okay, do that. client.close. I'm just going to say if msg um does not equal and then we're just going to use bytes as our basic encryption. I could use an encode decode um but for this one it's pretty easy to just use bytes. So we'll say bytes. I'm literally going to copy the format that they have here with this quit cuz I feel like that's a good command for someone leaving the server. Um if message like that then we'll just client.close. Um, sorry. And then otherwise like this. So I'm actually going to be trying to write some more like production level code here than I typically would. Uh, that's just because what do you call it? I'm actually going to be like sub showing this project to like developers at the job application that I have. So I'd like it to be like decent. Uh, but here wait for connection. Wait for connection from new client. Start new thread once connected pram server. This is going to be a socket. Okay. Return none. Um host. Okay. So let's just do this global variables be print waiting for connection. So I'm actually going to say started listen for five connections. I'm actually going to make this say max. And you guys will notice sometimes might get quiet if I'm trying to think about stuff. That's just kind of what happens when I'm doing code. Max connections equals let's go 10 for now. This could be max connections target server uh positional ar. Okay, that's what we need there. I think I can do this positional argument after keyword argument. I forget what I need to do for this. Okay, I need to look at some other piece of code because I've done this before but I forget. Okay. So, let's go to desktop Python chess chatbot. Which one would this be in? Live stream game. I think that's right. No, it's Pictionary. Ha. Okay. Server request handler. Yeah. Okay. So, this is my old code from another live stream. This is what I'll do a lot of times is just steal some of this because I already know how it works. Um, connection thread s.bind self.authentication connection address. Okay. Authentication. Ah, args equals that's what I need. Okay. Oh, oops. All right. Args equals server. Awesome. So, I think no, it needs like that. Okay. The reason you need a comma here is because you need to pass a tpple to this variable. So you can do comma none. Um because if you don't put anything, it means none. Because if you just put brackets around a variable without a comma, it doesn't treat it as a uh tpple. So anyways, okay. So we'll start this new thread. Wait for connections. I'm just going to keep up with what you guys are saying here. Uh there's always documentation though. Global should go under imports if you're trying to follow coding standards. Okay, fine. I'll put this under uh imports for you guys. There we go. Okay. Client communication. Why does it do that? Okay. Um, red to handle all messages from client. Client will just be socket. Again, return none. Okay. So, if we get a valid message, then what we need to do is actually broadcast that message. So, we'll say broadcast like that. There's actually going to have to be some global stuff here, which I'm not a fan of. Um, but we're going to have to do it just for it to work properly. So, actually, we'll get rid of that. We'll say client server.accept thread start new client failure run equals false. Okay. I'm just going to say print server crash. Okay. Um, here started waiting for connections. When we get a new connection, I want to print some output. So, my new connection is here. So print connection and we're just going to say uh actually make this an F string. We'll say add connected to the server at I'm actually going to import time and then we'll do one in here at time. I think it's Can I do time dot time now or is that not a thing? time dotn now. I forget what this time one is. I just want to get like the date time of this. Uh, we'll go with time for now. All right. What are you guys saying here? Hey Tim, I've learned quite a lot from you. What microphone are you using? Will you use unsupervised learning tutorials? Remember to like the video. Good point. Like the video. Uh, can you give some advice for learning math in first year? I'll take some breaks at some point, guys, and answer some questions. So, just hold on to them if you can. Uh, because I can't really just stop in between. Otherwise, I'm just going to get really distracted and I'm not going to be able to do anything. So, message receive broadcast. So I believe when I broadcast I want to see what this guy did. I think he started a new thread when you broadcast. Uh oh, that's literally all they're doing is just sending. Okay, so I don't think that needs to be in a new thread client. What is he using this dictionary object for? That's what I want to see. Okay. So when a new client joins, we go client then we do addresses client equals client address. Okay. So I believe that's we're having a pointer to whatever this client is uh to give us their address. I don't know why we need that client. Client's client equals name. Ah okay. That's what I wanted to do. All right. So actually I will create a client object because he's done this with two dictionaries when you could probably simplify it with just a client object. So let's go um client I don't want to call it client let's just call it persony. Okay, let's just do class person. Uh, we'll do find_nit self addr name um client. Okay, self.ADR equals add self.nameals name self.client client equals client and define_repper. This actually make it a little bit easier for us. Uh and we'll just say print actually no not print return fing of we'll say client or we'll say person like this and then here we're going to do self.Dr add self.name. Okay. And then define strr and this will be the same thing. And literally we'll just copy this. Although I don't even think I need that. We'll just leave it wrapper for now. Okay. So that's going to be my person object. So when someone connects, what I'm going to do, so wait for connection here. Actually make a person object and pass that through instead of client. That way I can just get more information from them and this will be easier. So, actually, we'll get rid of this for right now. We'll just say target actually equals person. And I'm going to say person equals person. I'm going to need to import that. So, we're going to say from person. Yeah, person import person like that. What's the issue here? Unresolved reference person. I think that should be fine. Unless it reindexes those files. Okay. So, then client communication. We're actually going to do person here as well. Say person and actually we can leave this client and just say whoa, what is this? Client equals person.client and then we'll say name equals person.name and add equals person.ADR. Okay, nice. I don't even really actually want to do this anymore. Let's just do true. Um, let's see. How many people are watching the stream right now? I haven't checked yet. Minimize. 232. Wow. Thank you guys for hopping in. Hope you guys enjoy it. Again, we're going to be going for a while. So, if you guys have to leave, that's fine. You can always come back and uh and join us. Okay. So, now that we've done that, person equals person. What was my add name client? So when we wait for connection, I actually need to set the person's name not like that. So we're going to go person just going to go actually selfname equals none define set name. Oops. What? How is that a thing? Okay, set name. I didn't know that was a built-in dunder method in Python. Okay, we'll do the name. Say self.name equals name. Okay, so we need to set their name. So what's going to happen? I'm pretty sure that what I want to do is wait for connection. As soon as we connect, receive an initial string from the client that just tells us their name. We just know that will just be their name. We'll decode that. We'll store that in the person's name and then we'll be good for transmitting messages. Okay, good. So let's do that. So we'll say client after we define that client equals person.client I'm going to say um get person's name. So we'll say name equals client do receive I'm going to say buff size again there do decode. Now, I think that's what they've done here. Yeah, that's a code UTF8. Okay, like that. Um, so this is a welcome message. clients send welcome UTF8. So, this is going to send back to them um some response. Okay, so let's h don't know if I want to do that kind of response, though. All right, I'm not going to respond anything to them right now. Um, we will do this has join the chat message though. That's important. So, we'll do this actually. Steal that. Uh, say message equals percent s. I don't like this formatting. Let's go to fst strings instead. Name like that has joined the chat. And then we will actually use that broadcast function cuz that's pretty nice. Broadcast msg. This needs a list of all clients. So, we're just going to make that client global up here. clients equals these are actually global constants and this is global variables. Okay, clients actually equals dictionary. When a new client connects, we need to add that to the dictionary and those will actually just be I'm almost thinking I might want to call that persons actually instead of clients because this will actually just store person objects. So let's do that instead. Um let's do wait for connection person. Yep. Okay. And then we'll say persons. Um, actually I don't even think I need a dictionary. I'll literally just make it a list. Let's just do that. Okay. Persons.append person. So now I should have all my clients in this person list. Okay. So what we'll do here is we'll receive their message. If their message is quit, we will close. Otherwise, we will simply broadcast that message. Um, so client.close client.end bytesquit. Okay. So, I guess I'm going to send this back too just because don't know why. We'll figure out why we want to use that later. Uh, we do actually need to delete the client. So, that was that's a good call here. We'll just say clients or persons. Person. Okay. Can do that after we do this. Okay. And then in the else, this is just broadcasting the message, which is literally what that is. Okay. So, nice. And it also takes a name um to broadcast with. So, let's do that. So, the name will just be the person's name. Okay. So, in broadcast, we're going to take message name. All right. And then exactly what they had there. Before person in persons, we're going to say client nope equals person.client client send bytes and then we'll send a string of the name. So we'll say name plus colon plus msg. Um I think that should be good. I think that's similar to what they did. bytes prefix UTF8 plus message is message already in bytes is that why um oh it is already in bytes okay so I don't need to reconvert in okay so clients send right all right clients send msg name okay so in here since that's already in bytes is the message that's okay we'll copy what they had then we'll say bytes um this is going to be name plus colon space uh UTF8 and then we will send plus msg. Okay, so these will be just combination of bytes which will be fine. We'll decode that and then that should actually be it. So let's give a dock string here. Um send new messages to all clients message string. No, message bytes. I should just go this UTF8. Why not? And then we'll say name is string. Okay. So, what is this saying? Is that PyCharm and Subline? Yeah, I'm doing both. Why don't you use socket io? Um, what's good? Did you guys know Tim has his own Discord? Link in the description. Very true. Um, the stream has a like to dislike ratio of undefined. Nice. Okay, so broadcast that. That's fine. I think it wants two spaces in between these functions. It does. Okay. So, wait for connection. When a connection occurs and this should actually this should happen up here. Okay. Um let's say set up server broadcast send new message to all clients. Okay. Client person. Okay. cuz I think I'm almost done with this. Uh I just want to make sure I haven't missed anything in particular. Okay, we will actually send a message saying that someone has left the chat. That's something that's important to do. So let's say, do we send the message before or after we close the socket? I'm going to say we probably send it before so they see they left the chat and then it closes it. Okay, so let's do that. We'll say broadcast. The message is just going to be an fstring that says name has left the chat dot dot dot and then name. Um actually I don't for the name I'll just pass an empty string so that it doesn't say that. Uh what I also want to do is have like some kind of color for these different messages at some point. Although I think I could probably just do that pretty easily from the client side. Change the colors. I don't think I need to handle that server side. So it closes. It removes. Let's see what everyone's saying here. Um, nothing too much going on in the chat. 245 people. Wow. Okay, so we have client connection add. Don't even use this. Let's get rid of that for now. Person client name equalsclient.receive buffer size.d decode UTF8. Okay. Um, yep. So that gets their name. So get person's name. Um let's say broadcast welcome message. Uh then we'll just constantly wait for receivable from the client. If we receive we'll say if message equals bytes quit. So if it they send that quit message means we're done. Otherwise what we'll do is not client. We need to broadcast their message. So we'll broadcast their message with name. Uh I think that's fine. We'll go back to subline and see. I think that's what they had. Yeah. Broadcast message name. Perfect. I don't know why this is like highlighting like that. That's strange. Um, and then I'm actually just going to do um a try catch in here because sometimes this does fail. So, we're going to say try this except exception. Nope. As E. Print uh exception E. I'm actually going to copy this and make this instead of failure, we'll say exception. Perfect. Connected to the server. I'm also going to have the server print out any messages that get sent. Um, so I think I can do that just by printing in here. So, we'll just print the decoded version of the message. Um, yeah, let's do that. Yeah, let's do that in here. Okay, we're just going to say print f. We'll just say name colon and then whatever they said. In this case, going be message.deode. And I think I have to put UTF. Do I have to put UTF8 in here? I forget when they decoded this. Um, bytes bytes bytes bytes. Let's look over here. Uh, decode. Yeah, decode UTF8. Okay. Client client break if they delete. Okay. While true run equals false. Nice. And then here exception break and break. Okay. Nice. So that's looking good so far. I think most of the client connections actually handled here. This should actually be working. Uh I'm going to run this in the config quickly and just see if this even works and then we'll move on from there. We'll do some tests. Okay, so we're going to say server uh script path. This is chat app server server apply. Okay, let's run this. Started waiting for connection. Okay, so no crashes so far. Let's make a little test script here. So I don't need this anymore. Um inside of client and just see if we can get some communication going on here. So let's go new tile. I'm just going to say test. py. Okay. Now, we need the client code. So, I'm going to steal some client stuff from this. Client's pretty easy. Literally just I don't know why I need that. I'm going to take all that. Uh, we need those imports, too. Okay. So, let's go server uh host port. Okay. So, let's say host equals, and this is actually just going to be localhost. I will actually deploy this on a server at some point if you guys want. Um, and then that way you guys can actually play with me later or you guys can like test out the app. Port equals what did I make it? 5500. Uh, what is why does it keep getting this auto thing? Let me get rid of that. add target equals received define received messages. Okay, so I think I know how to not like that. So this is going to start a new thread and receive messages. This is going to look to receive messages from the server. Okay, so we'll say while true. Um yeah, while true. I'm actually need a I need more globals in here, which is always really annoying, but that's okay. We can do that. Um, we'll say global constants while true. I want a list of messages as well. So we'll say global variables. Okay. While true um receive messages, what I need to do in here is say and I need the client as well. Um client. So this actually needs to go above which is kind of annoying. Okay. And then messages equals that say yeah client socket dot receive. We should really use a buffer size over here too. Buff size equals 512. Say buff size. Um okay. Clientreceive buff size. is I don't know why I put messages in there. Then what we'll say is decode that message. So we'll say msg equals this dot decode. Okay. And then messages.append msg. Okay. Now we're also just going to print msg cuz I want to see that. Uh let's check catch up on chat. Uh, how long have I been coding? I've been coding for like six or seven years. Uh, Python like maybe four or five. Uh, just looking up videos of Python project ideas. It's 2:41 a.m. Good night, man. All right, so we receive messages. Um, what's wrong with this? Okay, we'll just print those messages. Um, that's a while true. So, that's in a new thread. So, that should just be getting all our messages and printing them out. But I would like to send messages as well. So define send message msg um define and actually after I connect receiveth thread start um yeah we're going to go back to references okay so send all right so they're doing something like this client I received a decode possible client has left chat okay so going try with catch there all right let's try that okay so Try except break except we're going to do except exception as e print exception, e. Okay, we'll print the message out that they're getting when we want to send a message. What is it they did here? Um, something like this. So, let's just copy this. My message get message equals msg. Well, what am I doing there? Message set. No, that's okay. That's something different. client.socket. Send message UTF8. Okay, that should actually be good. If message equals quit clients.close, Yep, that sounds good to me. So, now I want to just send a message. Typo and word receive. Have I spelled this wrong? Is it ei? Let's see. You should use Adam as your main text editor. Um, no. I'm not like I like Adam, but not that much. Okay. So, let's do some doc strings. Is it Is it really spelled like this? Oh, it is. Okay. Ei. I don't know why I thought it was the other way. Okay. Receive messages from server. Um, and then return none. We'll say, I mean, this is pretty straightforward, but send messages to server. This is actually important that we're going to take this as a string, not a bite. Return none. Okay, then I literally think I since that's running in its own thread, I think I can legitimately just send messages now. So, we can just do hopefully send message hello. Now, I do need to send an initial message with my name. So I kind of forget how to do that but we'll look at this. So the initial thing is it needs to send a name and then it'll get the name. So I think the first thing I'll send is a name then. Okay. So send message Tim then send message hello. Uh let's see what you guys are saying here. Okay. Um all right test. So I think I can run this in another configuration. Although I'm actually just going to go and do it in cmd. CD desktop. Oh my god, why does it always do that? cd desktop app dur CD I forget what I call this now. Chat app dur CD client Python. No, actually activate. What I call this chat cond list environments um really okay base python I forget what this called test.py Pi ah okay error broadcast missing one required potential argument positional argument name okay so let's go to server and fix that would be broadcast message name broadcast message name okay so let's rerun this okay can't concat string to bytes okay so name That's interesting. So is message not a string? Let's see here. Self cannot concat. Okay, let's see here. Why am I doing that in broadcast? Message should be bytes already though. Ah, name message bytes UTF8. There we go. Let's try this. Oops. Connection connected to server. Okay, that looks promising. Let's try this again though. Server. Okay, started. Waiting for connection. Tim. Tim has joined the chat. Tim, hello. Awesome. Okay, nice. So now the only thing to consider is the fact that uh the first one when I broadcast should just be Yeah. Okay, that's a good point. I probably shouldn't put colon here. I should literally just put name and then we'll assume name has colon on it already. So we can broadcast Tim has joined the chat name cuz name here. I'm literally just going to do blank string like that. And then whenever I want to broadcast, we'll say name colon. No. Uh, broadcast message name plus that. Okay. Okay. So, that's good. You can see it says Tim saying hello. Um, nice, nice, nice, nice. Okay. So, let's get this stop. Stop running. Okay. Damn. Command prompt just doesn't want to work properly. Okay. Server. An existing connection was forcefully. That's closed. That's fine. We'll stop that for now. Okay. So, we just need to actually make it like leave properly though, which is what I'm going to do. So, if we go test, let's say send message. So, I'm getting pretty to be honest with you guys, I did not think I was going to get this far that quickly, but it's always good. Um, what is the chat app for chatting? Can you please describe the code? Guys, this isn't really going to be a like educational stream. Like, I'm sure you'll learn something if you pay attention, but um I'm just kind of going like just going to be speed coding through this. just trying to work on a project. If you guys enjoy watching me do that, then you know, you're welcome to hang around. Okay, so person uh represents a person holds name, client, and ADDR. So we'll say client and address we'll say IP address. Okay. And it say sets the person's name name string return none. I don't think I even use that. Did I just do client? Do I end up setting the person's name? N name [Music] equals person set name name. Although because I already have name in here, it's not really that important that I know the name, but like at some point I might want to know it. So like it's fine to keep that in there for now. Close person test. Okay, I want to try this now. All right, so let's server. Okay, I'm actually going to make a new configuration just for test script path chat app client test. Okay, apply. See this an operation was attempted on something that is not a socket established connection was aborted by the software in your host machine. Jesus operation was attempted on something that client socket I can't even imagine what that would be. Um, message equals quit. Clients socket.lo. Yeah. God. Okay. So then it's going to receive something. Was it something happened on the server here? Established connection was forcibly. Let's just try to connect again. Test. Error in thread. Established connection was aborted by the software host machine. I always get this damn error. I never know what this is. Um, let's go here. Aborted. two it implies initialization establish connection as per your code presence of antivirus firewall network configuration solution disable firewall ensure that etc hosts oh god okay we're not going to do all that right now connection aborted Okay, I think we should be fine there. Let's see. I was literally messing around with something like this. Flax site and everything. Oh man, Django is just too much. Facebook is weird. Now, what are you guys talking about in the chat? 209 people still watching. Appreciate you guys hanging around. I don't I really have no idea what this error is. Let's just stop all exception missing. So I feel like when this happens I sometimes I just need to wait like long enough and then this actually just works properly. Um because some if you don't close the connection properly you get errors which is like something I don't usually do properly. Um client close if we get bytes quit UTF8. Um name message. Actually, I'm only going to do that if they didn't quit. Otherwise, we can just print disconnected. We'll just say name fname disconnected. Okay. Uh server crashed started. Waiting for connections like that. Uh I'd really like to try with two test scripts actually. Although actually I can do this and just do here import time. I forget if time.sleep what this syntax is. Um one second. Just going to check something. What are you guys saying, bro? Not going to lie, you helped me big time. Practically carried me through my first computer science class. So thanks. No problem. Uh, let's go search for time. Uh, seconds. Okay. Following sleep. So, I think I should just do time. Like 10 cuz I'm pretty sure that's seconds, not milliseconds. So, we'll go stick with that. Um, we'll send that message and then we will actually quit. So send message because I want to see if this quit command is what is what broke this before and then server. Okay, so let's do two test scripts. Let's run them back to back. Um yeah, I want to do another one of these. I want to run a second one. Okay, so let's just do server run. Okay, so that's working. Test run. Tim has joined chat. Okay, sweet. Let's run another one. Let's go Joe and let's go test. How do we run a new one? Run test. Existing connection was forcibly closed. Established connection was aborted by the software in your host machine. Okay, so I'm going to assume like see that seems like an error to me, but I think that should just disconnect. I want to see how he disconnected in this because my disconnection is not working. Client.socket.close. So, it sends it. Ah, that's why. Wait. Okay. It sends the message, but then it checks if it's quit. And then if it is, it closes. Okay. Let's see this. Uh, set here. So, I think I just need Do I not have the try catch? I do have the try catch. Exception E. That should be fine. I just don't want to crash on the server side though, which is the thing. So, Dellclient.clo. Ah, it needs to close before it rebroadcasts. Okay, so that's probably why. Yeah, cuz I'm broadcasting, but it's already been closed. Ah, okay, that makes sense. Okay. Uh, I don't know why it needs to send back quit though. client. send UTF8client.close. Okay, so let's try this server. I'm actually going to open up cmd. You know what? This is going to be easier. Let's just do this desktop chat app client cmd. Okay, so let's run the server. Okay. And then let's run another one of these windows actually. Okay. So, let's go P actually base. Oops. Let's see. Python test py. Okay, so that worked. We got two. I want to see it send hello exception. So two messages is messing this up somehow. Test. Let's do time sleep too. See if this works. Existing connect to server exception in thread. Existing connection was forcibly closed. See, I never know why I get this damn error. Um, max connection. Not sure if you meant to be that way or not. Hopefully saves you a bit of debugging time. Max connection. Yeah, I don't know what's wrong with line 87. It's pro. The problem is with the firewall. You think so? Ah, okay. Question is, can I turn this off though? Okay, let's just do this. Watch. Now you guys are going to dodo me. This is going to be great. Whoa. What is this song? Not a fan of that. Okay. Uh, I want to make sure I'm on this right. Spotify playlist right now or whatever it is. One second. Okay, let's go back to this loop. Shuffle. There we go. Okay. And back to chat. All right. It doesn't allow connection from unknown server firewall only if the connection is happening between different computers. Uh, so I think connection board, I don't need that. Okay, let's just run the server again. Okay, let's just wait for this for one second and see if this does anything. Oh, okay. We got a hello. So, it's just this quit that seems to give a um an issue cuz now watch. See? So, now I get that error when I try to reconnect. So, I think I need like a um like a connection limit or something or some way to just quit it so it makes sense when I'm quitting it and it's not I don't get an error. Uh I'm going to not send back another message cuz I don't think that makes sense to do that. I'm not going to do that when this opens. Ah, okay. That would be why I need to remove this person before I before I reconnect. Okay, let's try this one more time. Okay, Joe has joined the chat. Here's if I can get this working really well. It's only been an hour. Wow, dude. We have so much time. Uh, then this will be great for moving on to the web server, which should be a little bit more difficult. Joe, hello. Joe disconnected. There we go. Okay. All right. So, there we go. So, that actually worked. This failed, but I don't know why that failed. So, let's fix that. And then we should actually be just good to kind of go here. Um, exception as e while true message. Um, oh, this would be a good one. If message is quit, actually, I don't know if I'm getting it. It should be getting from that thread, though. So, this is where we have the issue. But, it just breaks anyway. So that's fine if that does that because it doesn't really matter on the client side if this connection is clean. It's just the server side that I really care about. Okay. So I want to get two clients kind of chatting at the same time. I'm going to make um an interface so that I can just type into the thing. So receive message, send message. Okay. So now what I'm going to do is class this up into a um let's do this split vertically uh into just a nice interface to use for my web server later on. Why is it like that? Okay. I don't know why this is all messed up here. Okay, client new Python file. Let's just call this Let's literally just call this client.py. Just could go class client self name. Okay. Now what we're going to do is just say for communication with server what I'm actually going to do in this client because this is going to be specific to h the chat room is store a list of messages. So this client will actually have messages associated with it. And then what I can do is periodically I can just update the window let's say every 500 milliseconds by just grabbing the messages that are here in the client or but I almost want like a broadcasting thing where this client will actually just ping my um my web server and be like hey we're ready for uh to update. I'm just trying to think of how I want to update this and how I want to do this from the client because h so we'll send a message through this interface. This should hold all the messages. But then the idea is how do I communicate back to the web server what those messages are? I could do that through requests. Um or I could do I could do another just communication through another socket if I wanted to to send the message and I could just have it waiting for new messages. So, this will receive its messages in its own thread. Um, so when you initialize this client, it'll just be set up to receive messages and then you can give it h I'm thinking I don't know how I want to send it through. Let's see what you guys are saying here. Uh, exception on line 29 by the way. Yeah, that's fine. That's fine. this module. Um, I just don't know how I want to do that cuz I needs to be like if this is updated I might just constantly check this client from the web server. Is that going to work? H. So, the idea here is I'm just trying to find a way to scalably do this. So, right now this is communication to my server which I'm going to put in to the web server. Um, I want to make it a class. I'll have messages the web. Yeah. Okay. I think I have an idea how to do this. So, let's let's do this. Okay. Okay. Client. Let's do this. Just some constants up here that we'll use. Okay. Messages. I'm going to say self.client client socket equals self.adr. Okay. And then define this. Okay. Define read message self self client. So this is self self. So let's do not self do messages equals blank list. Okay. So this will keep track of my messages. And then here define send message go self as well. When we init this I'll run the new thread already. I think I can run threads within objects on different methods. So that should hopefully be fine. Um receive thread equals that. Okay, this thread actually equals self.receive messages. Okay, so that will start my new thread. So this will just run concurrently updating the messages on this object. Now the only the only issue is if I need a lock on this memory if it's going to be accessed globally so that I don't accidentally look at it twice. Um I think this will be okay if I just make it read only. Um, so when I append a message, no, that's not going to work cuz this is going to be accessing. It should be okay. I should be able to access the object as read only if it's being written to or at least try. Um, let's see. Also, whoever's telling me I have like the wrong syntax, I'm pretty certain that like I have it correct. Um, but you know, you guys tell me what you want. So, let's do send message. So, we'll initially send the message that just says our name, right? So, this will be just done for us. We'll just send message name. That should convert that to bytes, which it does. And then we're good to go. And then other than that, I don't even think I need anything from in here. So, we'll leave that test file. Um, but this should be good for that. Uh we'll do param name string a init object and send name to server. Okay. And then I'm trying to think I might I got to implement some kind of lock on this memory. Uh I know you guys don't really know what that is, but let's try to do this. Okay. Lock shared memory Python. All right. shared concurrent memory python multipprocessing.shared Shared okay shared memory shared memory create a new shared memory block or attaches to an existing shared memory block. Each shared memory block is assigned a unique name. In this way one process can create a shared memory block with a particular name and dim process can attach that share memory block. Okay. This resource for sharing data across processes. Share memory blocks may outlive the original process. No longer needs access. Share memory block that might still be needed by other process. The close method should be called when a share memory block is no longer needed by the process on link. Okay. Name is unique. Um, create. I want to see some example code. All right, there we go. Cuz all I want to do is just put H. Literally, all I want to put in, oh, it's going to be messages. Honestly, I think this might work concurrently, but we'll deal with that after. Okay, so let's just do a method to get messages then, just so this looks clean. So define get messages. Uh yeah, then we'll just return self messages. Return list str. Okay. And just say returns a list of string messages. Okay. So that will be my interface for client. What are you guys saying here? syntax. There wasn't a syntax error, just a typo. Um, I don't know where I personally have no idea how to do it. Let's How about a thread lock so no two threads can access? Yeah, that's what I want to do. Sorry. Thread lock. Thank you. See, this is why I like the YouTube uh comments here. Whatever it is, the chat. Okay, thread lock Python thread synchronization. Ah, perfect. Global item. Do something with global item. If you call this function more than one thread, you'll find the counter isn't necessarily accurate. All right, just give me locks. Locks.acquire lock.release. This will will block if lock is already held. Ah, perfect. Okay, that's literally so easy. I don't Is that all I need to do I need to import anything? Um, lock lock threading. The standard lock object doesn't care which thread is currently holding the lock. If the lock is held, any thread attempts to acquire lock will block. Even if the same thread is already holding the lock. So the following example lock.acquire fetch data first parameter data. Okay, here we have a shared resource. The two access functions fetch different parts. Access function both locking to make sure there's no thread. Now if we want to add a third function that fetches both parties, we quickly get into trouble. Naive approach is simply call the two functions and return the combined result. The problem here is that some other thread modifies the resource between the two columns may have inconsistent data to grab the lock in the function as well. lock.acquire. Okay, I think threading.bounded 74 decrement the counter synchronization server thread can set or reset. God. Okay, I think I can just use a basic lock. I don't think I need to do all this. So how did you make this again? Threading.lock. Okay. Where is that? Rlock. What is arlock? Rlocks. The arlock class version of simple locking that only blocks if the lock is held by another thread. While simple locks will block if the same thread attempts require the same lock twice. The re-entrant. This won't block. Okay. Going to try Arlock. Yeah, I think that should work. Okay. Let's see what you guys are saying in chat, though. If anyone's helping me out here, uh, chat, this is a cool idea. Firewall exception. That was the typo, Tim. I don't know where I I still don't understand what you guys are saying I'm doing wrong. Um, okay. So, let's do a lock then. Okay, so let's do self.lock equals threading.lock. Do I have that from threading import thread? Let's just do this lock. Okay, so we can literally just do that. self.lock it was lock. Okay, so while true um let's see this self.lock.acquire acquire self.lock.re. Okay, that should be good. And then same thing in Yeah, that should be fine. Okay, so let's do this self.lock self.lock.acquire. Um, actually, I think I don't even cuz I'm not modifying the object. I'm literally just returning it. So, I think that's that's fine. And although I might end up like deleting a message or something at some point. So this just do this. Acquire, release, send message. That should work. Yeah, I think so. Uh I meant firewall is still off. Yeah, that's fine. Um what are you guys saying here? Bro, my name is Tim and kids in school call me Tim Hortons like the store. That's funny. I used to get called that, too. or like a little nickname once in a while um for communication with server. Okay, so I think that should be good. So now we have a server. We have a client. I would like to try using the client. So let's actually do that from test script here. Uh we'll delete that for now. We're just going to say from client import client. What's wrong with this now? Client. I think I spelled that right. Okay. So let's just say C1. Ah, so this is going to be good. I can actually make two clients in here in once. Okay. So C2als client um client we'll just do Tim and Joe say C2 send message hello import time C2 send message. Uh, so what's up? C1 send message. Nothing much. How about you? I don't know why it keeps giving me this damn red box. I don't want this box. Send message. And then boring dot dot dot. Okay, so let's do some time. time to sleep one. Let's actually try sending two of them at like pretty much the same time. And then we're going to go actually make a disconnect here just to make this a bit easier. We're going to say define disconnect self and we'll say selfend message quit and then ah that's what I wanted in this. Okay. forgets how I disconnected. Send message if message equals quit. Oh, that should already be there. Okay, sweet actually. Commander A. No. No, I didn't want that. Oh, have I really just lost everything that I wrote? I might have. Oh god. Okay. Well, we did, so it's okay. Uh, clients, it's okay. This won't take that long. name Tim import time C1 send message hello C2 send message hello time do sleep one c2 send message nothing much and then time do sleep five C1.isconnect disconnect. CCT disconnect. Okay, so it actually says the server is running. Um, so server Joe disconnected. Let's see if this works now when our two command prompt windows. Actually, I'm only going to need this one. So, Python Tim, hello. Hello. Name has joined the chat. Name. Hello. Hello. What's up? What's up? Nothing much. Nothing much. Okay. So, it seems to be sending. Oh, cuz it's going to print twice. Okay. So, this actually we got the right message here though. Uh, hello. Hello. What's up? Nothing much. Can't concat string to bytes. Exception. Okay. Let's see where that happened. Um, in the server. I think I have an idea. I think it's probably here. Um, cannot concat string to bytes. See, this would be the only thing I would think. So, unless message just really wasn't a ah I am a genius. Okay, byes TF8. Okay, that's fine. Let's restart this. So, actually worked. I just need to get rid of this print uh because the message really shouldn't print. Um and then what I'll actually do is just check for updates periodically in a new thread. Okay, so let's do that. So let's try this just as a test right now. Um from threading import thread say define update messages and then we'll just say time do sleep 0.1. So just like uh 10 times a second we'll say while true sleep 0.1 and we're just going to say C1 get messages uh we'll say msgs equals for cuz I just kind of want the new messages. I don't really want the old ones. So maybe what I'll see this is a tough one now because I don't know how I want to send these messages through. It could just be a list and we could just update and rewrite the list every time, but it doesn't seem like that's very efficient. Um, let's see what you guys are saying here. Uh, Tim, do you think C# is worth learning because all the gooey offers? Yeah, I like C#. It's good language, bro. How'd you learn data structures and algorithm? Any recommendation? Um, school. also just like look up videos and stuff. Okay, hour and 15. Okay, so messages equals C1.get messages for msg because now I almost want to like synchronize this these messages with other messages. But I don't want this to be inefficient. I just want to get So I'm trying to think of the best approach to take to get new updated messages. Maybe what I'm going to do is just store messages that have ah okay I think I know what I'm going to do in the client rather than just appending all these messages. What I'll do is kind of store like a queue of messages and then well I will append them in like this but then as soon as I get the call for get messages I'll clear messages because that means that I've already gotten u and because I'll have this lock this won't break either. Okay, awesome. So let's do this. So what I'll do is actually clear self messages. I need to return. Okay, let's just do this. I'll say msgs equals self messages copy and then we'll just say self dot messages equals that release the lock and then turn return msgs. Although I'm just going to turn call this message messages_copy. Uh, and then we'll do this here so it looks a little bit better. Messages_copy. Okay, we'll just say make sure memory is safe to read from, safe to access. Uh, same thing here. Is safe to access. Okay, so those locks actually help a significant amount. So what we'll do in get messages is literally just append to the global messages which I'll just store up here equals that. We'll say messages equals C1.get messages. But what we'll actually do is say messages.extend. So this will be a list obviously. So we'll extend all these into messages. And then we could just print I could print all the messages. I'll just print the new ones. So I'll say c1.get messages. We'll say new messages. We'll [Music] say new messages for message and new messages print msg. Now I don't think I need to decode that cuz I think they come in decoded. Um let's check though. Decode. Yep. Awesome. Okay. So we'll do that. Update messages. We'll just throw that in a thread. So we'll just say thread. [Music] Um, target equals get get messages update messages. Um, I forget what I had to do for thread. I got to start it. Okay. So, we'll just literally start it like that. Start. Okay. Well, true for me new messages. And then we'll just say if msg equals equals quit break. So that means we need a run is true to say run. Okay. Message equals quit. Break run is false. Okay. Um so that should be good. Let's see what you guys have. That way he doesn't have to delete them by date or time. Own copy messages and have the server just send the messages to the clients. Um, why store the messages if they're printed out already? Unless you're doing a gooey. I am going to be doing a gooey later. That's why. Uh, let's see. Can you make Tim do you go to W loop? No, I do not go to w to if he's unless using connection. They shouldn't be printed out multiple times. No, they're not going to print multiple times. They should like this is my concept right now. We're just trying to test this. Waiting for connections. Okay. Client object has no attribute lock. Okay. Um encoding without a string argument. Okay. So this is first of all this didn't say we disconnected which is kind of not great. Client object has not treat lock. Really? I swear I made selft talk. What? I have a lock. Um h not sure what went wrong there. Encoding string argument client client line 51 bytes msg send messages. Okay. text. Um, send message send message. So, I don't know where that even went wrong. I think this update message thread is what's giving me this issue. Uh, new message will see 1.get messages because this thread technically. Okay. So, let's just do define start. This is just a test by the way, but this is important if this works because I want to run because this is global. Oh, C1. Okay, now we can't do that cuz thread equals target. So, this like technically should happen before this is running. Um, okay, let's do this then. It's just the order that I'm doing this in which is messing it up. Okay, so C1, right? All right. So, let's actually just do like 5 seconds. C2 send message. 5 seconds. 5 seconds. Okay. Uh, break that. Coding a string argument. I still don't know what the issue there is. 70. Oh, disconnect. Okay. Bytes. Oh, cuz I can just Oh my god. What am I doing? Bytes GTF should work. myself clients socket.lo if I send. Okay, so let's see this. Let's see. The best coding project to have is one that makes you want to work on it all the time. Uh, wow. It's actually so perfect. I've been working on Discord bottom and trying to make a connection between a website. Uh, also, I think you should iterate over list for your test messages so you don't have so many sleeps. Uh, it's fine. I'm just like, this is just a test right now, but it's okay. So, it's not really that important. Uh, let's go [Music] server. Okay. Okay. Name has joined the chat. Tim has joined the chat. Tim said hello. Name said hello. So, this is actually updating on my thread, which is great because it's not printing out. Tim says what's up. Um, thank you Adita for the good luck. Name says nothing much. Let's wait for the disconnection. And let's wait for the next disconnection. can't concat string to bytes. Um, okay. So, I still don't know why I'm getting that error, but looking pretty good to me. So, it's saying can't catat string to bytes um on server side, which means that somewhere I'm sending not bytes data. So, I guess message here might not be bytes, which means I might be sending it from the client at some point as not bytes. But I don't know when I would ever not be sending bytes. Um, so receive message append cuz the only time I send anything is here and I'm convert message to bytes. So I'm kind of like don't really know how that's erroring. Um, let's see. server. Those lights quit broadcast. Aha. Cuz this assumes that this is already in form. Aha, there we go. Okay, let's try this now. Um, stop. Let me out of this. I hate when this doesn't work. Who knows how to forcibly exit a thing? Command C is not working. Uh, okay. Let's just do that. It's fine. We can just run it in this. Okay. So, server test. People are asking. I'm using PyCharm right now. That's what it's called. Tim has joined the chat. Tim says hello. Okay. I want to watch this now. Tim says hello. Name says hello. What's up? Nothing much. Let's see the disconnect. Disconnected. Disconnected. Let's check test. That's fine. This is going to happen every time just because who knows? That's whatever. That's what happens when it disconnects. Boom. Okay, so we got the server working. Sweet. So, we have a pretty good interface. Um, let's look run through this code and make sure that it looks all nice and pretty first. So, this seems honestly fairly clean to me. It's nothing that seems like too complicated. So, I'll just do a little comment here that says first message received is always the person's name. Um, that broadcast welcome message. Okay. Well, true. Wait for any messages from person. Um, receive message. If message is quit, disconnect clients. Uh, else otherwise send message to all other clients. Okay, this is good. Uh, exception and then that's fine. Wait for connection while true. This do I even make run false? Yeah, but I could just break. Let's make that cleaner. Just go. Wow. True. Wait for any new connections. Actually, that should really be this line. Um create new person for connection and then exception thread. Okay, that seems good. Name equals main server.clo. Okay. Uh yeah, open server to listen for connections. Okay, let's see what you guys are saying. Um, he said till 12. Yeah, I'm going to go for probably four or five hours. We'll see. Depends if I get tired or not. Um, in your video about AAR pathf finding algorithm, what design did you use to integrate the code for the guey with the code for the algorithm itself? Um, what was what design did you use? I just used like I there's no I didn't use a design principle. So, all right. So, we've been going for about an hour and 24 minutes. Honestly, this is a pretty decent start. I mean, we have the working chat aspect. Um, seem to be working actually fairly well. And I'm honestly very surprised that my like memory lock and this update messaging thread is actually working. Um, I don't really like how messy this is, but it's fine for now. Uh, break run equals false print message. So this is just be yeah this will be the display uh while run time to sleep update every 1/10enth of a second um new messages get any new messages from client um add to local list of messages uh for message and new message display new messages updates the local count uh not local count the local what is it what did I say here list of messages return none okay client client target thread That's fine. Okay. All right. So, now we need to actually build out the um web app. So, this is now flask time, which I'm going to have to reference. You guys are going to laugh when I do this. Um but I literally just look at my own tutorials sometimes because it's just easier and I remember writing them, but that's like honestly what I do. Oh, look at this. Tech with Tim giving me ads all over. Okay, so let's go to Flask. Okay. I don't like this popup one. I don't know why it's doing that. Okay. A basic website. All right. Who remembers what to do here? Ah, okay. Nice. Okay. So, the idea again, guys, for anyone who's confused right now, I've just made the messaging server. Now, we need to actually make the web server that I'm going to connect to localhost on here so that uh we can actually use like a guey to send and receive messages. I'm only an hour and a half, so I feel like I'm like killing this right now, but we'll see cuz this web stuff is like not my specialty by any means. Um, so we'll see. Okay, so let me just have a look at what people are saying here. Let's take a quick I want to take a quick breather for like 5 minutes and just read some chat. Um, so let's just do that for now. Recline the chair a little bit. Um, and take a quick break. I don't want to burn myself out too quickly. All right, so let's see here. If you guys have any questions, now would be the time. I'll just get answer them for a few minutes, then we'll get back into it. Tim is going to have a user interface. Yes, he is. A guey. So, is each client connected to his own thread? Yes, it is. Uh, which task do you use Python for? Like web development or things like what Tim is doing right now. I use Python for literally everything. Uh, looking forward to seeing the guey, Elma. I use my own stuff, too. I like I'm liking Hug more and more recent. I don't know what Hug is. I always do that. I go back to my previous GitHub projects. I forgot something. Do you recommend using Flask or Django more? For most of what you need to do, Flask is more than capable unless you're going to build like a blog site or something. Maybe you want to go Django. But I just find Django is kind of over complicated for like mostly what I need to do, which is just displaying a few HTML pages and just a little bit of back-end communication. And you guys will see I'm not going to do that much with Flask. It's just really going to be like a display for the guey. Um, error code in C. Have you ever thought about learning a new programming language? I know many programming language like I mean I've been learning Go recently just for school. Um, C, JavaScript I've been using a fair bit. I might actually use some in this project. We'll see. Um, what else do I know? I don't know. Like PHP I did use that a while ago. um C#. So yeah, I know many programming languages. Uh do you have thoughts on Flutter? I've never used Flutter, but I've heard it's very cool. So um I'd be interested in using it. Tim, please make a tutorial that covers all of guey feature Python offers. That's impossible. There's like millions of things you could do. Ever coded in C? No, I've never coded in C. Um best language for backend. Probably Python, although NodeJS is used quite a bit on JavaScript. Last time I've been making programs to automate stuff on my computer. Latest project is downloading sorting while allowing the user says own sorting settings. That's cool. Send me your first year CS stuff. Never. Uh, what are some intermediate ML project ideas? I have like a whole video on those. So, not going to go through that now. I love you. Yeah, you too. Uh, how do you normally sanitize your SQL inputs? Um, I don't even know what that means, so I'm going to go on a limb and say I probably don't do that. What's your thought on artificial intelligence? That's a very vague question. I'm not going to answer that. Any ideas on how to make our own programming language? Nope. I would assume you need a compiler. You need all this assembly stuff. I don't know. I haven't really looked into it. That'd be a cool kind of video series though. Making our own programming language. Do you know the math or physics for your projects? For example, like Tower Defense. Um, I usually Google it, although I'm pretty good at math and physics. Like I know a fair amount, like enough to kind of get by. Like I made a 2D golf simulator um when I was younger in like grade 11 when I was in physics. So I have a bit of background in that. Uh would you do end to end encryption? Like what's up? No, I'm not going to do that. Any plans on selenium? No. Uh, how can I learn programming fast? Why not? I need help in math and physics, too. Well, you probably know more physics than me if you're in university physics. What is your most proud project? Honestly, probably the one I made in grade 11, which was this. It took me like two months, and it was a 2D golf game. I' I've showed it many times before. Uh, what is Tim? Can you please make a chemical balancer equation? How long you go to school for? I'm still in school right now. I'm in second year. So, how are the threads communicating messages back or do they? Um, I'll go through the communication protocol in a second. Any idea how to create your own OS using Windows? No. Sanitizing SQL input is securing your SPL injection. Oh, okay. Ah, we'll do they do it automatically for you with most Python um modules. How many hours? I'm going to go for another probably three or four. Hey, Tim. Greetings from Argentina. Hello. What uni do you go to? I go to Ontarot Tech. I'm not going to tell you. You can find out what universe I go to very easily, but I kind of leave it as a challenge to people that want to figure that out. Um, are you thinking about making a tutorial on web scraping? Maybe. Is this going to be up as vid? Yes. Um, please make a series on socket programming. Good idea. I think I have I have I not done one on socket programming? I guess maybe I haven't. Uh, no way you go to UI. I do not go to UIT or UFT. No. Um, would the app you're making scale well or do you think you'd start having memory issues with several hundred users at once? That's a good question. Um, what I would do if I was going to have I would have multiple chat rooms on the server so it wouldn't be that much of an issue. Like I'd limit the amount of connections to one specific chat room and then scale out server-wise. But I'm not going to really worry about that for this at least in this stream. Um, you live in Toronto. I don't live in Toronto. Um, have you ever worked with Cotlin? Uh, no, but I work with Java all the time. What do you recommend for first job? Okay. Wow, you guys are asking a lot of questions. How many people? 183 people. Only 272 likes. If you guys have not liked the video yet, make sure you go and do that. Um, let's come back here. It's going to What was our peak concurrent viewers? Let's have a look here. Well, at one point we had 272. Wow. So, what motivates our YouTube channel? Um, shout out my name, Shioam Batia. Bati. Is that how you say that? Um, I just want to see my name on the window. Lol. Tim, can you please make a series on networking with Python? I've done like online game development with Python. Um, all right. What I'm going to do, guys, is go grab some more water and I'm going to come back and then we'll get back into creating our UI. BRB if anyone asks. I will be right back. All right, I was fast. I'm back. All right, reminder. Go hit that like button if you guys have not yet already. You know, it's not every day I do uh these four five hour streams. Um I just want to check my phone quickly, guys. Just give me one [Music] sec. All right. Okay. What were we doing? Flask. Okay. Um approot run debug equals true app.root um ah decorator at app.root root we'll do this is just slash um okay so define home literally like alt so now I'm trying to think about what I want to do for this uh return template uh let's do name now I'm trying to determine what I actually even want to do here like I'm thinking I want one page that pops up a uh and I got to get my chat window back up here before I get lost I want to have one page that pops up at the beginning and just asks you your name. And once you type your name in, you'll get put in a chat room. And I'm going to buffer the amount of people to the chat room to be like 10 people. Um, and then if someone leaves the chat room, like you'll be in quue to go next. So that will have to actually happen on the server, which will be a bit more complicated later on. But for now, we're just going to handle it assuming that there's an unlimited amount of people that can join the server. So, what I'll do is pop up a thing saying like put your enter your name. I don't think I really need to make that a new window necessarily. That can just be like I could JavaScript that in the page. Just make one page. So, I'm thinking flask is literally just going to be responsible for a little bit of backend stuff happening like cuz now I'm trying to kind of remember what I should do to send a message, right? Cuz I need to send it through the back end. So that means I need to somehow send the data of the message. See, is there any way to call like a Python function from JavaScript? I want to see if I can do that. Call Python function in flask from JavaScript calling. Let's see you can simply do this with the help of Ajax. Okay. Background process. background process happening without any refreshing. Okay, script. I'm going to leave this up. Um, type Ajax Google APIs jQuery min text function bind click function JSON. I can do that. Oh, wow. I didn't know you could do that. Comma function data trip terms overridden mean if you want for example to use an a tag to jump to a different location on the page it will activate the Python function but no longer function as a link to be solve additional JavaScript okay let's see uh Tim are you alien yeah um you'll probably need Ajax okay someone even told me that have separate pages for login and chat um okay fine do two separate pages. Let's go to sessions. All right. Um session. Okay. Don't crack my secret key, everyone. All right. All right. So, let's do um define root. So, we'll call this slashhome. Yeah. So, I guess do I need to define session? No. Okay. We'll just call this one define slash login. I mean, it's not really going to be login though is the thing. like it's just going to be actually I could do it like a login log out but there's going to be no like encryption security. It's not going to save your stuff. It's just I just want it to be a test like this just like a fun kind of app like it's not there's nothing be crazy. So we'll see here. Uh I'm just kind of trying what I want to do here. Turn render templates. Okay. Um can I I think I can do can I add another decorator here? Okay. I'm going to say if let's see here uh name key equals name. Okay. If key not in session then turn can I no. What the heck? Return URL for home. Um, redirect. Okay, that's what I want to say. Redirect. What's wrong with this colon expected? What do you mean have a colon? If name key not in session. Am I just being an idiot right now, guys? What's wrong with this? Um, I like the security key. Okay. Uh, all right. Name key not in session. Why? Why can I not do this? Colon expected if someone tell me you forgot the in. Ah, thank you. I literally have been reading in while it's just not there. Mercies. This is why we have chat. Okay. Render template. Uh otherwise, render template. What am I going to call this? Index.html. Okay. So, I guess we're going to need a base template. I mean, I'm not like what am I going to I don't know what I want this website to look at look like. I'm thinking it's literally just going to be like a sidebar that says login, log out, chat, and like that that'll be the most. Um, okay. So, let's go. Where was I? We've lost it. No, not index main. Okay, here we go. So, login. Okay, say app.root slash log out. Um, define log out. Um, my value session. That's what I want. URL for um log in redirect okay at app.root root that's fine. Home log out log in name key non session otherwise then here we'll say name equals session name key because we're actually going to need that. Um yeah. Okay. Login render template login.html. Okay. Render home. Um, yeah. Index HTML. What are you guys saying? You can look at the WordPress themes if you want. Not sure if you get an idea from that. Uh, it might be nice to have a buttload of coders helping you even if you are pro. It's very nice. There's a stream recorded. Yes, it is. I like the security key. You forgot the in. If not, okay, let's see what else we got here. Oh, what doing there? [Music] Uh or make this permanent session. Actually, I don't even want a permanent session actually because that's fine. Okay, so login, log out, home, pop user, but this isn't user. This should be name key. Name equals name key. I'm not using name right now, but we will use it later. Okay, so this should actually work. Now, we want to get a little bit of HTML. Oh god, I hate coding. Hate HTML so much. It's okay. Just do this. Um title. Sorry. Let's go. Just going to do percent. So I'm going to code this. Is this an index? Oh, this should be here. Okay. Can they call this block title percent and block? I don't need this anymore. Actually, I don't need this anymore either. Okay. End block. Uh, that's fine. Okay. What are we saying here? Just have the basic chat app layout. He imported redirect template, but I don't know about redirect. Hello. Input on bottom chat messages main window. Then in some bar have a list of other users connected. Um, HTML is boring. I know HTML is so boring. I'm trying to get out of it as soon as I can. Okay, let's just go body tag. No. What the? See, this what I don't understand. This auto correct sometimes is ridiculous in in PyCharm. It just doesn't work. Okay, body like Okay, so I want to just Oh man, can I just steal like a Bootstrap website theme? Um, free bootstrap theme and website template. Let's see. I want something simple, easy. What do you guys think? HTML makes no sense. It works. I feel you with the auto correct. Um I want I just want something so simple. Is there like categories, themes, landing page, personal, corporate? I don't know what this is going to be under, you know? Like I just want something very simple, very easy. One page. No, but it can't be like that. It's just got to be like a H. Yeah, I'm having a feeling that I'm not going to be able to do this. Greetings. I'm 10year-old from India. I love your videos. I think How about a blank page? See, I got to start with something. Coming soon. Restaurant, health, landing page. No. Bootstrap. Okay, let's go. Simple, free website themes. It's seeming like I'm just going to make it, guys. At this rate, I'm thinking like literally just here. Let's Let's draw something. Um, let's get the drawing tablet. Dude, use boots. Boots watch. I don't know what that is. Bootswatch. You guys think I should use Bootstrap? Just give me a uh let me know. Boots watch. Let's check that before I start. I don't know what that is. Is that a thing? Bootsatch. Bootstrap. Why Bootstrap? I don't know. Bootstrap's just the only thing I've like really used before. Easy to install. Customizability. Tune for get plugged in. Open source. Jet block. Oh, they have some themes. What do we I like I kind of like this vibe like this blueishness navbar. Oh, it just has some like basic Oh, this is sweet. Okay, let's use this. How do I How do I use this? Okay. Flat and modern seamlessly connect. Like I don't know how to use this though. Ah. drop, bro. Use materialize. Make it in paint. What is materialize? Let's I'll have a look cuz we have some time. So, uh, materialize. I'm just going to copy your thing. Let's see. Ooh, I'm using bookmark. I'm bookmarking that. All right. Speed up development user easy to work with showcase. Explore our showcase. Oh, this just looks like so simple. Okay. get all our themes for $59.99. Damn it. Um, I could just buy it, but like I don't really want to do that when I can just use Bootstrap. Let's see. Okay, you know what? We're just going to go Oh my god, I'm an idiot. I can just click on it. It just gives it to me. What do you guys like? This blue one, this green one, or this like grayish one? What are we feeling? Um, the skeleton framework. What is skeleton? I don't know any of these web frameworks. I'm not really like a web guy to be honest. What? Skeleton web framework. Okay. Light as a feather at 400 lines. Damn. So, these are grids. buttons. I can mess with with skeleton tables. So, I need a scrollable um view somewhere. Bootstrap has examples on their website. I just got in a chat app. Too many choices. Use all three. Top one, blue or gray. Okay, let's just use this. You know what? Damn. We're just going to use this. Um I think I need to like surely there's like a script thing I need to import though for this. Let's just see. Uh, easy to install. Well, easy to There should be a button that tells me how to install it. Uh, want more? I'm fine. Help. Okay, CDN Bootstrap CDN. You know what, guys? We're just going Bootstrap. It's It's It's too much. I know how to use I know how to use Bootstrap. So, we're just going to use that. Okay. Bootstrap most popular HTML. Get started. Okay. Um, then copy. Okay. So, all you web guys out there, should I be loading my link in the head tag? I'm supposed to put JavaScript at the end of my body tags, right? Yeah, I think so. percent content uh percent and block. Okay, I feel like I need to put this in like a container div or something. Um, div it's like container. I think that works. Starter template head script script link rail meta. I need this. And then let's move that back. Langen. Okay. And do I really need this doc type HTML? I don't think so, but we'll put it in anyways. Okay. Okay, so this is actually going to be called. So I go to website templates rename to base new HTML file. Let's call this index HTML. Oh my god, it auto it automatically does that for me. Are you kidding? I don't even want this. extends base.html HTML percent block title say home percent and block percent block uh content percent end block. Okay, let's see this. All right, there's a download button next to preview. Just copy. Yes. Is there lang for English? Do you No, you don't really need it. Yes. Hello. Uh, will it be available later on YouTube? 3:00 a.m. Yep, should be. Um, this will be uploaded after, guys, don't worry. Um, okay. I'm not using the skeleton framework. Forget about that. Box sizing. Also, like this is just going to be for desktop. It's not gonna I know this is like a mobile first framework or whatever, but this is really like this guey is just to be able to use this. I don't really care how it looks. It's kind of just like, you know, it's that's just the way. Okay, so container. Okay, sweet. So, I think container is fine. I want this container to be like fluid center. Um, full width container spanning the entire width of viewport. Container classes responsive fixed width container means max width changes at each break point. Okay, responsive containers are new. Uh, already specified class is 100% wide until the specified break class. Um, that's fine. I don't really care about that. Responsive break points. We're not going to deal with all that. Um, I want it like centered though. Components. Let's see this simple primary alert. Check it out. Additional content JavaScript behavior triggers. What are you guys saying here? Um, love the way you're doing these things. Uh, love from Nepal. Nice. Nice. Uh, okay. Let's go. So, what am I building right now? I got to even f Okay, let's build a sidebar first. A knob bar. Just steal one that I like. I don't really need like a search to be honest. Um, something like that. I could put like my logo in the bar. Let's just do like a simple navbar. Um, forms navbar text navbar with text. Aha, this is what I want. Okay, so let's go navbar navar content. So to change the color, you just go navbar dark. Okay. So, let's just take this one for now. Uh, we'll change that to be dark after. So, we need that in the base. I'm going to go. Okay. Um, data collapse button, navbar, alt. I don't even know what a lot of this does. Uh, disable. We don't need that traffic. Okay, I'm going to say log in. Log out chat. Um, this navbar. So, this doesn't really need to be a I can actually just make this like an H1. Oh, it literally Oh, it auto changed that for me. That's kind of sick. Okay. So, navbar. We're just going to call this chat app. Okay. Let's alt markup. What's wrong with this? Element button is not closed. Where? So, I messed something up. slashbutton button. Don't know why. Nav span navbar toggle icon navbar toggler. What the heck? Why is there two of these? I don't think there's supposed to be two of these cuz these look the exact same to me. Um, okay. Yeah, that would probably be I don't know how I managed to do that. But let's let's just get out of that. Um, there's not a second button. Close tag. It's actually one note useful. Yes, more live streams. Um, I'll probably end up doing this tomorrow as well. Okay, so we have base. This just extends. I think that's how you do it. Again, a lot of documentation here to look at HTML templates actually. Template inheritance. Did I not do template inheritance in this one? No. Okay, big plug. Go to techwithtim.net at if you want to see what I'm looking at. Um, okay. Let's see. Extends. Extends. Extends. Extends. Aha. There we go. I think I did that right. Okay. Let's just try this. No. H1 test. Okay. So, let's actually add a configuration. Call this web server chat app website flask. All right, chances this works the first time. Let's see. All right, let's try that. Uh, Jenga exceptions template not found. Login. HTML. Ah, okay. So, that would be here. Um, let's just go. Oops. Name log in log out is not home. Name key not in session. Let's just do this. Some little cheats right now. Oh, what does that mean? Oh, I don't think I can do that. Okay. So, let's just do this. Okay. [Music] Run. It's going to run now. Okay. Testing. Reload. Okay, that's fine. Boom. Chat app. Let's go. Woo. Chat in. Chat. Log in. Log out. chat up. Boom. Look at this. Wonderful. Okay, so we are just doing great things now. There we go. Now it's time to make the little chat window. Um, and the login thing. Okay, let's see what you guys have. [Music] So, I actually want to test before I go too far with this, how I'm going to send data from the like a button on this page. Like I want to click a button and then call some Python function here, you know, define run just print clicked. So, someone like I saw this thing saying I could use Ajax. I don't really use Ajax ever. I also need to remember how I can someone if someone could give me the code to load in this index.js file from my static folder from in my templates folder that would be wonderful. Um yeah. Okay. So let's go. We have this. Fix that. Um block contents. Find where it is. And now I want the button. So let's just add a button in here. Let's just say button. Uh what I don't what are even the parameters for the button again? Like how do I call a JavaScript function from the button? Can I do like text? No. Say button ID equals btn1. Let's just see. There's surely I can just steal a button from from bootstrap. Um okay. Let's go. Buttons. This is going to be the most painful part, by the way, guys. As soon as I get backend coding, it's like zip. But like this is just so painful. I just really don't do front end stuff ever. Uh, okay. Let's steal a secondary. Is there any better buttons? Let's steal large button. Why not? Okay. Button. Large button. On click equals um, you need name. On click equals function name. Yes, it's on click. I think it's button on click code hide button. It's pretty ch Okay, sweet. So, we're going to do that. But I need to load in I'm actually just going to look at another GitHub repository of mine that that shows how to do this. So, let's I don't need that anymore. Let's see here. GitHub. Um, so this is something I made at a hackathon. You guys probably would have seen it, but I remember now how to do this because it said so in static I have the JS and then in templates I would have loaded that wreck stylesheet. But I don't know how to load it. Oh well, it's not going to be stylesheet. It's going to be script. So if I'm using Ajax, I have to load in Ajax, I would assume. Okay. So I'm going to take this and I'm going to load that. Do I have I already loaded that? No, I haven't. Okay. So, let's load that. Then I want to load my own script, which I forget if it's down here or not. I just wrote an embedded script. I don't want to do that. Um, script script script script script. Freaking scripts all over the place. Jeez. Try to ch train the chatbot. Oh god, that'd be interesting. Uh, index.h. HTML. Surely I load damn script in here somewhere script script script. Damn it. Just inline JavaScript. I don't know why we did that. Can So I'm honestly I'm almost just thinking that the fact that I put this in the static folder should just make it I'm going to look it up. Let's go. Okay. Loading JavaScript flask script. Move it to static subdirectory. Generate a static URL for it in Jingga template like so. URL for static file. Okay, nice. And just load that there. Static map. Let's call this index.js. That should actually work, I think. Um, yeah, I think so. Let's see what you guys are saying. Try No, it's Flask. Flask is better. I mean, it just really depends on what you're doing. Um, yeah. So, also, if there's any issue with the stream, let me know because it's saying that I have like a bad connection or something, but it usually says that and then there's like nothing wrong. So, all right. So, we've done that. index.js. What I want to do in here then, I don't need to really write the script tags. I think I think I can just literally write the JavaScript is do that ajax thing. Um, which is this. Okay. I guess we could leave it like that. Okay. A hyphen test. So, I need bind. Oh, I can just bind the button. See, I don't want to do that though. Is there any way I can not bind the button and just cuz that means that only I only load this. Okay, let's do this then. Load this after body tag script. Okay, what are you guys saying? Script text JavaScript script l uh yeah, I know the thing is it's different cuz it's like in in uh Flask it's different to load it in. Uh what do I want to do now? Index.js. Okay, so a need an ID on this button then. ID equals test. So I don't even want to do an on click. Just going to do this click. Oh, it literally has it. Okay. So pound test function background process. So that's not what I wanted. I wanted didn't I literally call this test server. No main. No. Run. Okay. Do nothing function data. Um, why do I even need this run? I don't even really understand why I need that, but it's okay. Anyways, let's Yeah, let let's do this. Uh, okay. So, let's go home run large button. Okay, so here. This doesn't look to be working. I think I might need to just reload this. So when I click it, let's actually do a test here and see if it's actually working. Also, like I don't really know the difference between Ajax and JavaScript or even like I don't really use Ajax ever. So that's this is like interesting. Let's go inspect. Uh oh, this is not defined at index.js1. I don't know what does anyone want to help me with that? Uh internet is not so what is it connecting two languages? I forget. I just literally have no idea how to use this script tag taxi with JavaScript. Do I need to put a script tag in there? I don't think so. Um jQuery Ajax. Maybe it's saying it's not defined because I haven't loaded that other script first. Yes. Yeah. Okay. Ajax is async JavaScript and XML. Okay. Uh, no. Put it in your HTML. Should I just write this in line? Okay. Let's let's just see this. Um, okay. Now, get JSON is not a function. HTML button dispatch. Um, see, no. Uh, ID test. Is there a reason do I not need quotation marks for ID? That's interesting. um test function false because I'd rather write it in a separate file, but I don't know if I can do that. Let's see. Base index equals allows you to fetch data from REST API without refreshing the page. Yeah, that's what I want to do, but I just like don't know. Uncut pound.json is not a function at HTML button element. Okay, so let's lally copy what this guy had and see if this works. Oh, it's saying it needs to be in a form. Maybe maybe that's why. Let's see. Form. I'm relying on my front end guys here to be helping me out and I'm not getting much assistance. Let's see. Uh, wait. Why did you take off the quotation to the ID equals test? I don't know. It's just like it showed that I didn't need it. So, like I mean I'll put it back here, but I don't think it makes a difference. Um, let's see. Okay, large button. It's not a function. Okay, so that didn't help. Um, so that's that's running the button press though 100. Try create website. What version of jQuery you have this? Just use the fetch API. Would you ever create a program? Okay, let's just do see if I can do something else. Call Python function in flask from front end a test. So this same thing I don't like this star thing. You misspelled background. Notice you wrote background process test JSON.html like this is supposed to work. background process test slashrun. Um, okay. Maybe I do need to do a test. I mean, I don't know why I need a though. Doesn't make any sense to me. Okay. Let's see this. Let's go. This run. Let's try it. What are you guys saying? Use full version of jQuery. Some version doesn't include get JSON. I think you need to import some script sources. You can put an on click. Ah, okay. So, let's do uh this. Dang it. I closed this. So, where is his script tag importing? Okay. JQuery. Let's try that. Base Ajax. Ajax jQuery min should load that there. I'm actually gonna load this in the head just so it's loaded already. I know it's you're not supposed to do that, but it's whatever. Okay. Script head. JavaScript is sync. You're using jQuery before even it load. Your button isn't wrapped inside a tag. Um I think it is now. Uncut get JSON is not a function. jQuery slim. Okay, so you guys are saying I'm using the wrong version of jQuery or something. Uh, jQuery Slim. So, you're saying use different ones of this. Okay, let's just go buttons flask HTML cuz the only thing this guy even imported was this script tag. So, maybe I just need to make it sure that it's below it then. So, I could load it somewhere else then. Okay, cuz he doesn't even have this. This makes a lot of sense. I can relate to it a lot. Uh, you feel so stupid doing this, though. Your button isn't wrapped inside attack. JavaScript is sync using J. Yeah, I once I get this done, it's just like it should be good. Okay, let's try that. Let me just Yeah, I mean like I want to say that that that'll work. Same thing. Uh, you can also just use the JavaScript fetch API. Okay, let's just try that. I don't know what that does. Fetch API. Uh, fetch fing request response objects allow them to be used whenever they're need in the future. Yeah, I was doing flask app. find myself doing the same crap at the end of your scripts. Remove the slim library. Okay, that's this. Let's try it now. Oh, okay. Interesting. All right, so slashun not found slash run http. Okay, so I guess I don't Okay, so that actually worked. So, whoever told me to move is probably yelling at me like, "What the heck? Why have you not been doing what I've been telling you to do?" But it's okay. app.root slash run. So, I think that actually works. Um, let's do this. 500 the view function don't return val response. So, I want need a root. So, the only thing is like I don't really like how this works. So, he's saying root background process return nothing. Can I do that though? It's saying app.root/json. Um, okay. Because it's saying something get json. All right. Let's just turn none. Okay. Okay. Boom. We got it. Let's go. All right. Sweet. Okay. So, that's actually working now. So, that's okay. That's sweet. Awesome. Okay. So, now we can actually start doing some things. Nice. Okay. So, login. Actually, I don't want this to be the main page. I want this to be the main page. Or actually, yeah, we'll make login the main page. Let's start doing login now. I'm just going to test displaying images and stuff later. Client. Okay. Test.py. We don't really need that right now, but okay. So, main.py. So, this actually needs to access the um client information as well. So, I think I might actually just put the client folder inside of website. Uh, that would make sense actually. Let's actually cut and paste. Yep. Okay. Okay, so now we have client in there. Just make this a package to make it a little bit easier pi. Let's say from client import client from actually I think that's literally all we're going to need. Okay. Um Okay, that's pretty good. Do that. Now for main, we're just going to say import from client. I think that should actually work. So now it's saying client's not defined, but we should be able to get that. Uh, you can use reactive flask. Is he Tim? You are so damn smart. Is he making this only Python? Is he using uncode? I'm using other code, but like god do I not really know how to do it. Uh maybe return maybe the run endpoint should return JSON. It doesn't need to return anything. Everyone is bad at doing front of stuff. I mean do you really need to know HTML 5. Okay. So name key on session. So let's actually do the um login. So I want to get users information from the page. Return that in just a get request. So we could really just say actually we'll do it I guess we'll do it in a post request methods equals post comma get uh if request dot method equals equals post uh actually is it lowerase or I think it's uppercase post then we need to get quest uh I got to go back to Tech with Tim tutorials. Forget this Tim Flask and HTTP methods. All right. What we need to do here, quest form. That's what it is. Quest form. We're just going to call this, I guess, name. say session dot and then okay so that should be fine we'll return the render template either way for login um actually if they logged in with post let's return redirect URL 4 home this will say if name key otherwise yep name equals that Okay, nice. Um, and then this. Yeah. Okay. So, we'll just store a name like that for now. Although, I don't actually know if we we don't really need to do that because we just have it in the session. Uh, well, Tim forgets things. He goes to his own tuts. Yep. Uh, oh, $5 super chat. Um, TFW, you have to look at your own tutorials, man. That's what I do when I forget. I look at my own tutorials. I mean, they are uh I know they're written well, so Okay. So, login. Now, this I just hate front end stuff so much, man. Okay. Let's make a new static um template. New HTML file. Just going to call this login.html. Don't actually want any of this. Copy this. Um login block content. Uh suppose I don't really need that. So when I log in, I'll have like a JavaScript function that just So we'll just do this actually. JavaScript index. Uh can I literally just do function validate? Someone remind me how I write this damn stuff. Function validate. I don't think this is a typed language. I think I can just put like name. say if cuz this is going to return a boolean. I don't even dude I literally was teaching JavaScript before. I don't think I need to to have this if uh name.length like what is the length property on the JavaScript? Uh let's see this. Let's just go to see I want this still JavaScript example code. Uh images. Okay, freaking Ajax, man. Uh, I just all I want to do is literally just check the length of a name. Okay, let's see. JavaScript length of string. Okay, it's literally length. Why is it not giving me the sun? Okay. Uh, load jQuery based HTML instead of all template files. I don't like JS. Um, string.length. See, I'm like writing length though and it wasn't giving me the uh the thing. So, I was just like, okay, length. Okay. So, if name.length greater than equal to three. I'm going to say you can't actually. I guess you could have a twoletter name. It's greater than equal to two. Return true. uh else. I should just do this return false. Although I'm pretty sure I can literally check that in line. Um it's fine. We'll leave that like that for now. Okay. So, index html uh base login. Let's get a little login script going here. Um Bootstrap forms. I want like a nice little window that just says like login here. Um, and that's like about it. Let's see. Forms. Like a form like this would be nice where it just says like input your name, pops up in the middle of the page. Could literally have it be like a Let's see what you guys saying. Um, nothing too important. Okay. Read only input here. No. Okay. I kind of want like this. Uh oh, not conf name here. Submit. That'll go in the middle of the page. Okay. So, we'll see if I can do that. Uh form in line. static email too. Um, what does this look like? Oh, no. I want this. Did I copy the right one? I think so. Form group MB2 email. Is this Oh, that's in like a box of its own. That's interesting. Back. Um, stack email value. Ah, okay. value equals um enter your name. This is going to be just my like scuff thing for now. We'll change it later. Enter your name. I guess we'll call this static name too. Um static email to for label for static name to uh div form groups input password. say name um class password no I'm just going to say name two name two name actually we'll say first name uh oh I got to check there's no space in it too why were you to make same thing that already exists make new thing bro I don't know man I just wanted to make something that was cool so anyways confirm identity let's say submit submit uh button button button submit okay and then when I click that this form should send a actually let's say this method equals post um type submit input type no text form control let's say input name two why is it saying two why do I need two why can't I just do input name okay button primary submit commit. That should work I think. Uh I could do an on click to the JavaScript to make sure. Uh okay, let's just try that though first. Okay, so main comes [Music] here. We log in post. That should actually work. Post request form. Okay, let's just try this. Oh, not running the web server. Can I import client from client? Okay. From client num pair package. Fine. All right. New Python file netit_pi. Okay. I just want to go from client. Damn it. Main from client. Import client. I always forget how to do this. Cannot import name client. from clients. Oh, it's in this client. I think it's like this. Okay, there we go. All right, reload. It's your name, Tim. Submit. Okay. Kier name. That's fine. Let's go back and change that. So, it's no longer name. It's input name. Let's just printest form. Uh, continue bad request. Let's do this. Server could not understand input name. Immutable dict. Oh jeez. Okay. Um request form sent a request that pro that could not understand. All right. back to tutorials request method. Okay. Templates post get under template. I want to see what this template looks like though. Okay. form action equals pound goes to that. Okay. Actually, yeah, submit. That should work. Stop and rerun. Quest time out. Sent a request bad request. So it's sending me this immutable dictionary. I don't understand. You're always you are going good always a supporter as Python developer. I think I understand. Provide the input with the name attribute form.validate onsubmits. Um, dude, I always reiterate this. Pro coders use Internet Explorer. I know. I'm looking this up. Don't worry. Uh, return server could not understand key error input name. Okay, so if that's really just the only issue, then I'm just maybe being an idiot and this is name something that I don't think. So, it says ID equals input name. That should really be giving me that input label for input name. I'm really confused because usually this gives me request form should have different keys in it. I just want H change ID to name. Yeah, maybe you're right. Maybe it does have to be name. So name equals input name. Let's try this. Uh, two. Thank you guys very much. Okay. Input name equals Okay. Oh, wow. Yeah, sometimes when you stare at the computer for too long, you just just don't get it. Okay, so input name equals input name. Awesome. That brings us to the chat window. So, that gives us our name. We log out. Let's just like make sure all this works quickly though. Log out. Okay, so this actually has Ooh, interesting. I can't click this button anymore. I think that's because someone was saying that that this like index thing, this Ajax code I wrote like messes up the bind on something. Um hm. I don't know why that's the case though. If anyone knows why that doesn't work, um let me know. Also, I usually program on Abuntu, but I just like I'm using Windows cuz the video editing and recording I have is a lot better. Um If you can't click the button, you might be missing jQuery on that template. Oh yeah, I should just load this. Not here. Should load this in base. Okay, let's try that. Thank god we got some front-end developers with us here. Okay, let's see this. I still can't click it. Uh, try WSL with Abuntu. Okay, so I still can't click that. I can click that. I just can't click that. Why though? Clap snap bar. That's um yeah, I am using websockets, but I just don't know why I can't click that button. I was reading something on Stack Overflow that was saying that. Let's see what this guy said. So, I think I don't even need the wrap. I think I can try to access it. Let's see the other way. Oh gosh, this front end stuff is just such a pain. Okay, base.html. Let's load this. Okay, let's go to index pound test. See, now this is the issue. This will load and get return me an error, I think. Let's see if this made a difference. No, see that didn't make a difference. Hm. I just want to test if I get rid of that and rerun this. So, I still can't click it. So, that's actually just Okay, that's a different issue. Um, I guess I probably just need to load navbar toggler type equals button data toggle collapse. Like that should just work. That's why I'm a little bit confused. Maybe if I go to the homepage, I can do it. No. See, it still doesn't work. Maybe I'll just make it so it doesn't have this collapse thing and it just like it just works properly. Okay, let's just do this. Um, navbar collapse navbar. No. Oh gosh. Now I'm going to have to go. So, I don't think I actually need that. that uh controll zed. Okay. Shift tab. Let's see if this works. Ooh, that's not what I wanted. All right, back to Bootstrap we go. Um, breadcrumb. Let's go. Navbar. Just want this. All I want except I want the dark navbar which Oh, I didn't even I haven't even changed yet, have I? No, I haven't. Okay. So, let's just change this. All right. nav. So, we don't need this disabled thing pricing. We're actually going to go log out. Log in chat log in slash logout slashhome um I don't want this damn collapse thing. I just want to get rid of this this navbar collapsing aspect. Uh let's see. Okay. So now though see it says it doesn't work. So, I just need a freaking nav bar that doesn't collapse. Um, let's use drop down bars. What are you guys saying? Just keep Okay, that's kind of like I could just put navbar form in line. text. There's got to be a way to remove this like collapse feature. I think these ones don't collapse. Up our contents. Um, okay. Let's just take this and let's just try to do this custom. I I just Oh, God. Okay. So, let's go navbar dark. I think first of all, let's just see if that actually worked. There we go. Okay, so that's good. Um, navbar toggler. I don't want this collapse navbar. Can I just go like class navbar? See, but then it gives me this crap. I don't want it like that. I want it proper because when I get to like this side, see H. Surely there's one that doesn't collapse that's up here. Nav bar. What are you guys saying? Bootstrap is depending on jQuery and you delete script for it. I'll finish. Oh. Ah. Smart. But that's what made my Oh god. Okay. True. Okay. So you guys you guys are you guys are smart. All right. You you figured it out for me. Um okay. So let's go and get that script back then. So let's just go getting started. this cuz see someone told me I need to delete this. So maybe I'm just maybe I just put in the wrong one or something. Um does it matter what order I load this? Think so. So that's why that wasn't working. Okay, so navbar. Actually, let's go out of that for a second. Okay. So now let's load that. Let's see. You already have jQuery. Just load jQuery before other scripts. But the jQuery version is old. It's all coming together. Okay. Let's Let's just see. Chat app. Aha. Okay. Wait. Now the test is though. Test. Did that work? Oh, it did work. Okay. So, we're good. All right. We got this, guys. Now I just got to change this back to dark and then we're good to go. Dark. Dark. Load. Beautiful. Log in. Log out. Just that doesn't work. And that doesn't work. Oh, it's cuz I haven't. Okay. / slash login slash logout slashhome. Okay. Log out. Okay. So, when it logs out, I want to put like a message um at the top there, which I'm going to do. So, that's Okay. Okay. So, index um login let's say percent percent block message percent and block say if message think I can do this. Okay. So, I'm trying to do this like templating engine thing now. I've done this before, but I kind of forget. So, we'll see. End block. All right. Base. Create a block up here. It should be below the navbar. Okay. So, we'll do it here. Percent. It's actually going to mess up if I call this message. We'll see. and block. Okay, now it was saying somewhere on the Bootstrap website they have like messages. Um, yeah, here it is. This is what I want. I want like a green or maybe we'll just do like a gray one or something. Okay, simple alert. Let's just go this to keep like that kind of theme. Although I like the dark alert. Let's go with that actually. Okay, so let's go here. Okay. So, actually this needs to go inside here div block message and block. Yeah. Okay. Use gray for logout and green for login. Good. Yeah, good point. Um, the only thing is it's like block message gray. Okay, let's call that that. Let's get one more. This is like a weird way to do this, but like let's see. Like I kind of just wanting something that just changes the color for me, but this is fine. Block message green. Okay. So, index we'll say percent percent percent say if green actually we'll say if log in so if we just logged in when we went to this page then what we'll do we'll end if but I think I can say actually yeah and and we'll just show the green one. So then we'll just say percent percent block message green and then we'll say this session name logged in and then percent and block. Okay. So, if login, there we go. And then base main when we go to home. We'll just say login true. I forget how I send these values. I think it's like that. And then string login. And then I'm just go string session colon session. Okay, so that should work when I render that template um in the index. And then for log out. Okay, let's say if message. No, we'll say if whenever you click log out, you're going to be logging out. So we'll just say block message gray. Let me do end block here. Actually, why do I have all these blocks? Okay, if message gray and then we'll just say um session uh name logged out. Okay. And then that should be okay. We need to pass that here now. So for login redirect URL index login I know we're going to do session session and I mean I guess when you log in too like it's just well it's only if you logged in. So okay let's just see this uh login equals true. Okay, let's say yeah, whenever we get to this homepage, say if name key on session, if we do a URL for home, where is that? Redirect URL for home. Can I pass a parameter through that? I think I can just forget how to do that. So if I put a parameter inside ah this then it will expect it in the thing. Okay I think I can do that. Okay so for home slash name name um let's see actually I could probably just do it with a get request. You know what? For now, we're going to test this and see if this works. What are you guys saying? Could use Django automate pass session variables to your templates. Um, dude, go watch a Cali Linux or something. Have you used Python 3.9? I have not. Log in. Render template. Oh god. Okay. Takes one positional argument for two. We're given forget now. I just forget how to do this. Okay. Render template. Flask is something I've not used for a little bit. uh when I want to pass values through okay render template is there really nowhere where I'm passing okay I do this I have a GitHub repository I want to look at GitHub and then we're going to take a break in a few minutes and just answer some questions Okay, let's go website. Ah, forgot I got to do that. expected token and a print statement got logged. I love how this never Oh, logged out. Line five in template. Another $5 super chat from Revu. What's a decorator on top of a decorator syntax? It you can stack decorators in Python. So, if you look here, this just means if I go to slash so nothing, or I go to slashhome, it will bring me here. So, you can actually stack decorators. Um, uh, hey Tim, have you ever used Folium for mapmaking? No, I've never even heard of that before. Whoa. Logged out. And then we get that, too. Okay, that's interesting. Index if log in message gray logged out. So, I guess this shows regardless of if there's content. Um. Hm. That's interesting to me. Well, no, that showed and then so they're all just showing logged out all the time. Chat login. So maybe I'm just messing this up horribly. Oh, what my logged out. If you go to the login page and message Gray cuz the logged in. Yeah. So, that should bring you. Okay. So, actually, I don't want to do this right now. See if this is going to work. So, that just constantly stays there if I have that block. Um, login index. All right. Cuz that's the main page. You know what? We're going to uh deal with that later. Okay. So, we've got that now. So, let's just see what we have. Okay. Okay. So, if I refresh, why is that still showing up? I thought I removed that even. Okay, so these will just How do you do a damn HTML comment? This is just I just want to get through this tedious stuff so that I can stop having to uh do this. Okay. All right. Login. Oh my god. Of course. Oh, of course I've commented that out. Okay. Crush. Enter your name. Tim. Submit. Large button. Okay. Clicked. Awesome. Okay. So, what I'm going to do now is make it so you can start typing in some messages. So, we need to make like a message kind of thing, which is going to be interesting. So, scroll view HTML Bootstrap. Okay. It shows you how to create a scroll scroll speed. Jeez. Okay, that's interesting. Um, so now the question is going to be ah Jesus. How do I how do I update a scroll view and just add more elements to it from from my back end? So, I don't really want it like that. I want it to be able to Okay. So that that's cool, but I don't really care about all this navbar stuff. I literally just want it to scroll. Okay, let's No, let's just go to Bootstrap. There's got to be something for scroll. Okay, there's scroll speed. Okay, let's see this. Um, okay. So, for example, this although I don't really care about this navbar at the top. Why do you got to give me this? Just give me a scroll view that works without a navbar. I think I could just probably do this item one via JavaScript target. Um, okay. Let's just look this up. Okay. HTML scroll view updated from Flask back end. Flask dynamic data update without reloading page. Okay, so div script. You can't modify HTML server side. You'll need JS or reload the page and add them dynamically. Okay, but I can do something in JS to update it, right? Uh, this will be available offline. Yeah, good job, Michaela, on your midterm. Nice work. Um, how to install TensorFlow? You want something like navbar fixed kind of. Oh god, this is not a uh great way to do this beautiful soup. Oh my gosh. Give me something easier. How to create infinite scroll with Django. Flask API to provide JSON files. simple HTML series. I just want to render render a uh a chat window. So, you know, let's make a thing that just sends the chat first and then we can deal with it. I want to get some progress done. So, let's do Actually, I need more Bootstrap forms. This is why I just hate building freaking websites. It's so annoying. All I just wanted buttons right now. Button and input. Input. Input. Input. Input. Input group. Okay. So, let's say I want something that's like text and then a button added to the right side. Ah, perfect. Like this. Button. Button. Okay. But we only really care about one button, which is this. Just give me some damn Just give me something easy that I can just steal. Whoa, that was cool. Okay, browse up. Okay, you know what? We'll just have to custom something then. Button recipients username. There we go. That's what I want. Group. Let's go. Log in. No. index. Um, just have a text input window, then print the messages to the console, then worry about putting it on the web page. Yeah, that's what I'm think I'm going to do now. When Stack Overflow has failed, all hope is lost. Um, uh, thank you, Michaela. All right, let's see. When Stack Overflow, what else people are saying here? Why not Django? I don't, guys, I like I could use Django. This is just easier and I don't really use these very often. So, it's kind of just like a easy way to do this. Send. Okay. Class form control ID input button. Yes. I'm going to say ID equals just for now. Oh, I have this send btn. So this can actually grab the value from this input class. No, this is going to say message message. No, I don't even really want that. Um, let's go. ID equals message msg. Okay. So, JavaScript I think it's like document.get get element by id and then this was what uh msg so I'm going to say value equals can I do like string dot value of or can I do like text um function data because what I want to do right is run that function but I want to pass it a parameter um okay and I don't want to do it in a get request test. Okay. So, call Python function from JavaScript with parameter. Okay. Data. Okay. So, Ajax. No, I don't want to do it like that. I don't want to do a post request. The traditional way to expose functionality JavaScript running in the browser calling remote URL using Ajax. the X and ax for XML. Nowadays every use JSON for example use jQuery. You can do something like this. You will need to implement a Python web service on the other side. Return JSONify. Gosh, it's get element by ID, not ID. Ah, okay. Get element by ID. I love how you guys are super chatting to tell me this. Get element by ID. Thank you. Appreciate the $2. Hi teammate just feeling. Let's see. Really should do more with regax. quickly learning how to power rags eggs. Uh, okay. Let's see what everyone else is saying. Okay, stack overflow to the rescue here. Okay, typically you would accomplish this using ajaxress looks like this. Get text equals. Okay, so what have I done here? Click run this function, but I don't Can I do like run question mark something dot value? I think I said text say value. Um then this this runs this function value. Oh god. Get JSON run something. It just I wanted to do something. Ajax get JSON pass parameters pass parameters to query. Okay, so it's like that and then comma some function. I don't know what this function's doing. I also don't know if I need this function. Uh oh. So I could put another parameter that is the values. Um okay. So I think it's saying I can do something like this which that that means I okay so this so I can actually do this first function data value say v value equals that value colon value. Can I do something like that? Um, it's not like a function. It's an object. Yeah, you guys can tell I've never used this before. So, okay. So, it has Let's do this. See, let me figure this out though. Create a variable. Run this get JSON. Okay, so run. It's saying to pass a parameter. I can do. Okay. So, let's say val value. Um, that should be okay. Function data does some get result. I don't really care about that. Return false. Um, yeah, whoever's like saying I'm not good at We'll get into the backend stuff later, but it's just like, you know. All right, whoever's leaving, see you later. Appreciate everyone who's been uh who's hopped in the stream. Uh, let's see. JSON colon Okay, so val value. Now, how do I receive that value? So, how to pass parameters to query JSON callback? Let's just let's just start messing with this and just see if it works. Uh, I'm going to go and eliminate. It's probably not. Uh, try So that okay. So I need to change this. So that's send btn when go log in form action pound method post submit. Okay. Ah let's just say oh that's login. What am I doing? index typed button ID equals send btn send. I don't know why that's giving me an error. What are you guys saying? Stack overflow grind is so real. Yeah, you're waking up in 4 and a half hours. Yeah, I know that's that thing's wrong. Um, form control place message. Okay, I just want to get rid of that, too. Uh, okay. JS click. So that actually seemed like it worked almost. I don't know why that's not working or why it is working. Let's go to main print runcllicked return none. Um, so I'm just going to assume that there's something wrong here. Let's just inspect console. Nothing. Hey, dude. Apparently your unique content watching George Hood solving a problem on hot hacker rank. Uh, I can't get this. Submit. that send button. Send. Let's try it without this now and see if I messed it up or not. If this works. So, it still doesn't work. Hashtag. So, it needs to be this a thing then maybe. What have I had in here? Let's go back to what we had at the beginning. Okay. So, send button. Let's try this. Are you in college? Yes, I am. You removed your console.log. I know I did, but I'm just like trying to Don't think I removed it from main. So, we're right here. It should work cuz when I click this, unless this is just wrong. Let's just try this. I just don't think the send button is like activating the form almost. A send button.bind click form. Oh, maybe it's ah okay, let's see this cuz it's not inside a form which I think it needs to be. It is called send button. Okay. Send button. No, still doesn't work. H. So, what did I have before that worked? Let's see. What are you guys saying? You removed your console log. It's not a hashtag sunb button. I know, but it's like I just see. Why' I close that? I'm actually just going to do something here. Uh I want to clear all of this. God, that's going to take a second. uh clear because sometimes it caches data in the history that like messes it up. So maybe that was the issue. Yeah. See? Okay. So there we go. So I actually was that was actually the problem. Um Whoa. Don't know what I just did there. Just want to open console. Okay. So reference that is not defined. uh at JS1 see like now I don't know it's not defined at JS index one now it's okay so that's because I have this like conflicting script tags see I have these like two I have all these different JS ones jQuery not loaded so which where which one's jQuery is Okay. So, can I just load this in my script tag then? You got two jQuery. Which one is my other jQuery? This one. I don't know which the two jQueries are. Remove jQuery 1.9.1. Is that this one? See, they were saying that I had an issue when I was using this. There's just all these different jQuery things. Uh ah this one. Remove that third script tag. Okay. See, but that's the issue. When I delete that, it doesn't work. Um h What? Like I don't I don't know what that problem is when I So there's there's right now what's going on guys. I have this jQuery thing up here that's I need for my things to work properly. I think like if I remove this lol you deleting the jQuery. I know but people keep telling me to delete it and they tell me not to delete it. I'm just trying to follow what you guys are saying. Uh if someone comes up with like a competent response that's like two sentences long, I will answer. I will follow what you're saying. I'm just trying to determine like what jQuery I'm deleting. Like what's wrong with the jQuery because I don't know anything. Um Ajax Google 1.9. So it's saying delete this but then I delete it and then it doesn't work. So this works but then the other one is like conflicting. Um import jQuery before other scripts. Okay. But see there's two jQuery things. I have that jQuery and this jQuery. So let's just mess with it. See? So that's So maybe I can't use this one. Just delete that. It's not a function. HTML button element. Is this the same issue I had before? Let's see what you said. Just use ML. Yeah, good answer. So, let's see if I remove that one. See? Okay. So, now it works. But now watch. Oh, wait. What? Okay. I Yay. It's working. All right. So, let's let's just Yeah, let's just go with that. Let's just assume that that is like proper. Um, I don't think I even I think I can fix some of this now. index.htm. I don't think I need this form thing. So, don't know in here. So, I do have a hashtag. Can I do this, please? Please tell me this works. It does. Okay. Wonderful. Ah. All right. Let's go. Okay. Taking I'm going to take a quick break shortly. You guys want to ask me any questions? Go for it. I might actually turn the lights off cuz it's so bright. Great. I have like these big lights on. I don't know if I'm going to be able to uh to continue with them. Let's see. Tell me if this is okay. I know the shadow is kind of bad on my face, but like there's no way I'm going to be able to go with that damn light on the whole time. Tim, study for discrete structures. No, man. I'm not doing that. I have a like a quiz tomorrow for discrete structures, but instead I'm doing this. I'm not a not studying for that. Yeah. So, the camera quality is not going to be as good, but it's just like whatever. As long as you guys can hear me and see me kind of because there's no way I can program for another hours with all these lights on. What was my first programming language? HTML. No, real programming language probably JavaScript. Thing is, I used to actually be really good at JavaScript when I was younger, but then when I say younger, I mean like 14, 13. But I haven't used it in so long. And it's just like I hardly use it that whenever I get into it, it takes me a few hours to really get like refreshed with the language. Have you ever lost code which you've been writing for like hours? Yeah. Oh yeah, probably. Keep up the good work. Thank you, Steve. Do you still study Java? Uh, yeah. Yeah, for school. We have a programmer guy here. Uh, would you do a botch for trading Bitcoin? Thanks. I've been enjoying your videos. Um, maybe. I mean, I'm not really into the crypto game anymore to be honest, but what program are you in? I'm in computer science with a specialization in business, actually. Um, a lot of people don't know that part, but let's see. I'm just going to answer a few text [Music] messages. So, I'm kind of planning on going for another like twoish hours. I feel like as long as I can get the chat like kind of working then then I'll be good. Do you ever think about creating a startup? Um I mean like this is my startup like the YouTube channel to be honest with you. Uh what are you going to learn Golang? Yeah, I've actually been learning it already. I like Go. It's a pretty cool language. I'm in second year. What field do you mainly focus on? Web, mobile, developing web apps or software? I usually just do like backend development. I don't really do a lot of front end if you can't tell by this just abomination of front-end work that I've been doing. Hey Tim, how would you recommend? I self-study Python if I know the basics. I've done some small projects, want to learn how to develop cool apps, and maybe get into ML. Honestly, just find a project that you want to work on. Um, something that's interesting, even if you don't think you know how to do it, and then just start like researching different components of it and how you can like accomplish what you want to do. That's typically what I do. I'll just like even this project. See, I don't know how to do a lot of um what I'm doing. I'm just looking it up and just figuring it out as I go. And then next time I do this, I will remember. Okay, so like this is where the JavaScript goes. This is the jQuery I need. Okay, I can reference that code. That's like how I learn. Um I'm in second year. You guys keep asking that. Yeah, but the advice for that is just work on a project, learn as you go. I mean, if you know enough, you know the basics, then you'll probably end up following some tutorials along the way on how to do some specific components. Do you make a UML diagram? Uh, usually I do. I didn't for this project, but I kind of talked about the architecture I wanted to employ. Um, so yeah. Okay, that's enough of a break. Let's get back into it. So, this clicked button is working. Although, the thing is I've still yet to figure out how to pass parameters, which was the whole thing I wanted to do. So, let's try this. Um, val colon value var value equals get uh document.getelement by id um what I call it msg value. Let me just console.log log this. See what that is. Okay, so that doesn't even seem like it's like breaking. Um I mean, let's go to inspect and see. Although it's not console.logging that value H. But I don't even know why that's not I think I still got I think I got to do this again. Restart this. Uh refresh this. There we go. Okay. Nice. So val value that's actually passing. Now the question is how do I get that from in here? Um h there was something I was looking at for that JavaScript flask jQuery call Python function with parameters. Let's see. Passing arguments from JavaScript to Python function. Um, data passing some input here. Okay, let's put this side by side. Let's see. Any tips for researching new subjects? Input is empty. Good night, Stack Overflow, GitHub, and just plain Google. Hey Tim, could you do a tutorial on developing a Facebook Messenger bot? Maybe. I love these videos. You're a great person. Appreciate that. Um, okay. So, what I'm going to do in here is run slash URL URL. Um, can I make that optional URL? It's none. Print URL. Rerun that. Uh, let's go here. Refresh. Hi. send 404 run question mark val equals high. Ah okay. So I can do this request method equals no methods equals get um if request method equals equals get. I forget how I get that value. There's a way to parse it out. Um let's see. Okay, of course that method equals get. Back to my GitHub because I remember how I did this before. Oh god, it's going to make me sign in again. No. Okay, I don't want to do that. Home request run equals val. It should say here to do it. Quest methods URL. This doesn't really say how to do it, though. All right. Where's tackle? [Music] Okay. What? My website's broken. No. Tutorials. Start programming. Flask. What are you trying to do? I'm trying to send a parameter to this function with the message. Um, Tim, do you know JavaScript? I want to say yes, but like apparently not right now. I like I've used it many times before. It just sometimes it's hard to remember all these different languages. Like I'm learning like five or six at the same time, so it's difficult to jump between them. Uh request method equals get. Got to be a way to parse the Okay. Flask get request. Um flask low. None. Okay. Okay. Run. slash because it just parses as like a URL. I don't know how to get this thing. Terms of Python dict JSON. Are you trying to pass in the function? You guys will see in a sec. Accessing request data. That's what I want. Ah, this is what it is, I think. request.orgs.get. Yeah. Quest.orgs.get. Uh, let's say msg.get val print msg. Okay, let's try this. What happened? Ah, cancel. Run. Hey, there we go. Okay, this is my message. All right, let's go. Okay, so now what I'm going to do first of all though is Okay, we'll do some other stuff later, but like there we go. We got the message in. So now that we have that, we can actually send the message to the server and then we can just look at the server. So now we're going to make a new client, which actually we probably should have done when we logged in. So yeah, so what we'll do is we'll say session.client, I guess. Yeah. Okay, we can do that. Um, home name. So, okay. So, we'll say session client equals and I'm just going to say person equals person session name key. Um, whoa, what the heck? I did not mean to do that. Okay, let's stop this. Let's go to my test um client. Oh, literally all I got to give it is name. Update message thread is something we'll have to steal actually. Um, well, we'll not do that right now. We'll just do person from client import client. Did I call it client? Yeah, I just called it client instead of person. Okay, so we'll do client. Client. Oh, cuz person stored on the server. I keep forgetting that. Okay. Session client equals client. We'll say run URL um if not if client not in session then just return none and then otherwise we're still going to return none but let's do this here. Okay. So then we're going to say session client dot send and I should have it here. That's send message. Okay, that's send message msg. Okay, let's start a server. Let's start a web server. Okay, let's go to this tab. Let's go here. Home. Refresh. Object outside of client is not JSON serializable. So, I guess I can't throw that in the session then H. Okay. So, session.client send message. H. So, I want to throw that object around, right? So, I really don't want to make it global if I don't have to. Let's see. Um, let's see. Y session must be JSON serializable. Yeah, no, that's not happening. um don't necessarily need the client object so long as I just make a new client update messages. So now it's like how do I get the messages on here cuz I think I can store a list in um the session. But maybe I shouldn't even session it. No, I'm not going to session it. Let's just do client cuz run. I don't want to make a new one each time. Once we have a name, create a global client maybe. Yeah. Okay. So, we'll say global client. Say client equals client session name key. Okay. Should be able to do that from here. If client does not equals none say actually yeah okay client equals none um all right so we have that client does not equal none send message msg G. Okay. And then we need to update currently like all the messages constantly with that global client. So let's just say global client. I don't like this, but it's kind of the only way that I can get around this for now. Okay. So let's go here. Okay. Let's see if that worked on this server. Connected. What happened here? Let's restart this. Let's restart both server server. Okay. So, let's go send. Okay. So, connected to server. Oh, that's good. Okay. So, okay. send. Oh, that's pretty good, guys. Okay, nice. Ah, there we go. All right, so that's pretty good. Pretty good progress. Now, it's just updating the messages and showing them from different people and then just a few other like UI tweaks. But honestly, for how long has it been? 3 3 hours and 20 minutes. I would consider that pretty good progress. All right. Okay. Nice. Okay. So, now that we've done that, I'm making something too. I'm making a fish feed batter register. Jeez. Okay. How many people we got still watching? How many are hanging around? 145 still. Wow. Impressive. Okay. So, if I guess I could lally just do if client. Um, yeah, because this needs to refresh first. So it creates that client object when it logged in cuz if we weren't logged in that wouldn't work. Ah okay. So slash let's go slash let's go to log out actually. All right. Enter your name. Um Joey. Okay. Submit. Existing connection was forcibly closed by remote host. Oh, it's cuz I didn't disconnect it. So that's that's fine. It's okay. Just stop server. So just I just I do really need to make sure that when I disconnect it uh yeah it fixes that. Okay. So actually that's a good that's a good point to have global client whenever we leave this homepage needs to be disconnected. So on log out and log in let's just make a function to make this a bit cleaner say define disconnect. Um actually don't I mean it's really going to be redundant to do that. So to do that we'll just say um if login global client actually no we'll make a function say disconnect define disconnect global client if client client dot disconnect Okay. Okay. So, let's start getting some more comments in here, too, just to make things good. Uh login displays man login page and handles saving name in session on post return none. Don't you have course work to do? Yep. The answer to that is yes. logs the user out by by popping name from session. Okay. Return none global client called from j query to send messages. So this should really have a better name. Okay. Send message. Send send message. Yeah, I think that's fine. index. And this should be send message. Okay. Mean. All right. That's fine. And then let's see. Home. displays homepage if log return. Okay, what are you guys saying? Run equals true. Okay, so I'm happy with that so far. Um, so client sending messages. Now we just need a client update uh to show the messages. It's going to be interesting. So I do want to do a scroll thing. I mean the the chat. Yeah, that's good. Good point. Okay. So let's do update HTML from Python dynamically. Good luck. Flask dynamic data update without reload page. Yeah, this damn thing, man. I don't want to do this. So it's saying it's there's got to be a better way. H Update HTML out. Reloading page. Flask using jQuery. Update div content without refresh page. I still don't really know how this works. You could use flask cjax document ready function next.click Click Ajax URL for your root. Okay. So essentially what I want is to call in a thread. Yeah. Okay. So what I'll do is have a function here then that just is going to return the messages um from the client. Yeah, cuz client I think stores its own messages, right? Yeah, it does. Okay. So what I'll do is just get messages from client um store them on here myself in just globals. Okay, so let's do that. So let's say messages equals that we'll run a thread that updates in the background constantly. Okay. Yeah, sure. That makes sense. So whatever I had here, this thread, it's just makes sense. Thread. Okay. and then from threading import thread. Okay, so what this should do is keep track time. Yeah, import time. What are you guys saying? I don't know that much about Flask, but don't you want to modify the DOM with JavaScript instead of Python? Yeah, just like I need to get the data. So, what what I'm kind of thinking right now, I'll run you guys through it is actually client um say if not client uh continue. Just do this. Okay. Okay. So, what I'm trying to do is I'm going to have this update message function that's going to run in a thread in the background that's constantly going to ping the server and uh and look for update me update updated messages. When it does that, it's going to actually I'm not going to print the message because I don't care to see them. But what's going to happen essentially is this is going to keep track of the most recent messages. And then what I'm going to do is have a JavaScript uh function on the page that's going to ping this web server every I don't know let's say you know 50 seconds like whatever or not 50 seconds like 0.5 seconds. call this method update messages or not call this method call another method that I'm going to write that will return to it the messages and then it will update the um the HTML accordingly. So JavaScript talks to this this returns messages messages are updated on web server. I think that makes sense but I just don't know really how to do that. We'll see though. So I think I can return like a JSON request from Ajax. Um so call Python function and get return value from Ajax. Okay, so let's see what this guy's saying. Okay, JavaScript is asynchronous when you alter X will most likely be undefined because Ajax response is not received yet. Not necessary. Pass a callback function that can handle the response instead of returning it. Okay. So function handle response response. Here you might do something with response like then Ajax URL success function response handle response response. Okay, let's see this. What are you guys saying? Isn't the whole point of the soccer hour building up to that? I made a blog means that cool wall decorations, even cooler coding. Thank you. Um, append message to div holding all message. Yeah, that's what I'm going to do. But it's just like a a matter of um grabbing the data from grabbing the data from the uh the back end and getting it in the front end. Let's see what I've written here. Function data. And let me just try this for a second. I don't know enough about freaking Ajax to do this. H. How to return Ajax response from asynchronous JavaScript function to return value. talking to Python. Okay. Bar person. Okay. All right. So, what I just have to do is JSONify a list, I guess. Then talking via Ajax. Okay. So, this this looks like a good tutorial. I might follow this. Um, just use the sent sent to ver and call the endpoint with Ajax. Tim, what to do after Python basic? Which stack are you using? Flask get root that return all messages. It's all right, man. You're not a full stack developer. Bit of an unrelated question. Would you be able to tell us about your PC build? What parts you're using? Uh, I think I have like an i5 7600 K clocked at like 4.6 cuz I have like a triple rad or dual rad water water cooler, 1060 6 GB graphics card, 16 gigs of RAM. I'm just looking at it right now. 750 W power supply, which is pretty overkill. Like a really nice Corsair glass case that cost me way too much money. And then I have four hard drives. So, two H uh DDs and then two solid state drives that are 1 TB each. One running Abuntu, one running Windows. Yeah. So, there you are. Uh okay. Return jsonify. Okay. So let's do can I jsonify a list? I think so. So from Python, let's handle the Python port part first. The part that I probably will will be able to do. Uh define update messages. Define get messages. Okay. At app.root root get messages. Let's just do this up here. Root get messages. Okay. Send I got to import jsonify. Okay. Okay. Donify. We'll say messages. Messages. Okay, I think that will work. Um, yeah, looks good to me with our server running. Okay, so then here, fetch. Oh, you guys are tell you guys were telling me to use this. Okay. Um, okay. Let's see. Fetch / low. Get is a default method, so we don't need to set it. Fetch low preseries on top of Python. JSON dumps, which only takes dicks. This looks so difficult. I take a Python coding, but nothing similar to this. Nice job. Can you shout me out? I'm a big fan. Sam games, thank you very much, Sam Games. Uh, do you game on it or work related things? Um, it's mo it's pretty well work. I used to game on it a little bit, but not anymore. Okay, so turn that fetch API. So, how do I use the fetch API? pip install flask and flask. Is there like a do I do I need to import anything for this? I don't Okay, let's just try this. Um, actually, I'm going to put this in line, I think, uh, in the index. Yeah, block content. We'll just go script uh type equals text slash JavaScript. Actually, I don't go. Okay, you know what? Let's know. Someone was telling me use the fetch API before. Whoever that was, let me know if I need to like import anything for that cuz fetch doesn't seem to be popping up as like a valid thing. Um, fetch is global to browsers. Nope, fetch is builtin. Okay, nice. Thank you guys. You're I pretty sure I might be. Okay, nice. Yeah. All right. Fetch response the things I'm just confused. Oh, slashhello slash get underscore messages. Yeah. Okay. No way that's going to work. I don't believe that this will work. Web server. Uh, let's go. Okay. Okay, let me just see this cuz I don't think I'm console. Oh, I am console cuz I think this just needs to like I just don't know how to call this is the thing. So, fetch. Can I put that inside a function? Fetch is JS native. though. So, I think I could put that. I just want to see if this is going to work. Put fetch inside of a function. Okay, good. All right. I need to do this again. Uh, where is the history? I need to clear. Okay. Um, connected to server. Ooh. Oh, okay. That's fine. It's just going to take a second to reboot here. Server. Okay. And Ah. All right. Let's go. Send messages. Oh, okay. I just need to get rid of that. And then val send 404 not found. Really? But I thought that worked. Oh no. So, it's getting that response text, but it's just not sending that with 404 not found. Send message val that was working before. That's why I'm a little bit like, whoa. main. Oh, idiot. Okay. web server. Okay, so it's getting it. It just not getting messages. That's fine. So that just did not isn't working for the updating messages. Okay. So when it returns messages. Oh, that's true. I don't know why I don't just return it from that. But okay, so this the thing is update messages. Oh, I don't have a lock. No, that should work cuz this is in a new thread, which means I need to lock technically, too. Because this could run. I think that should be fine. I'm not updating messages anywhere else. Um, okay. So, that's messages. Let's try this. Okay. So, not quite. Although, let's send one more time. Yeah, I know. Same thing. Okay. So, let's just see what's happening with that thread then. Stop all. What are you guys saying? Hi, Tim. Huge fan of you from London, Ontario, Canada. Keep up the Jesus. Finally, no more HTML. Yeah, we might still be doing some HTML. Message.extend new messages. I have a feeling there's something wrong with this thread. just this memory is uh let's do this. Ah, there we go. All right. There we go. Okay, good. That's what I wanted. Sweet. Now, let's do a bit more and let's display this. All right. Sorry guys. Just going to check my email here quickly. Um, okay. All right. We're good. We're making We're making a lot of progress here. Do you live in an apartment? I live in like a pretty big house. I actually have a video touring my house if you would care to see that. And a reminder, if you guys are here and you have not liked the live stream, please go down and do so. Helps out more than you would know. Uh, message messages, get message. So, the thing is that sent message doesn't happen until the update message call. So, I don't want to call update message again because it's running every.1 second. So, I really should wait in at least 0.1 seconds before I call that. All right, guys. Save me the Google search. How do I sleep? Um like point.1.1 seconds or something or actually cuz what I really need to do is run a function constantly every 0.1 seconds in JavaScript. So I guess I'm actually just going to have to look that up. Um run function every time. Run function constantly. Yeah, there we go. Oh, that seems way easier than it needs to be. Function update. Dude, I can't believe I didn't use this fetch thing before. Seems so much easier. I was just having a headache for no reason. Okay. So, let's go through all the way through. Oh, I could literally just do it like that. Okay. Wait. Set interval current time in hours, minutes, and seconds. Okay, We still haven't even used this. So, let's get rid of that for now. Um, centerable. Hey, you guys are just geniuses. You just know. Okay, so update loop. Let's see. [Music] Uh, okay. Say document.onload. Okay. Document dot unload function. Can I do something like that? Are you putting this project on GitHub? Yeah, I probably will. Just want to thank Stack Overflow for this degree. Um, should I just do this? Okay, let's just Um, let's go update every 100 milliseconds. Um, okay. And then just call update. Uh, I'm still in university. use my fidget spinner. I use it all the time. Okay, so let's try this now. So, let's run server. Let's run web server. Let's close that. Let's refresh. Um, oh, that looks like it's working. Tim has joined the chat. Okay, send that gets updated. Tim, okay. Okay, it's that's working. So now it's just displaying it on the page which is going to happen in this update method I guess. Okay. So once we have messages right because we'll get it. I can store it in a variable. Now I guess I can use it below and then I can just um update a or put something inside HTML or like display it like I think I can just JavaScript.right it in like console.right. So let's actually just do this. Is it console right? No it's document. Um, yeah, that would make sense. That doesn't work. But this looks like it's working though. Now, the only thing is if I open another one, 127. Uh because I'm doing it in okay Tim disconnected Joe perition was connected on something that's not a socket. Grab a particular ID. Um okay. So let's Yeah, that's actually a good point. I should do that. Okay, let's get rid of that for now. OS error. Ah, damn it. Okay, we'll fix it. It will work. Um, byes UTF8 client socket send. Um, what line is that? Line 51. I just need to cleanly exit. That's the only thing. Um when we leave client socket try except exception e print e. Okay. Um because if you send message and it doesn't work then we really should do this again. Okay. Uh, need to restart the web server. jQuery append child. Could do that. Okay. So, I'm going to just write an index. Then say, honestly, I'm just going to do with a P tag for now and just see if this even like works. ID equals test. So, js. So, get element by ID test HTML equals Oh, now I forget what I had in here. One second. Just text. Okay. Let's try that. Okay. So, that didn't work. Um, well, yeah, I am doing trial and error. I just don't really like I don't know how to do it. So that's why I'm doing trial and error. Um messages Tim has joined the chat. It's just like so can I update that like get element by ID? Is that why is that not working? I don't know why that wouldn't work. Inner text perhaps. Document get element by ID. See like that should work. I don't know why that's not working. Just log the message first. I've logged it. The message logs like it works. It's just not changing this P tag. I'm going to go on a limb and say it's probably this history thing. You guys are saying just go in incognito. So, we'll do that. Um, now I don't have to deal with this. Oh, now it's going to give me this crap. Tim has joined the chat. See, like it's logging the messages. It's It's printing them fine. Um, let's go main. Actually, don't want a print message anymore. What I want to do is just have it change the dang inner HTML. Uh maybe oh maybe I didn't like save this. Although at this point I'm pretty sure I actually need to restart all this anyways. Okay. So let's go web server. Let's go server. Actually web server. Okay. I also should probably clear that when they click that. So that's good idea. Um, document.getelement by ID. Unless this just isn't being called enough, although I think it is. Update. Yeah. See in here msg. So I really shouldn't do it like this. I should say var msg equals that oops var valueg value msg value equals blank. Okay, let's console.log in here. console.log run. So maybe this actually is working and it's just not um calling. Okay. Let's see if that gave us anything. Okay. Okay. Cuz really if I look in the So first of all, this should says I'm connected. Okay. Send. That should work. It's not now. Don't know why that's not working. Let me just restart server. H actually I think that is working. It's just not popping. Oh, let's see. Server web server. Server. Let's go. 127. It says I'm logged in. Let's log out. Tim disconnected. Okay. Establish connection. Damn it. Okay. Restart. P tag main. I thought it doesn't matter if I have anything in here or not. Let's even see if this works. Okay. So, let's just rerun the web server. Let's rerun the server. Hello. Okay. Okay. Send. Okay. Tim. Okay. Let's go inspect. So, this only happens once. Like I really I'm trying to this should So it's not actually working this uh this update call. So what I might do is just make this. Yeah. So it says So I guess this this thing just doesn't work. So let's do this shift tab. This should be running like constantly. Tim has joined the chat. K. Tim has joined the chat. Okay. So it has all the messages. Is it just not updating this? So, it means this isn't running enough. Um, I think yeah, I'm going to say that's what this update just isn't logging anything cuz it should be logging run constantly. Um, what are you guys saying? It's not going inside the function. Clear the cache. Maybe clear the cache again. Yeah. Okay. Ah, there we go. So, where's that line? 27. What? What's wrong with this? JS27. I don't know what's wrong here. Unexpected token tree just 28. I still don't know what that is. Why that's an issue. Ah, does that make sense? Function execution stops since you returned. Still don't know why that's not line 28 still. Eh, okay. So, that's an issue. That's why So I think that should fix that. Try text content instead of inter text. I think inter text should work. Um, line 22. I'm so confused what I've done here. Let's just go. I think I just messed it up. Missing after argument list 13. The function update has and so the ending tag isn't the last parenthesis not needed. function must you have an extra clothing parenthesis where line 28 I don't need this what you're saying so what I had before was probably fine inner HTML Okay, wait. Let's just go back. Okay. So, so I don't need to return. This is what you're saying. Okay. Update. Okay. Remove the return. That's right. This looks more correct. after argument list. See, but I don't know what that issue is. It's saying something up here is missing. Oh god. Function data. Um, this Jason No, that can't be right. There's no way that's right. What I'm doing, uh, it says line 13. I know. So, it's saying this missing. I'm pretty sure it's this bind. Click bind it to a function. That ends that. That ends that. That ends that. So then it's saying I'm missing something else though. One more parent H. At the end of line 13, just go like that. Oh my god, you guys. I'm ridiculous. Okay, so I know the error now. Okay, clear browsing data. Whoa, whoa, whoa. Okay, so it's working. All right. All right. Jesus Christ, this is making me uncomfortable. Okay. Um, okay, we got it. Now it's saying some things that are wrong. Well, I probably should have left that open. Okay, let's document I get element by ID equals test text content. All right, let's try this. Oh, it's still doing this. I hate the fact that it needs to do this. Um, text content of null. So that's saying this is null cuz I don't know why it's saying it's null because it should be a value. Oh, it's probably calling this before the entire page is loaded. You deleted the promise. You literally have the best not finding the P tag. What do you mean I deleted the promise? like the dot then because I know I had something here. Oh gosh. Okay. JavaScript. Don't need that anymore. Don't need that. Okay, let's look it up. Uncut in promise. Oh, that's what that means. Yeah, it's not finding the P tag. That's interesting. Uh, in Chrome, when you have dev tools open, you can right click to refresh button to clear cache and hard code. FYI, really? Where's that? cannot set property of text content of null. So, it's telling me this this uh ID. Oh, right click. Oh my god. Hard reload. Ah, thank you. Fave icon. Okay, that's fine. I don't really care about that. text content uncaught. So there's two here. Anonymous promise then async update load. Okay. Um don't really know how to fix that. I'm thinking what's probably the issue is that it just can't find that. Let me try doing this v test. Is that? It's not really going to be test value though, is it? Uh, what am I doing? Okay. Test.in HTML log. Okay. So, let's clear this. So, it's really not getting it at the beginning either. Okay. See about the fetch API. Um, okay. JavaScript not finding element by ID. Okay, let's just change it to this. Okay, let's Oh, expect fresh unexpected token. What are you guys saying here? Set interval happens before the P tag loads. Good point. Very very good point. Ah, genius. Let's try this. Window.unload. Um, set interval happens for P tag loads. Okay, good point. I didn't get this like, so let's go Tim. object response. Um, okay, let's go console low. Okay, so that actually worked. Um, text. So that text, oh my god, I'm an idiot. I deleted this thing up here and I don't remember what it is. Okay, so I'm just going to copy this. All good old notepad to the rescue because I need to go back quite a bit. This is what it needs. So I need this. Okay, that goes here. Not then. Okay. So, let's try that. I don't think I need this is what you guys are saying. Um that anymore cash. Okay. Okay. 404 not found. Okay. Text content equals text. Let's go. Hi. Send. Oh, it's cuz I didn't refresh. Okay. Server. Oh, server's down. Stop. Okay. Server. Um, web server. Okay, nice. Tim has joined the chat. Um, holy request. Is that okay that that's doing that? Like, I don't I don't know. Yes. Okay, it's working. All right. Now, how do we get this to work now, though? Okay. So, we go server. All right. Okay. Now, it's text, but I want to get text.ext. Tell me that works. Damn it. Cuz I loaded that as like a dictionary. So like I'm putting that in. Okay. Cash um equals text. But the thing is I want this, but how do I just get the text value? Because I don't even know what type this is. Response.ext. So it gives me Oh, it literally gives me text. um response.json, I think. Well, let's go. JavaScript JSON object um JSON. So, I should just be able to access messages. Okay. So, I could say for Oh gosh. for loop for int I Okay, keep going to do this. How do you do the for of thing? It's like four um var of no javascript for loop of uh okay. Where's the damn four of Okay, nice. Okay, so four X t Oh my Y. Okay, value. I'm going to lose my mind. I can't hit the space bar. Actually, no text messages. Okay. So, we're just going to do this um JSON.parse Okay, so you guys are saying can I do this? I feel like that should work. Okay, I could document.right. I'm just going to try to document.rite it. This is JavaScript right now. Um, JSON. Okay, let's just see if that works. I kind of forgot that it needs to just append new messages. It can't just write new values. It's got to like replace the thing. Okay, so that makes sense. Um, yeah. Oh god. Okay. Stop this madness. Uh, okay. So, instead of document.right, I need to put it in like a list view. I don't really know how to do that, though. Let's let's see here. Um, okay. JSH has Tim joined chat. Okay, so I have that. That actually works. I get all those things now. Add elements to list JavaScript. Add elements to HTML list view. Um, append child. See, I don't necessarily want to append child. What I think I might actually do because rather than just writing it, what I'll write inside the P tag. Okay, that makes sense actually. So, let's do um index. We'll say we'll actually say document dot getelement by id test dot inner html equals this. Um yeah surely I can I do that? Okay I know what to do. It's going to say v values string say messages. Okay, I think that makes sense. and then equals messages. Okay, let's see. Document get element id test.inhtml messages equals messages. Let's try this now. Um, let's find server web server. Tim has joined the chat. Let's go. Okay, so that is working. So, that's popping up. It's getting the messages. Um, I'd like to test this from like an Can I test this from another browser and have the session be different? Let's see. Okay, Joey. So, join chat. So, I guess that didn't get my name. didn't say yes. Something something went wrong. Server stop. Oh, it's cuz I'm on the same port. That's why I need to be on a different um thing cuz this just crashed mine. So, let's see. I can't Let's do this. Inspect hard. Reload. Keep getting that error. Let's go. Okay. So, it's not going to work on the same thing, but I I'm going to try on another network later and see. Um, so, okay. So, it's actually working. Um, so that crashed. Okay. So, I just got to fix this server a little bit. established was uh put some try catches in here in thread six and broadcast. So let's just do this server to where server. So essentially client send then should be oh cuz that's literally holding client. Okay. Um try except exception. Gosh, this auto correct is really annoying as E. Uh print E. Let's do Yeah. exception cuz I think this is just like a timeout thing where it should actually work afterwards. You don't need to be on a different network. It's just a different device. Maybe misheard you or unifor Oh, that's a true point. I I got to be on a different device. So, I could do it from my phone actually. Okay. So, let's Yeah, that's what I figured that was going to happen. So, let's actually restart all of this. Let's go server. Let's go web server. Let's go home. Tim has joined the chat. Okay, so let's just see if I can do it from my phone. Um, and see if that works. 127.0.0.1. What What port is this on? 5000. Okay. No, that's not going to work, is it? No. Why would that work on my phone even if it's on the same network? run it on different port. What port should I run this on? Why would that work on my phone? No, it's local host. It's not uh I got to Oh, okay. This makes no sense. Yeah. Who's telling me this? Let me see this. Um, actually, can I run this on No, I'm going to put this over here just in case. Okay, so I'm just going to run this on this IPv4 address. and then I can connect to it actually. Uh, okay. So, you know, actually it's fine right now. I don't need to do it right now, but it's um this is working though. Okay, so Tim, yes test. Okay, we'll add like one or two more things and I'm probably going to call it night. Um, but I'm happy with how much we've gotten done so far. So, let's go to index. Uh, messages is actually going to be Oh, cuz I want to like I kind of want to strip their name and like bold it. Although we'll we'll just do that later. Um Okay. Yes. What time is it right now? 11:30. Yeah. Okay. So, server. Okay. Let's just do a little like rundown of what what we've done so far here before I hop off this because I'm am going to continue this tomorrow. probably tomorrow morning to be honest. Um I have not pushed this to get yet. Good point. Let's do that now. Okay, GitHub. I need to make a new repo for this. Um sign in. Okay, let's move that over here. Uh, two factor authentication is always fun. Okay, one second, guys. I'm just making a new repository. I just can't really do it on Well, now I can actually that I'm signed in. Uh, repository name chat web app made during live stream. Okay. Initialize. Sure. Create repository. All right. Let's uh Oh, why do I always do it like this? Um, okay. Give me a second. This is going to be really annoying, but we'll do it like this. CMD So, I don't need that anymore, actually. Uh oh, I shouldn't have done that. I'll just Yeah. Okay. Actually, this should be fine. Okay, let's do this. Yep. Get uh ls. No. Oh, what am I doing? You guys can tell it's getting late. Okay, it's not This isn't a get repository really. Oh. First day's work. Okay. So, let's go PyCharm. Yeah, I'm Yeah, I'm tired. I'm typing get to get into a damn thing. Um, it's okay. This is like to the point like this is a good level of like work to do. Okay. So, I'm just going to open up the other one so I can delete this chat web app. This [Music] window. Okay, let's do that. Let's delete the chat app. Okay, let's check GitHub. Okay, for all of you that are going to be screaming at me for the link, there you go. It's in the chat. Let me just edit the live stream. Actually, let's not do that on here. Um, so that it's in there. So, this should hopefully be live in like a few minutes, like or not few minutes is questionable because this is going to be like a six hour stream. Um, h I wonder how long it's going to take to go live to be honest with you. We'll see though. Apparently, I can't edit the stream right now. Uh, how much percent you think you've done? Oh, I've probably done like 70% 80% of it. Tomorrow is just going to be like cleaning it up a little bit. Um, and just like, you know, fixing a few things and I'm going to be fresh in the morning, so we should be working a lot faster. Uh, but yeah, I mean, this is a pretty I'm pretty happy with progress so far. So, I can't even I got to refresh this. My live stream dashboard is just taking its time to load. So, okay, what I'm going to do here, I'm going to sign off. Uh, appreciate all of you guys for hopping on the live stream. I, as much as it seems like I'm tired, I do actually really enjoy doing these and you guys help me a ton in the chat, especially when I've been going for like 6 hours with no breaks and someone spots my stupid mistake. Um, so yeah, I'm going to pause it, turn off the live stream. We'll continue some I'll do something in the morning. If not the morning, then it'll be like Wednesday morning or something like that. And with that being said, make sure you guys leave a like, subscribe so you get notified for the next live stream. And again, I appreciate you guys hopping in here and all the help. I will see you guys tomorrow.