Okay.
So welcome back to this section.
The very first thing we would like to do is just build the UI, right.
So we would like to build some HTML and CSS so that we can get this output.
So let's go ahead and first create a div which is going to be our chat container.
So we're going to give this class so that we can really select this later and give it some styles.
And then we would like to have our chat header right.
Which is going to be this thing that you see which has some border radiuses which stands for really
uh, rounded corners and some different, uh, background colors, things like that.
And we're going to have our username container which is going to hold the username, the input to be
able to update it and then a button.
So let's create all of them.
So we put an ID so that we can really select it with the JavaScript.
Right.
You can also put the class.
But here I'm going with the ID.
Then we have an input with the type being text id, being user input, and then the placeholder.
Here it says new username.
And let's go ahead and get a button that says update username.
And then we just got a button that says update your username.
Then below to it we would like to have the chat messages container.
So basically this will contain all the messages and these system messages that we have right.
And below to this we would like to have the chat input with an input as well as a button.
So here it is going to be this section.
So that's going to be it for the markup right.
This is going to be our HTML.
Now what do we want to do is just add some styling which is going to be under the head tag.
So go above this title.
We would like to create a styles or maybe just style up element right.
Style tag.
And since this is not a CSS CS course.
Basically I will copy it and paste it.
You can do the exact same thing.
Just go into the GitHub repo that you can find from the description of this video and find this index.html
file.
Grab the styling, which is about 150 lines of code, and you can really just see what we are doing
here.
I'll just zoom out so that you can see it clearly.
We are defining our colors.
So if you just change this to be like these colors, to be green, pink, yellow, the entire view is
going to change, right?
The theme is going to change.
And here we have setting some font, uh, font uh family here, margin paddings background colors or
even just colors giving some border Radiuses box shadows, things like that.
Here you can see like we are selecting all of them with the class names and even sometimes with IDs.
Okay, so these are going to be for the styling.
As I said this is not the focus of this tutorial.
Um, so I will skip to explaining this.
And the other thing we would like to do is import the scikit I o into this, uh, UI.
Right?
What do we want to do is just go into cdnjs and just say scikit io.
Here.
We can go ahead and grab the script.
So here I'll just say copy the script tag and paste it below the title.
Okay.
So this will allow us to use scikit io in the, uh, JavaScript script that we're going to have.
So just above the body, go ahead and create a script, uh, tag.
And we'll be able to put our JavaScript code into here.
So the first thing we would like to do is just get the scikit.
And here we can, uh, how we can get this right.
Let me just zoom in, just get our scikit, uh, instance so that we can really send events to our backend.
Right.
And here I'd like to just grab a couple of different, uh, elements.
So here we would like to get the chat messages.
We say document get element by ID chat messages.
This is the ID we have given to it.
Then we would like to get the message input.
We would like to get the send button current username user input.
And we would like to get the update username button.
And we'll be calling all of them uh just in a second in the video.
Now let's say we would like to get the current username.
Let's say this is going to be a variable.
And by default this is going to be an empty string because we can uh, will be updating this basically.
And what we can do is just listen for new events as well.
So here again we'll be using scikit on just like in the Python file.
Whenever you are listening for something you'll be using this method.
So here we say listen for the set username.
Name event and we're going to get a data back.
Right.
So let's just wrap this into our function.
This is going to be our argument.
Now what is going to be this data.
Well basically whatever you return from here it is this object right here you have the username.
So that's why we can say something like data dot user name, which is going to be equal to our current
username variable.
So that's how you can really get the data out of the event right from the socket.
And now that we got the current username we can update our uh like current username span, which is
going to be this thing whenever you update your.
Let me just change the color.
Okay.
So let's say you put your username, once you click to it it's going to go ahead and update this uh
span let's say current username name span, the text content is going to be equal to, let's say, your
user name and the dynamic value.
So current username.
Okay.
So this is going to be our first event that we are listening to.
Then the other one is going to be whenever someone joins right let's say socket dot on.
And we can shrink the left hand side we'll say user underscore join.
In this case again we're going to get some data back.
And we would like to say uh add new message.
I'll just say add message.
And we would like to say the name of the user name.
Right.
Who has joined.
So I'll put back text and I will say uh data dot username joined the chat.
And this message is coming from the system right.
This is a system message.
And this is the method that we're going to create just in a second.
and it's going to give this kind of an output right here.
It'll say username.
Uh, join the chat.
This is what we are building.
Let's do the same thing for the left chat I will duplicate this here.
We'll say if the event is user left we can just change the text.
We'll just say this user left the chat.
And again this is a message coming from the system.
So if it is system we're going to see this kind of message.
But if it is user we will see this kind of a message element okay.
So the other event let's just listen for the new message.
I think we can again duplicate this give a little bit of space.
We will say if the event name is equal to new message we're going to get the data which is the new message
data.
Right.
And here we would like to just send uh, let's just say the message itself.
we'll say data dot message.
This is a user message, right?
It is not a system message.
And the username let's say data dot username as well as the avatar so that we can show the.
Avatar of the user as well as the username.
And if you are wondering how can we grab those.
Well basically this is what we are returning the username avatar.
And then the message.
Which is our data object.
Okay, I hope this makes sense at this point.
Now the I think very last one that we're going to be listening.
To is going to be the username updated.
So I will just go ahead maybe type this out or.
Maybe let's just duplicate it and we can update it on top of it.
So scikit dot on let's say.
Username underscore updated.
We're going to get some data back obviously.
And you can like wrap this with a parentheses.
Or you can just don't wrap it because it is only one argument.
That's completely fine.
Um, here how we can just leave it like this.
And again, we will add a message to the user interface where it's going to say something like this
user changed their name to this new user name.
Right.
So we will say if and first let's just update this.
By the way I'll just make this to be backtick.
And I will say data dot old username changed their name to this new username.
And let's say data dot new underscore user name.
And this is a system message so that we can really see it in this tiny gray text.
And now here there is an edge case that we need to keep track of.
So if we are changing our name so we'll just say data dot old username.
If it is equal to the current username then that means we are just updating our name so that we.
Now we need to update the UI as well depending on this.
So we will say current username is going to be equal to let's say data dot new username.
And we would like to update the span with it.
Let's say current username dot uh current username span dot text content is going to be equal to your
username.
And then whatever the new username is right.
So this is going to happen when user types their name in here.
And click to this button.
It will update this with the new name.
And I think I have explained it wrong in the previously where here I said this is going to be the case
when we got this event, but this is not really whenever you join into the into the application.
This is going to run.
Okay.
So when you click to the update username button this will actually run.
And when you just join to the application this will run automatically and update the uh update the span.
I hope this makes sense in this case because if you remember, this is going to be called whenever you
join right in the connection, uh, event.
Whenever you connect, it's going to create a username by default and just set it to your username.
Okay.
So these are going to be all the events that we're going to be listening to.
And whenever we got those events we would like to update the UI and even maybe update some different
parts of the UI as well.
So now we have listened for multiple different events from the client.
Now it is time to send some events to our backend, right?
So let's try to do it.
Basically, I will just go ahead create a function that is going to be called as send message.
And for now, let's just leave it empty, and then we'll have one more function that says add message,
which is something that we have created already.
Right?
And let's just try to see how we can send and send a message.
Right.
We will say if send button, let's just first add an event listener to it.
Let's say if we got a click event, we would like to call the send message function okay.
And whenever we type something in into the message input.
So here I'll just say um message input dot add event listener where it is key press or key down.
We would like to run this function.
We're going to get the event.
And here we'll just go ahead and say if E dot key is equal to the enter key we would like to basically
call the send message function okay.
And when we say update the username.
So let's say update username button.
Add event listener.
When we click to it we would like to run this function.
Let's just say this is going to be update user name.
And let's create that function as well.
Okay.
So let's just save and we will build these functions.
So let's first build the send message function.
What do we want to do is first get the message here we'll say message input dot value dot.
Um wait why don't we get the value.
Um.
Like I think we should get the auto suggestion, but let's just go with it.
We'll say call the trim method.
So we got the message that user typed in.
We'll say if there is a new message, we'd like to say.
Scikit image, where we send an event which is going to be called as send message and we will send the
message to the backend.
And now that we have sent the message, let's clear the input to be an empty string.
And let's do the same thing for the update username.
We'll just go into it.
Let's scroll a little bit.
Um, I will say first let's get the new username from the input.
So username input value dot trim.
And we'll say if there is a new username and we can just say if new username is not equal to the current
username.
In this case we would like to emit this event called update underscore username.
And we can put the username to be new username right.
And we'll say username input dot value is going to be an empty string.
So that we can really just reset the state in the UI.
Okay.
So the very last function we will need is to update the UI.
So this is going to be a little bit longer function because we would like to create HTML elements and
put it in the UI.
Um so to say like put it in the UI dynamically.
Right.
So this is going to be taking a couple of different arguments.
First one is going to be the message.
Then the type if it is system or user.
And we'll get the username username as well as the avatar.
Now this could be an empty string if it is not being passed right.
And same for the avatar because if the system is sending the message, they are not going to have an
avatar or username, right?
So system send the message they don't have an avatar or username, they just have the message.
Okay.
So let's try to create this function.
First we would like to like to create a message element which is going to be a div.
So we say create an element that is div.
And we would like to add the class name to be message so that we can really like uh have it looking
a bit clean and we need to keep track of the type.
So we'll say if type is equal to user and do we ever send the user in the add message function.
Let's just check for it.
So here this is type of system.
This is user okay.
So we'll just say if it is type is equal to user run this.
And if it is not then this is the system case.
Let's first handle the type being user.
Now we'll just check if we are sending the message.
So we'll just say if send message and we can say if the user name is equal to the current user name,
that means we sent the message so we can add a class name to our message element, which is going to
be sent.
So if you have the send class, it is going to be on the right hand side.
And if you don't have your it's going to be on the left hand side.
And you can take a look at this class by going to the styles.
Let's just search for dot send.
Okay.
Here you can see if we got the send class.
The flex direction is going to be ro reverse which means it would be on the right hand side.
Right.
Okay, I hope this makes sense.
Let's go ahead into here into the if check.
We would like to now create an avatar image.
Right.
So here let's say create an element which is going to be an image.
Let's give a little bit space.
And we'll take to give the source to it which is going to be the avatar right.
Then we would like to append this as a child to our message element.
Then we would like to create the message content.
Right now we'll say content dev.
Again, we're creating a div with a class name being message content.
Then we'd like to create the username div.
Okay.
So we're going to give the class name of being message username.
And then the username content is going to be into it.
Then content div will be updated with this uh username div.
Then let's create the message text.
So here I'm just copying and pasting.
I hope you don't mind it because like I'll just walk you through it line by line, right?
We don't really need, uh, we don't need to waste any time by typing all this.
And we'll again update the text content with the new message.
And let's just say append child.
And finally into this message element we will append everything that we have created which is going
to be the content div.
And finally in the else case we will say Are.
The class name is going to be system message so that it is looking like this.
We have the styling for it and just put the text content.
Okay.
After this if and else we will go ahead say chat messages append child to this message element that
we have created.
So that is going to update the UI.
And once you send the message you want this to scroll to the bottom right.
So let's say you have a bunch of different messages.
Whenever you send new one it should automatically scroll for you.
And we can do it by writing a single line of code.
Chat messages dot scroll top is going to be equal to chat messages dot scroll height.
So that's going to be it for the entire file.
And let's just try to test this out.
Let's go ahead kill this and run this once again which is going to be our app.py file.
Click to it.
And here we can see Let's just delete this h1.
I think we forgot.
Just go above delete this save.
Refresh.
Okay.
We need to kill the server and run this again.
Let's refresh.
And here we can see this is what we got since we just joined here.
It says this user joined the chat and we can see our username span is being updated.
Right I'll go ahead.
Copy this.
Save it into a different tab.
And this is the username 7622.
And this user can also see that user just joined the chat.
And let me just put them side by side so that we can see it in real time.
Okay.
So here I'll just say hey.
And since this message is sent from me, I can see it on the right hand side and this user can see it
on the left hand side.
So let's say hi.
How is it going.
Like here.
You can see it is scrolling for us by default, right?
And this is what we have done with that single line of code at the end.
It is this one.
Okay.
Now let's try to update our username.
Here I'll just go ahead and say my username is going to be John Doe and update it.
Here we can see everyone is just being notified right.
And let's just send a new message.
It should have our new name in both cases.
And we can do the same thing.
Really?
Um, let's just say Bob Doe.
Hey, it just works as expected.
And this can work even if you create multiple different tabs, right?
Everyone can just see those messages.
So that's going to be it for the application.
In the next section we would like to deploy this.
I'll see you in the next one.
And I think I just forgot.
But once you leave it you're going to get the left the chat message as well.
So it is working.
No worries.