Building a Realtime Chat App Using Python & Socket.IO

hey guys welcome back in this video i'll be showing you how to use python and flask to build a chat app using socket io in this app we'll have an app that you can access and then send messages to active users that are currently on the app so the best way to describe it is that it is a global chatting application now before we begin writing the code to create this application i want to show you a demonstration of how this app is used so without further ado let's begin so this the demonstration of the app here and here you can see that there is this input form and if i send a message here so let's say i say hey how are you it pops up on this other window now this is being sent out to every person that's currently active on here which is why you can see it on this other window if i send a message from this other window and say i'm good how are you you can see that it pops up on the window that i originally sent the message from so in the most concise way possible this is an app that you can basically use to chat with anyone that is active on the application and now that i've shown you what this uh demo looks like we can start building this app now before we build the app i want to go over how this video is going to go and how it's structured so i'm going to first make a virtual environment in python and then i'm going to show you which dependencies you need to install and then we can start building the app so with that being said let's begin so here i've opened up visual studio code in this directory called python chat app and what i'm first going to do is create a virtual environment so to create a virtual environment we need to do python 3 hyphen m v envy in the name of your environment so i'm just going to name it v env now i'm running this command since i'm on mac but if you're on windows it's the same command except instead of typing python 3 you'll just do python hyphen mvenv and then the name of your environment but since i'm on mac i have to do python 3. so i'll just hit enter and if you give it a few seconds you can see that it pops up on the sidebar right here and now that we've created our environment we need to activate it so to activate it you're going to need to do source venv bin activate so source v-e-n-v forward slash bin forward slash activate now this command is for mac users so if you're on windows i'll have the command on the screen since i don't remember it by heart so i'll just hit enter and now that we've created and activated our virtual environment we just need to install our dependencies and the dependencies we need to install are flask and flask socket io so to install them you just need to do python or pip3 install flask flask hyphen socket io and if you're on windows it's the same command except you have to do pip install flask and flask socket io but since i'm on mac i have to do pic3 so i'll hit enter and you can give it a few seconds and the dependencies will finish installing and now that the dependencies have finished installing i'm going to create the files and folders we need for our application so that we can start to build it so in flask you need a python file that will contain the code for the app and a templates directory that will return the templates so i'm just i'm just going to type in my terminal touch app.pi to create a python file called app.pi and you can see that it shows up right here and next i'm going to make a directory called templates and a file called message.html which is a template inside the directory by doing mkdir templates and touch templates forward slash message.html now these commands are only available if you're on mac or linux if you're on windows there's a separate command for this but um if you can't type these commands then you can just create these from the sidebar over here but now i'll hit enter and you can see that the templates directory has been created with the message.html file inside of it and now that we have our files and folders we can begin writing code to build this application so in order to continue with this application i'm going to first write the code to set up our python file and as i'm writing the code i'll explain to you what it does and what in the end i'll show you what the app currently looks like so first i'm going to do from flask import flask and render template in order to import flask and render template to render this message.html page and after this i'm going to um import socket i o by doing from fast socket i o import socket io and send in order to import socket i o and broadcast messages across the server and next i'm going to do app is equal to flask underscore underscore name underscore underscore to create the app instance and next i'm going to write code to create a route for messaging so in order to show that messaging page that i showed you in the demo we need a route for it and to do that we can just create it by doing at app.grout forward slash define message and return render template message.html so this will basically return this message.html uh template at the forward slash route basically whenever you hit the um application okay and now we just need a way to run this app so to do that we can just do if underscore underscore name and score is equal to true so app.run will basically run the app and debug debug is equal to true we'll let the server know that we are in debug mode right now so that if we have any changes that we need to apply to our app we can make those changes on the spot instead of having to restart the server and now that we've gotten the app set up we just need to go into the message.html file to create the input form for sending messages so in the message.html file i'm going to type exclamation tab so that it gets me this html boilerplate setup and next i'm just going to create a div tag and give it a class of messages by doing div class messages to create this div container and next i'm going to create the input so to create the input you just need to go inside of this div tag of course and here you can just do input get a placeholder of message and an id of message input in order to create the input form and now we just need to save all of our code so make sure that you have both of these files saved and we need to run the app to see what it looks like so my terminal has been cleared and i'll do python3 app.pi to run the python app file right here and once i hit enter you can see that it shows this right here running on http 127.0.0.1 at port 5000 and if we just go to this link on our browser you can see that we have set up our web page and we just need to use socket io to display that the user has been connected and so that we can send and display messages so now in order to connect with socket io i'm going to go into this message.html file and i'm going to paste this script tag in the head of my html file and you can find this in the github link that i have in the description which will contain this import link for socket io and now that we have this import link we can actually work on letting the user know that they're connected and sending messages so what i'm going to do is first create a script tag inside of my body tag to add some javascript and here i'm going to do cons socket as equal to i o [Music] in order to connect to socket io and next we want to display that your connected message once we've connected to socket io and i've showed you this in the demo so to do that we're going to display that message in this messages class with this dib tag so to accomplish that we have to write what message container is equal to document.queryselector dot messages in order to access this messages class right here and then to display that message we have to write socket dot on connect and i'll explain what all this does once i'm done writing the code [Music] okay so what this is going to do is basically tell socket io to listen for a connect event which is when a user loads the page and then it will create a p tag which is what this p variable here is for it's going to create this paragraph element and the text in text that's in this element is going to be your connected and we need to display that text by appending the element to the message container variable so and the message container variable will basically access this messages div class right here so make sure that you have all this code saved and if we go back to our browser whoops uh if we go to our browser that's it right here um if we reload this um why is this not working oh we need to enable socket io in our python file so to enable socket io we just need to go here and here what we need to do is create a socket io variable that will connect us to the socket i o basically so to do that we just need to do socket i o is equal to socket io app and cores allowed origins is equal to all represented by the asterisk here so if we go here and refresh you can see that it displays that we are connected so what we've done so far is basically import socket io in our html right here and did socket.on to listen for a connection event and once we received that connection event we basically created a p tag that says you're connected and appended that to the messages container and in order to do that yes we kind of ran into an error but that was because i forgot to tell you guys to add this line right here which will basically connect the server to socket i o as well and this will allow it so that our front end can use this i o function to connect to our back end and here you can see that it displays that we are connected so i've closed my terminal currently so that it's easier for you guys to see and now we just need to send messages so to send messages we need to listen for an enter key in our message input so whenever the user types a message they will have to press enter in order to send that message so we just need to access the message input and the same way that we accessed the messages class and listen for that enter key and once they press that enter key we can emit an event that a message is being sent to the backend in the back end we'll then broadcast that message to the server as a whole and the back end will emit that message in doing so and when we receive that event we just need to display the message so here in our javascript we just need to do let message input is equal to document.getelementbyid message input to get the input form and then we need to add an event listener for key presses so message input dot add event listener key press if e dot which is equal to 13 uh socket.emit message message input dot value message input value is equal to okay so what this will do is listen for a key press and if that key press is equal to 13 which is the enter key we want to emit this message event by passing along what the message is to the backend and once we've done that we can reset the value of the message input so that it's cleared for us to type another one so long story short what we've done is just we've created an event to emit the message along with the value of the message input which is what the message itself is so next we need to go into our server and catch this event and the message to send this message to everyone connected so right here we can do at socket io dot on message define send message message send message broadcast equal to true so this code will basically listen for the message event and will take in the message that was sent by the user which is what the message parameter is doing right here and it will send that message to everyone connected so it's basically emitting a message event so this send function will emit a message event by default and when using send it's sending that message to the entire server and by in order to send it to the entire server it's doing broadcast is equal to true so now we just need to go back into our javascript and catch this message event and display that message on the screen so to do that over here you can just do socket dot on message to catch the message oops and then take in the message as a parameter and do let message element is equal to document.create element p message element dot inner text is equal to message and then message container dot append child message and i'm gonna explain this so what this code does is it's going to listen for that message event that was emitted by the server by this send function right here and whenever it catches that message event it's also going to catch the message that was sent which is this message right here which is which is coming from this parameter that we sent from the front end and once it gets that message we're going to need a way to display that message and we're displaying that message using a paragraph element so we're basically creating this variable called message element which is going to equal to document.createelement and it's creating this paragraph element and that paragraph element needs to have a value inside of it needs to have text inside of it right and that text will be the message that the user sent so we're basically doing message element.intertext is equal to message which is the message that we want to send and once we've done that we just want to append this paragraph element to this messages class right here so that we can display it onto the web page so if we save our code and go here and refresh this and open this same web page in another tab as well so that we can have multiple connections and let's say that i send a high here you can see that high is being sent and you can see it on our tab as well as this other tab and if we send hello from this other tab you can see that it's sent here and if i say how are you doing that um text is sent to the other tab so now we're basically done with this application all right guys that's it for this video i hope you enjoyed and i hope this was helpful to you if it was make sure to leave a like and subscribe and i also want to thank you guys for the immense support i've received on this channel and i wanted to apologize for the lack of uploads i've been on summer vacation with family all summer and school starting soon so i haven't gotten the time to upload but other than that i hope that this video was of help to you and i hope you enjoyed and that being said i'll see you in the next video [Music]

Channel: Arpan Neupane

Views: 14,122

Keywords: chat app using flask and socketio, socketio tutorial, python socketio, realtime chat application tutorial, how to code, python tutorial, programming tutorials, flask backend, socket io tutorial, web development, how to make a chat app with python, flask, socketio, flask-socketio, real time, chat application, chat, python, programming, tutorial, flask socketio tutorial, chat app

Id: NIduVsNC8X0

Length: 17min 31sec (1051 seconds)

Published: Sat Jul 30 2022