How To Build A Realtime Chat App With Django

hey what's up guys welcome to this video in this video we're going to be building a simple chat application using django so this is going to be built with jungle and a little bit of ajax so a little bit of javascript in it so we're not going to use doing anything so complex we're not going to be using them web circuits the channels or anything like that just django and ajax and um the link to the source code of everything we're going to build in this video is gonna be in the description below so the template file and everything we're gonna build you can access it and this video is gonna be in two parts so this is the first part and it's gonna have a second part to conclude it and yeah so let's go ahead and test this out so this is the room name a user can create a new room and let's just say uh let's give it like a room of codeine i don't know i'm just giving it any room and then let's enter us team so now enter the room you can see it's blank for now let's enter that same room right here but here let's enter as john now we enter so now i can say i guys and once i hit send you see it shows 42 this is in real time and i can say hey what's up and i it send you see it shows 42 so this is the simple application we are going to be building in this video now all these data you are seeing here with the date and time with the message and the name are going to be saved in our database so as you can see we're getting back all these messages in real time it's actually a fun project to build and you're gonna improve your skills in django and mixing into a little bit of javascript so having all this set let's dive straight into the video so guys the first thing we need to do to get started with this project is to obviously install django so as i said in the intro we're going to be using jungle to view this chat app so let's make sure we have django installed so i'm just going to say pip install jungle now this command line is going to install the latest version of django on my computer but i have django installed already so it should tell me requirement already satisfied and note that if your new mac you should type pip 3 install jungle that's just the small difference between windows and mac but there is nothing more than that so as you can see it says requirement already satisfied so let's just wait for that to opt out oh yeah i cancelled it so uh let me close this up and now we can just create our project so i'm in the directory where i want to create my project so i'm just going to say jungle iphone admin start project and let's name it django chat so this is it's jungle chat and in this video we're not going to be using um channels and radius and the popular way of building a chat app what we're just going to be using is a little bit of javascript which is ajax so we're going to be using django and implementing ajax to make our chat functions real time so you're gonna see what we're gonna do in this video um so right now we can just go into that and say jungle chat so we are in this and then if we press dir we can see right here that is money.py file and we have this folder so let's just what i like to do is to create my django app immediately so now i can do python manage dot py start startup our name just named the app chat so now this should create a new app named chat and we should have another folder right here named chat so right here you can see we have a new folder so we don't need this command prompt again let's come into vs code and then let's just open that up so i'm gonna open a folder so the project we just created i'm gonna bring it into vs code so project chat app i have it in here and it is yeah this is it so i'm gonna say select folder so it should pop that up and um let's give it some seconds okay so that's done let me close these and remove all these so now we have all these right here so the next thing that i want to do the first thing i like to do is to just add my templates file so the template file when i say templatifier i mean the html files in which we are going to be using in this project so first of all let me say templates so i need to create a new folder in my root directory named template and in here i'm going to bring in my template files so i have this template file designed already in this video i'm not going to be doing that from scratch so if you want to get it as i said in the intro i'm going to have a link to the source code of this project in the description below so you can go there and get the template file so right here if i open this up this is where i start the template file so i'm just going to drag and drop into vs code so we have it right there now the next thing we need to do is to go to our settings and just configure the template and let's add this chat to the installed apps so first of all let's come here and then let's add chats so that is added installed apps let's close this up and then we come down here right here in this i can just say based there and then when i say the slash template so what this command line is doing is that it is telling jungle where to locate our template file so when we are doing the url mapping which means when we are telling jungle where all our urls are all the urls of our project and we want to render an html page to show for a specific url we need django to know where to locate that html file so this line of code says directory so i don't need to go to the base directory so the base directory is just the root project right here this is the base directory and in the base directory django is going to enter into a folder named template as you can see this is the template so django can now access all these files inside this template folder so let's say we instead of naming this template let's say we name it something like files all we just need to do is to come here and change it to files but yeah we are using template so there's no specific name you have to give this it's just make sure that this and this correlates so yes we have that done and then we can save now i don't think we have anything to do with settings file again now all we just need to do is to set up our url so we come here and then we need to create a new file called urls.py so now to setup url we're just going to say from django.urls import path so this is going to allow us to be able to configure the parts so now let me just say from that import view so i'm going to use this and i'm going to explain why we're importing this second line in a minute so now let's say url buttons equals to a list the first one which is empty the root directory views dot let's say um and then let's give it a name [Music] of home so now we have this so we're importing these views because we're saying that when a user wants to go to the home directory it should go to the views dot oh so it's going to go to view dot py file which is this file right here and you're going to look for a function named home so whatever we're doing in that function is what is going to be happening to this url so i just did a second light to import views so we can access any function we have in that file which is right here so right here we have to have a function named um and let's just take a simple request and then let's return say return render and then requests for now i want to request for home.html so that's it i'm gonna come here and it's it so the last thing we need to do for this particular url is come to django chat which is the main project folder and inside the ui result py file of these let's just close this up so right here in path after importing path we want to import include and then we're going to say path include chat.urls i'm gonna save so now i'm gonna pop up a new terminal and then i want to run my django project just to make sure that this url configuration works successfully so let's give that a minute to set up so um it's very easy to run your django project actually uh for you to follow up with this video i expect you to know at least the basics of jungle so you know what's going on around here but anytime i'm doing my tutorials i like explaining everything i'm doing even if you're not you don't know anything about jungle so you know what's going on but having a basic knowledge of django before watching this will be helpful so to run our django project we're just going to say python manage dot py run server so that's how easy it is to run a django project so i'm just going to wait for that to run on the localhost which is um localhost.8000 so okay right here it gives us an error says string add new object oh so we're gonna come here um so let's hit save and then right here also because i guess it hasn't updated oh it gives us that same error okay let's see um views that's um okay right here it's not supposed to be a true stop supposed to be a comma so let's save that again and it should be running yeah yeah so that's running on this so if i just ctrl click this can open this particular url on my default browser so okay let's just come here and open it up ourselves so yeah we're just gonna type in the localhost which is uh one two seven zero zero one then port eight thousand so that has opened already and then we should see our html file good so as you can see now we have jungle chat and then we have this basic form which we're going to be using this project so this is the basic html file we're using so a user just going to add the room name and then its username and you'll be able to enter a room so let's head back to vs code and continue with the coding so now we can just close this up so let me just open a new terminal down because we're going to need it later so now that we have these what i want to do is to set up the model that we're going to be using in this project so i'm going to set up two models one is going to be for the chat room and the second one is going to be for the messages so i'm going to come into models.py file so right here all i just need to do is to create a class i'm gonna name it room and gotta have models dots model [Music] and the only thing i want this to have is just the room name that's all models dot character field and then let it have max length of a thousand so that's for the room name so i would have given it another attribute of id but in jungle each model object has an id generated one if a a new object is created so like this there is another attribute named id but we don't need to write that ourselves so this is good to go and the second one to create is the message so this is the model of the database that's going to be storing all the messages so say models dot model and right now i'm just going to say value oh yeah i think value is a good name so value is like the message the user wants to send like hey how you doing what's up so that's the value you want to give it so models.characterfield also uh max lens so a message can have up to like a million characters and then let's give it a date so which date was this done so before we can use date we need to import something named date time so from date time import date time so we're going to say models dot date time field not only date view date time field and then what we want to pass in here this is not going to have a max length what this is going to have is a default so default will be equals to date time dot now and then let's just set blank to be true [Music] um let's just copy this uh paste so the next thing we want to have is the user so which user is sending this particular message that we want to have and the user let's just give it a million a username shouldn't be up to that but just to avoid any errors in this project and then the last time i want to have is the room so we want to know which room is this project being is this message being sent to so this room is going to be like we can use another jungle model like a relationship model like the money to manifest the foreign key to link this with this room but we're not going to be doing that in this video so this is also another way to do this so uh one we're submitting a new message it's going to have the id of the room which is gonna link to this so you're gonna understand all these in a moment so let's just save this and what we just need to do is to migrate this to our database so say python manage dot py make migrations and then after making the migrations we're just gonna have to migrate so that's done python manage manage.py migrate so yes we have the migration done good so it has been migrated to our database so now we can go into our jungle project and go to slash admin but before we can access the admin panel we need to create a super user so python money hpy create super user so let's just have it as admin leave this blank give it a password let's bypass good so now we have a super user created let's close this up so we need to register these models in our admin file so first of all we have to import the models from dot models import room and import message so admin dot site dot register let's register room and then there's also register message now we save this now if i come here go to slash admin now it's going to ask me to log in let's give it a second load now you see it says i should log in i'm just going to log in with the details i just created and then as you can see now it has taken me to this admin panel and i have the messages and the rooms model the jungle model right here installed so if i come into messages for now obviously we shouldn't have any object here so but if i want to add a new message you're gonna see that it has all the fields we need so let's just go back to the home and then let's open a new tab go back to the home page and leave this like this so now we have all these the next next thing that i think we need to do now is to make sure that once a user put in a particular room name let's say the room name is django just a jungle room and the user is like tom so once there is an entire room you should take a user to another unique url for that particular jungle for that particular chatroom so but what we need to do is to first of all check if this room exists in our database so if let's say jungle for example this is the name of the room i want to enter the room if it's a new room that means if someone have not created it before we first of all want to create this room and then enter but if it is a room that already exists we just want to enter that room and see all the messages so let's just take this off and let's go do that so first of all we need to let me remove this we don't need this again so right in our urls we need to have a new path so this path is going to be the path for the room it's going to be the urls for the room so i'm just going to say path so it's going to be a dynamic one so we'll say string give it a name of room and then we say slash so this is um the room then slash anything we want to add to it so save views dot room and then give it a name of room so this is good and then let's come into views and create a new one and name it room so say deaf room a request also and let's just copy this it should also render the room.html file so this is where the room.html5 is so it's rendering the room.html file very simple and now what we just want to do so this is not just taking a request first of all as you can see right here we are passing a variable into this particular url named room so we need to come into views and also collect room so now we have all this collected but if we come into home.html so right here scroll down go down down right here we have this form so we want to set this form to an action that once a user click on submit it should first send those data to a view that we check if this particular room is said or not so let's first create that view so we need to create another url actually so let's name this check view so this is the view that is gonna check for what's going on so oh my god why is that so let's just copy this views.jackroom let's give the name of jro let's make sure this has a comma and then right here in our views let's have dev of just simple request and for now let's pass so let's save this then we come here and save these so now we have this url so if i go to slash anything it's automatically going to see that as a room but what i want to do now is to come into my own.html so right here in my own.html i want to add some things to my phone so this is just going to be easy just to add where this data is going and stuff like that so first of all let's say the method it's using to send this data is a post method and then the action where is it going it's going to the check view so now we have the room name the username so in django when we're using the post method we must make sure that we have the csrf token say sorry for underscore token so you must make sure that we have this obviously now we have the room name and then the username so this is good to go so now we are sending this with the room name and the username to this check view now right here in the check view before we do anything we want to check if that room name exists in our database so before we can do that first of all we need to import that particular model so say from we can say that models or we can say from chat dot models anyhow you want to do it just fine from childhood models import we want to import room i want to import message so for now we don't need message but let's just import it down because we're later going to use it so right here in the check view what we just want to do is to say room equals to request dot post and then let's come here make sure so that's a name of room name so we're getting it this name room name and then the second one is the username obviously [Music] so let's make sure yeah username correct so we're passing these and then what we just want to check we're just going to say if room dot object [Music] dot filter so are filtering it file tr the name equals room then we want to check if this exists then let's do something so what was saying right here is that if room dot object or filter that is going to check if there is an object in this room model which has the name of room so the name of this room that the user sent and then if that exists we want to do something what we just want to do is to redirect the user to this to the room which is this room function but before we go is redirect we need to import it so let's import redirect good so we just say return redirect and we're redirecting the user to slash room so slash room dot name and we don't need to say that name because we already have that name and we know it exists so we're redirecting the user to the room and then what we want to pass also we want to pass the username of that is the person that wants to enter this room so we know we're sending the message with entering and doing stuff like that so now we can just say slash username so right here first of all we should have like these so username should be equals to and then let's just add the username so that's why we took this username so we're returning the user now to slash room slash username then it goes to username so this is good should be working and then if it doesn't exist so if this is a new room that the user is just creating what we want to do is have a new oh no to have a new variable say new underscore room should now be equals to room dot object dot create nah so want to create a new one with the name of room so we're gonna get that room and then create a new room with that particular name so now we just say new room dot save so now once we have this saved we can redirect the user to that page exactly the same thing we did here so i hope this you understood what we did in this check view it's pretty basic pretty simple stuff now let's just save this and go test it out so right here let's hit refresh let's come to our rooms you see that we have no room so let's have a new room and let's just say something like now let's give it cool programming let's just say programming [Music] now let's okay good and then let's say tom so now let's create a room good now you can see everything is working perfectly it takes us to this particular url named coders so this is our app slash coders then username equals term so we have the name of the room and then the username so the user that enter this room and then when we come here and hit refresh we can see that that room has been created successfully room coders so that is good and then don't mind this message you are seeing now that's just the basic template that we brought in earlier so this is we're still going to change this to be real-time message and oh or this is just a demo and then we're going to change this to the room name obviously so i think we have this and then let's check so let's go back and then try to enter this coda room again so now let's make sure that it doesn't create another room with that same name of koda but it just takes us into that room so let's enter with another user this time around koda but with 10 so it brings us to that same room but with a different user this time around so once we hit refresh we see that we don't have a new object created it just takes us into this existing one so that's what we did in our check view so that is pretty good right now and then um since we have this what we can just do is to come into room dot html so right here this is where we need to do some work next we can just close that up so instead of having room name um okay let's see right here okay good so now we have all this created the next thing we just want to do first of all we're gonna remove this and then once a user input a message and it's sent we want that message to be stored in the database with the details of this room and the user so you're gonna see what we're gonna do so right here now what we just need to do is to first of all come into room.html so right here in this form we need to create some things which are going to allow us to submit that obviously so in the form we're going to this is the form right should be down below let's close this up um let's close this up so this is the form yeah so now in this form let's just have some things like [Music] csrf token as i always have csrf underscore token so this is just to make sure that whenever using post method everything works so you can see now that i put the css i've talking but i didn't do something like method post so that's because we're gonna be using ajax to submit this art form um so if i come here normally and then i type in a message and it's sent that page is gonna reload and that's that's what we don't want in our chat so i want you to be real time we want everything to happen without this page even thinking of refreshing so once we eat something it's gonna send and once it's sent without page refreshing it's going to be created in our message database and then later on we're also going to make it show you automatically in real time without any page refreshing so this is where ajax comes in so ajax is a very cool feature i have a ton of tutorial on ajax on my channel so it allows you to do things like get database in real time synchronously and some cool stuffs that you can play with django so this ajax is not with python it's actually javascript so we're going to be using some basic javascript now um to use ajax all you just need to make sure is that you have this script loaded in your template file so this particular line let me just scroll across so you guys can see the line so that's it so once you have that imported you are good to go so first of all right here you can see that we have this form so we want to click send so you right here you see we have one two three four inputs but yeah we only have two inputs shown so if you see the type of this is hidden and the type of this is also hidden so we don't want the user to write anything here we're going to automatically give it a value ourself so the username is the current user that's logged in and then the room id is the id of this room the user is in so before we can continue we need to come into our views get these two details after getting details we pass it back here and then implement it in our form so let's do that quickly so now right here in our room we just need to say username first of all so how are we going to get this username you can see um no bad bad bad bad bad so username should be equals to um now let's just go [Music] back codas and let's enter storm okay good so i'm going to make sure our urs is working so you can see in our urls we have the name of the room and we have the name of the user so since we have it in this url of this view we can just get back these details so let's say username should be equals to so i'm going to request for it request dot get dot get so i would do it and then you say username so it's stored in a variable of username as you can see so now in this scenario we're going to get the value of tom if this is team we're going to get tim if this n we're going to get henry and the next thing we want to get is the room details so you can see that we have this room so this school does is what is being passed here in this room we have that already so what we're just gonna say since we have the name of that room we're going to use this name to access the database so i'm going to say room underscore details and then we'll say equals to room dot objects dot gets [Music] name equals from so what this is doing is that we have a new variable obviously and then from this room model right here dot object.get is getting the particular model which has the name of this room so which have the name of codas in this case now that we have all those details that we need all i just want to do now is to pass it into our html so right here let's make sure we got that first of all we put a comma and we have these and then let's pass the username oh so let's copy this we pass the username and then we want to pass the room details also so first of all i want to pass the room actually if we have the room details we need to pass the room but let's just do that so let's copy and paste so now we have all this sent to our html now in our html we should be able to access all these easily so let's save this file and right here in rooms first of all let me scroll all the way up so instead of room name now that i have the name of the room i can just do room so this room is actually these okay this shouldn't be this good save that again so we have this room so let's first see that change and make sure everything is working so instead of room name we should have kudas so right here now you can see we have cudas good now we're going to scroll down back to the form and right here so the value of the username is the current user we should just have this and then the room id should have room details dot id like this so i get in this room details that was sent here so as you can see remember that this room details is the particular room from the model so what we're just doing here is getting that particular model and getting his id remember in the beginning i said once you have a new object that object automatically has an id so i'm getting that id so now that we have all of these it should we should be good to go with using our ajax so just to use ajax i'm actually gonna just open a new script right here down below the body let's give it here so to save time i'm just going to paste in this code so what this code does you can see just a piece of javascript so let me explain each line by line so this is document so what this is doing is that once we load this document form we are saying that dot on submit of this post form so what we're seeing is immediately a user clicks on the submit button of this post form so this is the submit button of the post form so what do we want to do we want to have a function and we gave it this e value so we say e dot prevent default so what this prevent default does is that normally in a form once we hit submit the page is going to refresh or go to another page so this prevent default it's going to prevent that from reloading or going to another page so now we know that the page isn't going to reload now we're going to use our ajax to send that details to our database so what we're doing now is that we're saying ajax and then we're saying the type is post normally weren't using ajax you know we're going to use something like method but since we're using ajax we don't need that so already assessing the type post and the url is sending it to send i'm going to explain this url in a bit and then the data is just basically all the data username with the hashtag username room id and then the message so as you can see everything is here username id message that's just what we are sending and then the csrf token this is how we implement the cssif token right here so um the success function we can just say something like message sent so i commented this out but let me leave that like that and then yeah let's just leave this like this so what this is do what this is doing is that the substance function that means if the message was submitted to the database we're going to print a particular message so this is going to be accessed from the views.py function going to go back to that and then this so what this is doing is that once a user hit on send and it has been saved in the database we want to delete these we want to delete that particular line from the input so what i mean is that let's say a user type something right here and then the user is sent so once that has been saved they want to clear this particular input to now be blank just like the way you see normal chat services so right here we got this this should be good and what we just want to do is to have a new url and we're going to name this url send so as you can see it's sending all this data to a url named send so first of all let's save this up and then we come here create a new one say send and then we paste and then we paste so we have a new url name name sent then wants to create a new function for it so just the way we did something like this check view remember so this check view first checked if that room is available or not available then before it did whatever it wants to do so we're going to do something similar in the send so what we're just going to do we're going to access the send so let's scroll down a new function send requests so these are just basic functions and then right here you can see we're sending all this data to this send url so let's just access them so we're just going to say the message should be equals to so why isn't a post method from the front end so say request dot post and then it's in message so i like cross checking to avoid any errors is an available message then room id then username so those are the three we need so um now come here paste paste and then this should be the username [Music] and then this should be the room underscore id so now copy that let's just paste it here since it's the same thing so we have all these done so now that this view has all these data which the user kind of inputted what we just want to do is to store that data in this message database so let that quickly load okay yeah i know why this error is coming up just because we didn't save some changes yet but let's keep going so you know we have this models which is message so we want to save all those into this model so now since we imported the message model up here remember i said we're going to later use it so we have that imported we don't need to import it again so we can just say new message [Music] now new message we're going to say message is no just message actually message does objects um not slash we need a dot object dot create so we're creating a new object right there now the value remember we used value should be the message which we collected and then the user remember which user should be the username which we collected and then the room so what we want to store is the room id so room should be equals to the room id so now that we have this all we can just do just say new message that's save so we just do new message dot save so we have that saved let's just return now we are not rendering any html page we just want to return back to the front end or to the javascript the message so we're going to give it an http response before we can do that first of all i have to import it here so we say from jungle.http import.http response good so now we can say return http response and we can say message sent successfully good so now we have this so this http response this is how i just saved the file and this is how we're gonna so this data remember i said on success that means if everything works perfectly we're giving it a function with this value of data and then want to alert data so this data is this http response so when we alert it's just going to say message sent successfully now we did pretty good so let's go check out what we did now this should be working good and then in messages you can see we have zero message so now let me just type okay first of all i gotta refresh this page refresh refresh good so now let me just type a message like hey guys and it's sent you can see it says message sent successfully obviously later in the tutorial we're going to remove this or just using this for confirmation and then once i hit send you see that the message doesn't show here again which should be now let's come here and hit refresh i see now that we have a new message so it says hey guys that's the value and it comes from the user tom which we see here and then the room is with the id of one so the room with the id of one is obviously this first room so if it's another room it's going to tell us the room with the id of two let's cross check don't let us assume so let's say okay now let's go to the home page now i want to create another room and say back and developers and now tommy is going to be in here now let's create the room and now let me see a developers [Music] and it's sent the message sent successfully the message this place is cleared now we come here to messages we have two messages now hey developers we got the date and the time and it's coming from the user tommy and the room id is two so if i come to rooms you see we have a new room created with the id of two back-end developer so we can use this to access the messages for each room later so um this is working pretty fine we what we've done to this point is that a user can create a new room enter that room so it's gonna be on a dynamic url and then a user can send a message and that message will be saved in the database so in the next video what we just need to do is to make sure that oh once the user enters a room all the messages of that room will first of all show will load like a normal chat and then once a user submits a message i need send is automatically going to show right here and then not just only for the user for also another user anywhere the person is i'm also going to test that with an incognito mode so i hope you guys enjoyed this tutorial to this point i really had fun building this if you did don't forget to smash that like button and subscribe so having that said thank you for watching and i'll see you in the next and final part [Music]

Channel: Code With Tomi

Views: 113,794

Keywords: django, python, projects, chat app, chat, messaging app, web development, codewithtomi, code with tomi, django tutorial, python django, django unchained, python django tutorial

Id: IpAk1Eu52GU

Length: 47min 25sec (2845 seconds)

Published: Mon Apr 19 2021