Build a Chat Room in JavaScript | Stephen Mayeux | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (1h 51m)
    • 1. Chat Room Demonstration

      2:42
    • 2. How This Course Is Organized

      3:41
    • 3. Where to Find Help

      4:01
    • 4. Setting Up the Dev Environment

      8:28
    • 5. The Username Modal

      9:36
    • 6. The Username Modal Continued

      7:30
    • 7. Chat Room Dummy Data

      5:33
    • 8. Chat Box and Styling with CSS

      7:46
    • 9. Connect to Server

      9:16
    • 10. Refactoring Client Side Code

      14:38
    • 11. Send and Receive Messages

      7:18
    • 12. Introduction to Advanced Section

      3:46
    • 13. Server Setup

      5:20
    • 14. Redis and SocketIO

      10:19
    • 15. Fetch and Add Messages to Redis

      6:33
    • 16. Project Ideas!

      4:49
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

157

Students

--

Projects

About This Class

In this practical, code-along course, students will build a complete chat room from start to finish. This course is intended for both beginner and advanced students. In the first part of the course, students will build the front end components of our chat room using HTML, CSS, Bootstrap 4, jQuery, and JavaScript. You will install and use a pre-made server so that you can start the project immediately.

The second part of the course is aimed at advanced students or coders who are interested in the backend. In this part of the course, we will delete the pre-made server and build it again from scratch using Node.js, Express, Redis, and WebSockets.

The complete source code for this project can be found at https://github.com/StephenMayeux/skillshare-chatroom

For additional support and 1 on 1 tutoring sessions with me, please visit https://thebestjs.com.

Meet Your Teacher

Teacher Profile Image

Stephen Mayeux

ESL Teacher Turned Software Developer

Teacher

My name is Stephen Mayeux, and I am an ESL Teacher Turned Full Stack Developer. I have spent the last decade teaching adults the world's quirkiest human language, and now I am teaching the Internet's quirkiest programming language: JavaScript!

I am a self-taught programmer who is currently working full time as a software engineer in Austin. My personal tutoring sessions and videos will save you hundreds of hours of studying alone and getting stuck.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Chat Room Demonstration: Hello and welcome to my course. How to build a chat room in Java. Script my name and Stephen My You and I will be your instructor throughout this project. Speaking off, let's take a look at the project we're gonna build together. So I have opened to browser windows. I'm using chrome, but this can work in virtually any modern browser, and I have opened up my application. It is prompting me for a user name. So let's enter a name Stephen. And as soon as I entered the chat room, all of the previous messages from the other participants are loaded. Uh, well, not exactly all of them. But the 10 most recent messages, or the 10 last messages that were sent in the chat room and running in the background, is a Web server and a database that are storing these messages. But don't worry. I'll talk about that later on in the next video. But you can see right here that all of my messages previously sent or in blood bubbles, and it has a time stand, and the messages from the other participants are in green bubbles. So I could say, Hey, how are you and it appears in the chat window. It's blue bubble. So let's enter. Go to the other browser window. Enter in. That's a different name. This one is Tanya. And so the same thing happens for Tanya. These air her messages. This one's mind that a descent and Tani says Thanks, Stephen. I am hungry since the message, and immediately we get the message on the other browser window because we're using some technology called Web sockets to make this real time communication happen. Okay, what about Chinese food? And it works both ways simultaneously, like a real chat application. And you can open a Zeman E browser windows as you want and and have a chat with as many participants as you like. It's a pretty solid application that we will be building. Okay, let's take a break right here in the next video. I'm gonna talk about the organization of the scores and what you need to have prepared in order to begin this course. So thanks for watching. Thanks for enrolling in the course, and I will see you in the next video, but fine. 2. How This Course Is Organized: Hello and welcome back. Okay, this course is organized in two parts, and the first part is aimed for beginners or coders with a little programming experience. Familiarity with HTML, CSS, perhaps a little bit of Java script. In the first part, we're gonna build out the front end. So the motile, the chat bubbles, the input element in the button right here will build all the elements out, and we will connect it to a server which will make our application actually work. Don't worry about that server. I have created the server for you, and I will show you how to install it on your computer in the next video. Now, in the second part of the course, we are going to delete that starter pack. That starter server that I have created for you will delete all of the files and start from scratch, and I will show you how to create a server using no Js express reddest database and a lot of other cool stuff. Now, in order to really get the most out of this course, I recommend running it locally on your computer. And in order to do that, you're gonna need some software. This is available on Mac or PC and Lennox. So no matter what system have you can get all of the software and there are tons of tutorials and videos and articles that show you how to install this software. But first of all, you're gonna need get and you need get because you are going to get the starter Pack the starter server from a get hub repository that I'm hosting. So number one get on your computer next, you're gonna need no Js in order to run the surfer. Okay, this is also pretty easy to install, So not you crazy. Finally, I recommend that you install yarn and some other software called Note Mine. And don't worry, I'll show you how to do how to do these installations if you don't already have it. Now, if you're very uncomfortable with installing stuff on your computer, then you could do a search for Cloud nine and this will take you to Amazon Web services. Cloud nine. It's an online I D e, which has get and node and all of the other software that you need in order to run this project. It's pretty good. I like it, but running it locally on your computer is going to be so much faster and easier. And, well, I just prefer writing applications locally instead of a cloud based I D. But this is a very good solution. If if you prefer an online cloud based I d. Okay, let's take a break in the upcoming videos. I'm gonna show you where to find help if you need it. And I'll also get you up and running with your development environment on, then coming very soon is some. Actually, some will actually be coding. So a little bit mawr introduction in context. And very, very soon we will be writing some code. Promise. Okay, let's take a break. Thank you for watching. I will see you in the next video, but by 3. Where to Find Help: Hello and welcome back. Now, you might need some help during this course, and that's totally normal. You're not stupid. Coding is very difficult. Even if you're following along with the tutorial, and you confined the complete source code for this project on mike it up profile. If you don't have an account, I highly recommend that you create one. Today. It's free and pretty much an essential tool that all developers use around the world. You can find my profile. Atget hub dot com slash Steve My, you. And at the top, you will see my penned repositories. These air, my penned or my favorite projects and the source code for this project is called Skill Share. Chat room source code from a red, A socket Io expressed. Yes. And Jake weary tutorial on skills hair. So you can click into that and you will see all of the project files. That code everything. Uh, if you take notice of this branch, the default branch is the master branch, which is the completed project that includes everything from start to finish. The client and the server parts one into of this course now, uh, throughout the course, I kind of divided into chapters, and these chapters are represented by these branches over here. So in the beginning it starts off very, very simple. And then we add more and more and more and more, and there's eight chapters in total. But if you need the starter files for the before the server to get up and running, they're going to select the Starter Files branch. And it doesn't include everything but just did not to get up and running eso in the next video. I'll show you how you can get the starter files onto your computer and install everything that you need. So this is an excellent place to come if you get stuck or when it compared your code with mine. Now, if you need more help in MAWR assistance, you can definitely reach out to me at the best. Js dot com. I teach Java script with one on one personal tutoring sessions with people from around the world. I teach mainly Java script Full stack No Js all that cool Web development stuff, and you can find out more information about me and of my tutoring sessions at the best Js dot com. But if you have a quick question. You can also find me at Twitter. And my handle is at s l hip hop dot com. There it is. And if you want to say hello or ask a short, simple question this Twitter account if you use Twitter, I I also checked this and it's a good place to ask for help, and I totally forgot. But you can use the skill share community toe ask for help as well, so you can ask me questions or your classmates questions. And we are always happy to help you out, especially if you get stuck or if your code it's not working. Okay, let's take a break here. And in the next video, we're gonna get the starter files onto our computer, get everything up and running. Make sure we have all of these thes essential tools installed. And then very soon we will get up and running with the project and actually start writing some code. It's coming, I promise you. Right now, let's take a break. In the next video. We will get our development environment all set up. Thank you for watching. See in the next video 4. Setting Up the Dev Environment: Hello and welcome back in this video, we will set up our development environment so that we can actually run this server and get started on the project. Okay, so you definitely need a have get and note installed on your computer already. And no matter if you use PC Mac or Lennox, what I'm gonna type in the terminal will be almost universally the same across all these different operating systems. But let's verify that we have get oh, I think it's get dash dash version. And okay, that's good. We have it installed. Let's check node dash V. OK, good. We have a recent version of node and we also need to get yarn. I highly recommend yarn and node mon eso Before we can install yarn and node mon, we need to make sure that we have knowed installed first because we need to install yarn and node mind with a tool called NPM, which stands for node package manager yarn and node mind. They are packages that make development of much easier. And so I couldn't run a Dash V on node, and I have that installed as well. So if you don't have yarn or node Mon Install, please run this command. I want you to run NPM install Dash G yard and no daemon. Okay? And you press enter and it'll run a command. If you get an error or warning, you might need to run it as pseudo. So just run s u d o in pm installed Dashti yard and note. Mom. Okay, so we have that installed on their computers. If we have get node node Monnin yard, then we are good to go. Okay, so let's go back to that Get hub profile that I showed you in the last video. This is my get high profile. And at the top, you can see my pin repositories click on skill share chat room. And these this right here is all of the source code for the project. Now, by default, Master will be selected. Don't choose Master, because that's the completed project. Choose the starter files right here. So select the branch starter files from the drop down menu, and then you're gonna click clone and then copy it to your clipboard right there. And I have an open terminal. I'm just in my root directory. You could go into any directory that you want to, you can go into documents or wherever you want. But I'm just in my route and I'm gonna clone this to my computer, so get clone. Piece that in there. Okay, okay. Very good. Now it is in, uh, now it's installed on her computer. Excellent. So let's see D into skill share chat room. Okay. Great. Now what I'd like you to run is get branch. Okay? And there it is. There is Master and Master. It is Thekla pleated project, and we need to check out the starter files. So let's run a couple of commands to get specifically the starter files. So let's run. Get thatch and let's run. Get check out, start her files in all capital letters. Let me make it a little bit wider. Right here. There we go. Okay. Great. So now I have the starter files and that is the branch you want to be on. We can verify by running. Get branch and started files. It is the branch that were on. You don't want Master Masters. The completed project, but starter files is what we want. And whenever you're ready, we can open it up. Okay. And this is the project. This is the starter. Everything that we need to get up and running and we'll talk about this specifically the files later on, all of the different folders and everything. But most importantly, index dot Js is remained server. Okay? And we're going to rebuild this from scratch later. It's not too important. In the first part of the course, most of the work will do in the first part of the course is going to be in this public folder right here. And we have a little bit of HTML. Not very much, but it's got bootstrap and Jake weary already included in the in the HTML document. So we got rid of that simple boilerplate. We include that in this starter pack right here. Okay, Now we're not ready to begin. We need to install the dependencies first. So I want you to run the yarn command to install the dependencies. And you might have noticed that a new folder cult node modules has been created, and it's the stalling. Some dependencies. Okay, great. And we are done. Okay. Before we start the server, we need to run source. Done. E N V R C k and we'll just press enter and that is going to load our environment variables . So in the starter file you have this file right here, NVR see. And it has a very important address to our database. And you need to run this command source that NVR see in order to make this work. And so now, to run our project, we type yarn start and we have successfully run our server. It says it's running on Port 3000 and we have successfully connected to readiness, which is our database. Okay, so let's go back to the browser. Let's open up a new tab and we will go to a local host local host Colon 3000. So local whose Port 3000. And sure enough it is working as expected. So our server in this final right here is our server. It is serving up, or it is responding with this simple index dot html file and only has hello world in the body. But in the next video, we're gonna add a lot more to this file. We're gonna create some CSS to make it look nicer. Thin this and of course, we will be writing lots of Java script and Jake weary so that the user can and interact with the application. Okay, Dokey, honestly, this will be the most difficult part of the course. Just making sure everything is set up and running properly. But once you have their server up and running, then you are good to go. Just follow along with the videos. And if you get stuck, let me know. Get in touch with me. Ask a question on the skill share platform and I will respond to you as soon as possible. But for most of you, this will be a painless thing to do. Okay, That was a lot of work. Let's take a break. And in the next video, we will create the user name Motile, so that we can enter the Champ Room. Thank you very much. Yeah, I'll see you later. But by 5. The Username Modal: Hello. And welcome back in this video, we're gonna get the user name Oodle up and running. So let's just jump right into it. We've got our index dot html file that's included in the starter files, and there's not much to it right now. It just has some boots draft, a query and a few other elements set up for us. Eso all of this looks mainly good. We don't need this hello world stuff anymore, so I'm gonna get rid of it. And to start off most. Most bootstrap projects always wrap that in a main div container. So we'll give it the container class to make it responsive and look nice at different wits . Now, in this course, I'm not gonna copy and paste too much, but just to keep the ball rolling and keep the pace not too fast and not too slow, I'm gonna paste a just a little bit. And this is the starter from our motile to get up and running. Now, if you want to learn more about the motile and how it works in bootstrap, I highly recommend that you go to the bootstrapped documentation website. It's get bootstrap dot com Goto documentation. Click on components and then click on motile. And here you can read all about the motile component, how you can customize the look in the all of the different configuration options. There's a lot of good material in here, and it's just better if you go ahead and read it on your own time. But let's go back to the text editor and this is what we've got started. So we've got a motile that will fade in and it has an I. D. Of user motile that's important. We're gonna use this later. Uh, this is a centered motile. So it's in the centre, horizontally and vertically on the screen and we wrap everything in a motel content class. And this is a very simple header with an H five. Just letting us know to inter power user name. Okay, so as a sibling to the header, let's add a total body Sobel at a class with total body and inside of that we will have an input element, OK? And I'm gonna get make this it, um a self closing element. And I'm gonna get rid of these attributes that don't really need them and I'm gonna put everything on multiple lines just to keep it nice and organized and clean. So it's gonna have a class of form control. Bootstrap class. It's gonna have an i D. Of user named motile input. Let's give it a placeholder. Something like enter your user name here. Uh, we can give it a name attribute, so we'll give it a value of user name. And I really hate text inputs with the auto completion, so we're gonna turn it off right here, and that'll make the user very, very happy. That and after the body, we're gonna do another diff. This one is the motile footer, and this is where we're gonna include the budding. So inside of that will have boobs a button. We're gonna get rid of the name attributes. We don't really need it. We'll give it the text. Inter chat room. Okay, let's give it the class of button button primary to make it look blue and button block. And okay, I think that is good enough for me. All right. Uh, let's take a look at it. Let's go to our browser and refresh and wolves. Ah, OK. This is normal. This is expected. It's not going to display automatically. We need to write some Java script in order to make it appear on the page load. So let's do that right now. So we're gonna go back here and inside of our public folder. We will create a new file. Will call it script dot Js. We're gonna write some javascript in here, but before we forget, let's at the file at the bottom of her. HTML. So at the bottom, you'll see all the script tanks. Let's add our script, Doctor. Yes, file. So we don't meet this. Bring it up on the other line right here. Okay. Source. Is this gonna be script dot Js? Okay. All right. So that this looking good. Now we're gonna write some Jaqui Rico just to get us up and running, and we're probably going to reorganize and re factor all of this s o. There will be changes. But for now, let's just get something on the screen. Said that it will work as expected. All right, so we're gonna do a dollar sign. Document got ready. And this is how a lot of people initialize there. Jake Weary projects is soon as the document. In other words, as soon as this HTML file, all of the CSS files and all of the Java script files have loaded. Then we will run this function. So it's really good if you want your JavaScript code to wait until the rest of the website has loaded on and we're gonna do that to get started. So inside, let's write var my user name and we will initialize that to know this variable will store the user ring. And now let's show the user name motile and disable the button immediately. So we have to target the motile with that i d. Of user name and we're gonna call the motile method on it and give it an object that object will have a few properties show will be true. Backdrop will be static and keyboard be false. So if we didn't include this, it would be possible to to avoid the motile. Actually, let's just take that out and I'll show you what I mean in just a moment. So I'm gonna take this Al and then let's disable the button, Enter room button. Oh, and I'm sorry, I don't think I have given that a class for an I. D you? Sorry, we'll call this the Inter room button. So I'm going back to my index dot html. And here's my button. I'm just giving it an I d of interim button. So let's just disable that right away, okay? I'm gonna save both files. Go back to the browser and we will refresh. Okay, there's a removal. This is good. And the button is disabled, which is great. This is exactly what I want. I don't want the button to be enabled until we have entered a valid user name, but it's still possible to click out of here. And if I press the escape button on my keyboard, I can also get out that motile and I don't want the user to do that. I wanted to be impossible to click out and to press escape. And you could only enter the chat room if you enter a valid user name. So by adding in these extra properties, it is impossible. Booths have a little technical difficulty here. Okay, that looks good. Oops. This needs to be a string. My apologies. Ah ha. There we go. Now it is impossible to click in the background, you can hear me tapping. You can hear me pressing the escape button. And we cannot exit the motile until we enter a user name. Okay. The videos has gone on for nearly 10 minutes. Now, I think this is a good time to take a break. In the next video. We'll finish out some of the other methods that we need in order to get the mobile working . But we're pretty close. Thank you for watching, and we'll wrap this up in the next video, but by 6. The Username Modal Continued: Hello and welcome back. Okay, We started on her motile in the last video. Let's wrap it up in this video. So we are able to display the motile with some J query and we have disabled the inter room button on bond. We don't want to enable it until the user has entered a valid user name. So let's right the functions that will determine if a user has entered a valid user name or not. So just to remind you, we will be targeting that that text input with its i d user name mogul and put and will also target the button again with its i d interim button. All right, so we'll come back over here and let's write a event listener for the input element. We're gonna target the input element, that text input element. Okay. And that's with I d user name motile and put will call the on method on input. So any time the user types into the text box, any time they type a letter, it's going to run this function. Okay, we're gonna give it a function with an argument of e. And he is just a short way to say event. OK, but what's right is E for short and let's store the value off whatever is in the text input . Let's store that in a variable cold inputs of our input equals event dot target. I don't value dot trim and trim is just going to remove the white space at the beginning and end of a string. So it just cleans it up, makes it look real nice and do it. So now that we have our input stored in a variable, we need to determine if this is a valid user name or not. So we definitely need a if conditional. But we should write a function in order to determine if a string or if the user name is valid and the function should return truer falls, and that's it. So let's call this function validate user name, and you can write it inside the document, ready or outside the document. Ready? It doesn't matter, But all right, it on the outside. So function validate user name. It's gonna take one argument user name, okay. And we're gonna create a variable called Reg. Exe and we're gonna create eight rejects. So we're start with two slashes and then inside. Ah, back slash w plus and then right here. G. So if you don't know regular expressions, no sweat. Essentially, we just want to test a string whether or not it has at least one Alfa numeric character. So Alfa numeric characters they include in the letters like ABC 12 and three. And it also includes Underscores. So a valid user name will have it least one Alfa numerical scatter character. So numbers, letters or another score. It doesn't include spaces. It doesn't include exclamations or question marks or periods or any other special characters. All right, and we will return. Reg. Exe the up test user name. So if the user name has at least one out the new mayor character, this function will return true. Otherwise, that will return false. So we will call that function here. Validate. Use your name and we will give it the input. And if that function returns true, we will enable the button and then store my user name way will reset it with with whatever the user name is whatever was entered in that input element. Now that I'm thinking about it, I'm just gonna move that variable up here to the top. I can also go up here, but it doesn't matter the place it could be inside. We're outside. Okay, so let's first of all, enable the button, so we'll select it with inter room button. The prop disabled will be false. In other words, it will be enabled. And then my user name that variable will be equal to the input. Otherwise, if it's an invalid user name, then we will disable the button again. And her button that problem disables is true. And then at that point will just make sure that we reset the very bold back toe. No. Okay, very good. And we've got one more thing that we ought to do before we can finish up this video. And we need Teoh enter in a click event handler for the button. So the button is enabled. Let's actually save this and refresh. Okay, Here the button is disabled. But as soon as I type something ah, it becomes enabled. Look at that. But I'm clicking on it and nothing is happening. So we need an event handler for that. Okay, so underneath here, that's right. Dollar sign hash into her room button on click. So when we click it, it will run this function. And that function will essentially just hide that user named Mogul. So user motile We'll call the motel method on it again. And this time we'll just give it a string called Hide. So let's save that. Let's go back and refresh. Okay? Looking good. I can't escape pressing escape. Things happening. That's good. I'm typing in my name. And then I click this and voila, the model disappears. Okay, excellent work. Let's take a break. We did a lot of work in this video and the last video. And if you need to check your source code, remember, you could come to the get Huck repository and everything that we have done in the last couple of videos is in branch number to the user name Oodle, and we will start the third branch entered the chat room in the next video. So will be a lot of fun. Thank you for watching. See in the next video, but by 7. Chat Room Dummy Data: Hello and welcome back in the last video, we got the user name motile up and running, and we can enter the chat room granted that we have entered a Valent user name. Now the chat room is pretty empty, and there's not much in there, but we're gonna change that in this video. So without further ado, let's start writing the HTML for our chat room. Okay, Now, once again, I'm gonna write a little bit of the HTML, but then I'm going to copy and paste certain blocks just to speed up this part. HTML It's, you know, good, but not the most interesting topic for this course. So anyway, let's right a little comment right here. Okay? Got that in there. And we're gonna create a few dibs just for responsiveness and Teoh attach some i ds to the def so we can target it later in our G query. Okay, so we're gonna right div with the class of we'll give it row into center it we will use justify dash content dash center, and we're gonna give it an I d. Of chap room. Okay. Uh, how about to sell lower Casey? All right, that's much better. Let's give it another Div inside. It's gonna have a class of called Dash eight. So eight columns. These will also be centered. So a line dash self dash center Inside of that, we're gonna do another row. Okay, Uh, with the bootstrap class of Roe, and then one more def came lots of days here, the class of 12 columns, and we're gonna call it checked dash content, and we're going to use that for some CSS later on. Okay, inside we will make a U. L and a Norden list, and I'm going to give this an idea of messages. All right? Cool. And this is the structure basically giving our chat rooms and columns and some alignment so that it looks nice and good. Now I'll go ahead and I'll enter in a couple of ally elements that will go inside a really well. And each ally element will actually represent one message from a user. So if it's a message that we have written, it's gonna be an ally that has a diff with a class of chat bubble, my user. And if the message comes from another user, the classes chat bubble user and depending, if it is another user or my user, then the next line will look a little bit different because theologian mints of the chat bubbles in the alignment of the information around it, such as the name and the timestamp are a little bit different. But right here we just have a span with a class and some texts, including the name and the timestamp of the user. Okay, And same thing for the other bubble. It's just presented in a different order. So I'm gonna go ahead and this copy this a few more times. So we have lots of bubbles, a great and these bubbles, they have some icons that are coming from thought awesome. That's what this class FAA is. So let's quickly add that to our project now that we have that in in our minds. And so we're gonna go to the browser and I want you to goto font awesome dot com. You click on get started and we want the Web fonts with CSS. And so we're gonna click the copy code button and we'll go back to her html and below the bootstrap ah, link somewhere like Line 10 or 11 just paste what we have copied from fun. Awesome. And now we'll have access to all of these cool thoughts. So let's save that. We'll go back to the browser, we will refresh. Okay in. Great. So we see the motile right here, and we can see the messages in the chat room. They're visible right now, but we'll hide them until we actually enter the Champ Room. And it doesn't look too impressive right now. It's just a list, and there's no styling, but we're gonna take care of that. In the next video, we'll hide the chat room with some Java script and will make it appear once we enter the room. And then, of course, we'll add some CSS. So this looks so much prettier. Okay, Dokey, we're going to stop right now. But if you want to catch up and see what I have been doing, it's right here in branch number three. You find the code for the index HTML, you can come here and copy and paste the CSS and and everything you need for the chat room itself is gonna be in this third branch right here. All right, let's take a break. Thank you for watching. And I will see you in the next video. But by 8. Chat Box and Styling with CSS: Hello And welcome back in this video, we're gonna put the final finishing touches on our chat room, will add some CSS at the text bar and just wrap up this section so that we can actually do some really fun stuff and can neck to servers later on in the next section. But anyway, let's finish the the check room itself. I want to create a new file cold styles dot CSS. Okay, this will have Oliver styling Oliver CSS, and this is not a course on CSS. So I'm not going to spend too much time explaining what is going on here, and I'm just gonna paste it in. Basically, all the CSS that you see in here is not very controversial. It's It's what you might expect in a beginners CSS course. So we're not gonna go over it. But it's this plane CSS nothing special, and you're pretty basic stuff right here. But if we save it and go back to the browser, we see no changes. That's because we need to, of course, add that style sheet to our HTML and this course I'm going to make some mistakes. But that's all apart of development making mistakes. Let's try that again. And Okay, that looks way way better. Okay, let's enter in and we're name right here. Okay? Cool. And so this is great. We have her bubbles. Everything is styled nicely. Very good. We're missing a couple of things here. One, we're missing the bottom bar and so that we could type messages and send them. That's, like, super important. We meet that on. And also, you may have noticed that the chat bubbles are there, even though we have not entered the chat room yet. So I want to be able to hide the bubbles, hide all of the messages until we enter eso Let's go ahead and do that. Okay, s So we're gonna go to our script dot Js file right here, and we're gonna do a couple of things. So first thing that we're going to do, we're gonna display the motile, and we're gonna disable that button, and we also want to immediately hide the chat room. So let's go ahead and do that. We're gonna target target the chat room with its i d check room, and we'll just call the hide method on it. Okay. Very good. And when we click on the inter room button, we're going to hide the user name Motile. But show the chat room. Okay, Pretty simple stuff, right? All right, let's test that out. We'll go back to the browser. Okay, That's great. So now we can't see any messages until we type in a name and enter the chat room, and there it is. All right, Now there's one more, like a little thing we have to do. We still have to add the footer. Let's do that right now. Cancel will go back to the index dot html file and then I'm gonna find the row. Find this Second row should be on lying 45. I'm gonna find where that ends. It ends right here. That's the closing one. And beside it, I'm gonna add another div with the class of roe. So we're gonna add it right there. And inside of that is gonna be another def with the class of fixed bottle with 12 Kahlo's and I'm also gonna call it chat text box. Just like that, it's gonna have an input element with the type of text. Uhm, I'm going to get rid of these attributes. We don't really need a placeholder or something like type your message. And then once again, auto complete will be off. Okay? And we could make this self closing. That's totally fine. I'm also going to use a thought awesome icon. Give it a class of fun. Awesome, Awesome. Aargh! Dash rate. And just for accessibility purposes. C area hidden is true. And I'm not gonna add any texted there. Let's save it. Go back, Refresh. Just type in whatever and okay, very nice. We have her text box in there and we've already applied the CSS. So that's why it's looking very nice and stylized. Now, there's one thing that bothers me about this. It's coming along nicely. But as soon as I entered the chat room, I'm going to see the 10 most recent messages. But I have to scroll down to see the most recent. So here is like the 10th in the ninth and the eighth and the seventh most recent messages at the bottom is the most recent message, Hugh. So from Tanya earlier today, it 10 in the morning. Now, this is all fine and dandy. But when I entered the chat room I wanted to automatically scroll to the bottom so that I could see the very most recent message. And this is trivial. This is not a big deal to do in Java script, and I'm gonna show you how to do it right now. So let's go to our script. Dutch. Yes. And on the inter room click event where we enter, click the inter room button. All right, we're gonna hide the motile, gonna show the chat room, and then we're gonna scroll to the bottom of the page. Let's right that Here, scroll to the bottom of the page. All right. Very simple to do. We're gonna call Window Scroll to and this is a uppercase t, by the way, Scroll to we're gonna give it an argument of zero. And then a second argument document, Body screw height. All right, so let's see that. But we're fresh. We'll put in whatever and look at that. It automatically scroll to the bottom of the page for us. Eso that we don't have to move around to see the most recent message. Okay? Who? We have done a lot of work in this section. Congratulations. You've made it through the next section is going to be very exciting. I'm not gonna tell you what we're gonna do, but it's huge. So take a break. Thank you for watching this video and come back to watch the following videos for the big surprise. And we're gonna connect to a server and get rid of this dummy data. All right, I've said too much. I'll see you next video, but buying 9. Connect to Server: Hello and welcome back to the course. Okay, This next section is really exciting because we're gonna connect to our server. In order to do that, we need to include some new script tax in our HTML document. So go to your browser and do a Google search for socket dot io cdn and also moment dot Js cdn. So socket io is the web socket technology we're using so that we can have real time communication between client and server. So we have a couple of options right here. I I recommend getting the slim option. Don't select the map, don't select the map, but choose the first option or the slim option Slim option is very small in size, so that's a very good choice. Tohave. Okay, we're gonna add that above our own script up Js we're gonna add scripts for here. The source. It's gonna be here. Okay. And let's do the same thing for moment. Now moment is a very nice library for parsing and formatting dates and times. Okay, so we're gonna click on the link for the moment Js cdn And you have a lot of different options. These air locales for different countries all around the world. But if you scroll all the way to the bottom, you will just find the general moment library. So it should just a moment and moment, men dot Js. So I recommend the last two you can get this one or the minimized version, which is smaller in size, will make the page load faster. So let's at that to our HTML document. Okay, That looks good. All right. Very nice. So we'll save those changes, and we're looking very good with that. Uh, I also want to remove all of this dummy data. So inside of her, ul, with the idea of messages, we're going to get rid of all of the ally elements. These were just dummy data that said that we could see the chat bubbles. But now we're gonna fill this up with messages from our server from the database than our server interacts with. Okay, so that looks good. We got rid of the dummy data, and my u l has an idea of messages, but my input element also needs an i d. So let's do that. And that way we can target it with some Jake weary eso I have in my notes right here. I'm calling it chat message, Then put. And of course, you can call this anything that you want to, but I'm calling it check message input for the I D. Okay, Very nice. So we'll save that will come back to the script dot Js file, and I'm gonna in stan. She ate a couple of other variables so far in it messages. We'll make that. No. And load up the initial messages in this variable in just a moment and then var socket, and we're gonna call the I o object right here and invoke it and safe. All right, let's just go to the browser, make sure everything is working as expected. Okay, that looks good. Okay, that looks good. A swell dummy. Data is gone, and I have opened my developer tools so you can come here. 23 dots, more tools and your developer tools. You can choose the consul, and I don't see any errors right here. So that is a very good thing. We don't have any errors and everything looks nice and good. Okay, Excellent. Now, let's go ahead and write a little bit of code to make sure that we have a good connection to the server. So back to the job script file. Okay, here is socket and at the bottom of the file. Okay, let's right. Our if it listener for initializing with the server. So when our user connects with our server, her server is going to admit an event back to our web page. And that event will be called Ignat messages. So the Web socket will listen to different events. And when it hears the minute messages event, it's gonna run a function. Okay. And that function will take an argument. Cold messages and messages will be the results from the database. So let's lock that out. Consul, don't log messages and let's see what we get in the console. So I'm gonna refresh, okay? And look at that. So this is an array of messages from our server. So if you see this, congratulations. You've successfully connected to the server. So this is an array. Okay. You can see the square brackets right here and inside of that array. It looks like we have objects. Okay, but the objects, they're not exactly objects, they're actually strings. So these have been objects. These air objects that have been string ified. So all of these objects, they have different properties. We have you for the user. We have tea for the time stamp. We have them for the message. So we just need a way to purse this string into an object. Well, Java script makes that very easy. So I'll show you how we do that. We're gonna do Jason that purse and we give it a string such as this one and Whoops. Of course, we have an error in their, um because it's expecting Jason. Well, this is Jason. Any weight? It's, uh see. Oops. I think I screwed something up in here, but we're going to do it in the text editor. It's gonna work much better in there. But the point is, we're gonna convert all of these strings into objects, and we will store them in this variable right here. Didn't it messages? So let's do that. To do that, we're gonna use a little bit of new E s six new Java script syntax called fat zero messages . So you admit messages will be messages and we're gonna map over every string, every string defied object, and we're going to call Jason Duck Parse on it, Jason dot purse. And the message is right here. Okay, That is looking very good. And after that, let's log into the console, innit? Messages? All right, we'll see that. We'll come back over here, you will refresh. And sure enough, we haven't array. And now they are objects. Okay. Before we had an array of strings. They look like objects, but they weren't objects. Now we have actual objects, and each object sets it in property for the message t for the time. And you for the user. So as soon as we connect to our application, we're going to get the 10 most recent messages stored on the database. Later on, when we build out the server, we can We can change this family. We can get the 20 most recent messages the 50 100 most all the messages, whatever you want to do. You Arkan in control as the developer. All right. Very nice. Let's stop right here in the next video. We're gonna take this data that we get from thesis er for and we're going to build our you I elements all of her attack bubbles So very exciting stuff. Let's stop here. Take a break and I will see you in the next video. But buying 10. Refactoring Client Side Code: Hello and welcome. Back in the last video, we connected to the server and we were able to fetch the most recent messages stored in the database. We're gonna do some re factoring some organization in our javascript files. One thing that I noticed that is kind of annoying me is that in order to enter the chat room, write my name and I have to click the button. Now, a lot of Web APS I can expect to type my name and press the enter button on my keyboard, but that's not happening right now. So I wanted to take this chance to to make the button, but also pressing the enter button on my keyboard to do the same thing, which is inter the chat room. So let's go ahead and take care of that right now. And we'll also do a little bit of of cleaning up and and wrap up this section of building out the messages. Okay, s So we're gonna go back to the text editor. Okay, this is very nice. And so you see right here the click event handler for the inter row button. All right. You see this function right here we're gonna get that whole function, everything inside of it, okay? And I'm gonna cut it out, all right? And we're gonna paste it up here at the top. Okay, It could be inside or outside that document. Ready? I'm gonna put it outside, and I'm gonna call this function. I'm gonna call it Enter chat room, Okay. Just like that, And it's gonna do the same thing. It's gonna hide the motile, show the chat room and automatically scroll to the bottom of the page. So going back to inter room button now, I'll just put the name of the function troops enter the chat room. There we go. Now, this is a function, but you don't want to invoke it, okay? You just want to You just want to put the name of the function, and that's all that you have to do. And it will work exactly the same way. Now, let's make it so that the enter button would make it work as well. So we're gonna target the input element for the user name Odle. So that's idee user name motile and put. And we're gonna have an event listener for the key up event we're gonna give it a function which takes an event object for an argument. All right, very good. And we're gonna do a little check if the event key code and see is capitalized right here. If the event code is 13 and if we have a user name, So in other words, if the user name is not know, then we can enter the chat room, and here we will invoke the function. So key code for the enter button, like whenever I pressed Enter The key code is the number 13. So if we type enter into the text box and we have a valid user name, then we can enter the chat room. So let's test this out. We'll go to the browser. Very good. That looks good to me. And here we are. I'm pressing. Enter. Nothing's happening. I'm gonna press enter after typing my name. And fantastic looks like it's working, So let's go ahead. And now that we have our data from our server, it's right here. Let's actually go ahead and build out all of the chat bubbles that we will need and just get that out of the way. Okay. Awesome. Let me come up and chew. Let me just check my notes right here. Always a good idea to check your notes. All right. Fantastic. So when this runs when socket dot uh, admit messages runs, we're going to get all of the initial messages from the server and store them in. Minute message is great. When we entered the chat room, we are going to build these messages. So we're in high the user name, uh, easily motile. We're gonna show the chat room, and then we're gonna build, build the chat bulls, and the very last step will be scrolling to the bottom of the page. But first, let's build the chat bubbles. So and that message is is now an array of objects, So we're gonna loop through the array and builder chapels. So admit messages four. And we're gonna give it a function. Let's do a fat aero function. Let's learn some new modern Java script. Okay, So, essentially, we're just looping over the array and the message that were first toe One object that that that we're have loop through. So remember that these messages there objects in the user name has a property. You Well Let's check if that chat bubble that belongs to us. So we're gonna check if the variable my user name is equal to the U property in the message object right here. So if message don't you is equal to my user name, then we're going to run a function called Build my chat bubble, and we're gonna give it the message. Otherwise it must belong to another user. And we will run a function called Build their chat Bo. And we will also pass that message to that function. Now, these functions don't exist yet, so I'm gonna write one of them for you and then on. Then I'm gonna pace the other one since it's nearly identical on. And that will be the conclusion for this section. So let's hurry up and bank out these couple of functions right here. So let's build out the my check bubble function. So function build my channel bubble. Okay, right here. And it's gonna take a message argument. Okay, very good. And we're gonna create a string called Bubble, and it's going to start off with an empty ally and with a diff with the class of chat dash , bubble, dash my ash user, which he might recall from the dummy data. Okay, so we're gonna start off for string like this, Then we're gonna add on to it, and I'm gonna use some back ticks so that I can inject some JavaScript variables in this strength. This is a new ES six feature, so it's not the regular quotes, but it is the back ticks that looked like this. And so I'm gonna make a span, and I'm gonna add a little space right there and the small element and watch this. I'm gonna do dollar sign curly brackets. And now I can put in a JavaScript variable or expression, which is pretty darn cool. So if you recall the t property is a time stamp, this is milliseconds. And we can take the milliseconds and determine the month day year in time these milliseconds represent. And you might remember that we included the moment dot Js library and our file. It's a moment is gonna help us format this this time for us, which is very nice. So we're gonna call moment, we're gonna invoke it, and we're going to give it the time. So message is an object so message dot t Okay, here we go. And then I'm gonna format it, invoke that function, and I'm going to give it a strength N m for month d d for day. Why y for year I'm gonna put in brackets to escape and h h for the hour. Have them for the minutes and then a to display AM or PM. So after all of that I'm gonna do is a little space and and in the small right here, I'm going to do another space and another variable so message dot you So this would be the user name a message start. You would be the use earning off the person who sent through the message, okay. And a couple of a few other things right here to do so we're gonna add another space right here. And let me let me actually just added lots of space so you can see it more easily. So after the message, we're gonna add in an eye element with the class. Okay? It's gonna be f a f a dash circle. Okay. We're gonna do another area area dash hidden equals true. And then that's gonna do it. So We're gonna close the tag, closed the attack, close the span from earlier. And we're gonna add in this to be our elements for for lines faces. So this is a very long line. I apologize for that. Sometimes. You gotta do that, though, Okay? We're gonna add more to this. So right here, I have more to it. We're almost done, though. And we're gonna put in some more back ticks with a P element, so message dot him So the in property is the actual message. Okay? And that is pretty much it. We're gonna close the p close that div were closed the l i element right there and then we're going to create a function called ad chant bubble two page, and we're gonna put in the bubble string. Let's write that function very quickly. So function and tak bubble to page. It's gonna take a bubble, which is this one very long string. And our you well has an idea of messages, and we are going to append that string to the end of the list. Awesome. So we have this function built my chat bubble build. Their checked bubble is almost identical, so I'm just gonna woops I didn't mean to do that. Actually, let me just copy and paste it very quickly. I'm just gonna pause the video very quickly, and then I'll come back, okay? And I'm back, all right. And there it is. It's essentially the same thing, but the order of the elements in here is a little different. Because remember my chat bubble in the chat bubbles from the other people, they're aligned differently. They have different classes. The information is displayed in a different order. So on and so forth. But for each one, my champ bubble and there, Jack Bubble. Once we construct the string, we will invoke the at Bubble to page and it will get at it to the page. So the moment of truth, Let's save it. Let's come to the page. We will refresh. Let's enter a name and voila. We have the chat bubbles and these air, not dummy data. This is not dummy data. This is really data from our server. So pretty freaking cool stuff right there. Okay. We did a ton of things. We changed way changed the organization around. We added the theme. The key up event handler for the user name Odle and rewrote the functions that actually constructed thes bubbles dynamically. All right, we'll stop here. And in the next video, we will actually communicate with the server so that we can send messages. All right, let's take a break. 11. Send and Receive Messages: and welcome back in the last video, we connected to the server and built out a couple of functions so we can dynamically display and build bubbles with data from our database and that this is not dummy data. We just built some functions and all of the bubbles were dynamically or programmatically generated for us. Pretty darn cool things. The final touch for the first part of the course is, of course, sending messages to the server so that we can broadcast it to the other users and, of course, receiving messages from other users. So we're nearly done. Let's just go into the text, Senator. First thing is that in the HTML document around Line 53 Thebe button for our for our text box. So this guy right here, let's give it an I. D. We're going to give it an I d of let's say, send message button or whatever you'd like. Okay, Perfect. I'm going to say that will come back in the script over here, and we are going to write an event handler for that button that we have just created. And just to make this a little bit easier to see. Hey, we'll give you some slight space right there. Perfect at a comments and messages. Two server que creek. So we're gonna target that button. So underscore, Send message button on click. And when we click it, we're gonna run this function, right? And the payload that we're gonna send to the server thanks to the door payload, it's gonna be an object. And that object is gonna ask several properties. So the first property is the U property, which will be equal to our user name. The next will be the time. So if we call date don't. Now we can get the current time in milliseconds, and that's a convenient way to store time on a database. And then finally, the message. So we're gonna grab that from the text box, So chat message input, and we're gonna grab the value from it. Okay? Don't. Great. Now we're going to send this to the server, but the server will Onley broadcast our messages to the other users. So we're going to first at this message to the dom to our list of messages and then we'll send it off to the server. Okay, so let's do that First. We will call that function again, Build my chat bubble, and we're gonna give it the payload. And, of course, we're gonna have to scroll to the bottom of the page again. So let's do that window. I don't scroll to zero. Document the body. That scroll height came very nice. And it would be a good idea after we send a message to clear out the input so that we don't have to delete it. So let's go ahead and do that will target it. It would be the chance message input. The value will be an empty string now. Okay, great. And now we can emit an event to the server. So socket dot in it, we have to call it, send a message, and we will give it our payload object. Fantastic said now we can send messages to the server and other people can receive them. Now, let's write, they function that will be able to display messages that other people broadcast to us. So we're gonna need another socket event handler through socket dot on. Okay. All right. And the event we're listening for is called new message. Your new message. It's gonna take a function and this message. Well, look like that, Okay? And we're gonna call the build their chat bubble. We have to parse it because it is a string If I object. And then once we appended to the dog once again, we're going to scroll down so that we can see it very easily. All right? I'll just copy and paste this stuff right here. All right? She is. Okay. This is the moment of truth. I'm gonna take this guy, okay? And I'll open up another window. We will go to a local host. 3000. I'm gonna refresh over here, too, So All right, Steven. And how about Tommy Again? Very cool. Let me just bring this over a little bit. And Tanya, Okay? She sees Stevens message. Okay. What about Chinese food? Cool. Um, I like Chinese food. Border. Maybe some noodles. Right. And they click the send button and OK, it looks like it's working. It appeared right here, so it was able to append it to the dom. And it also appeared in Stephen's window, which means the server was able to receive and display messages and were able to send messages to the server. Also Okay, job Well done. The first part of this course is over. So if you're a beginner, congratulations. You know how to work with the Web server using socket io, and you can build your own chat room. Now, if you're interested and you want to learn how to build that server, the next part of the course is for you. We're going to delete all the files and just build it from scratch. But amazingly, it is very simple to do, and it doesn't require very many lines of code. So nice job. Thank you for watching the first part take a break. And in the next video, we'll start the second part of the course building a server for our chat room using JavaScript nog s readiness and more. Thank you. See you in the next video. But by 12. Introduction to Advanced Section: Hello and welcome back. We have finished the first part. Of course. We built the front end to our chat room application using HTML, CSS and JavaScript. With some Jake weary in this part, we're going to build the server. So the server was included in the starter files. But if you're an advanced student work, you're interested in back in development that I encourage you to take this optional second part of the course. But if you're a beginner and you are afraid or intimidated not to worry, you can come back to it later and watch it another time when you feel ready. Okay. So, uh, first of all, let's go into the text editor and we did a lot of work in the public folder. So the html, the styles and the script, but we're gonna close those because we're gonna mainly recreate files this file and this file. Okay, so I'm just gonna close them, actually gonna delete them. So I'm gonna delete red. It's goodbye and I'm going to delete index dot Yes. Okay. Bye. And if you go to your terminal, uh, and if you do rs to restart, it's gonna throw an error okay? It's telling you we can't find your files. Well, we just deleted them. Okay, so go ahead. Delete your red is file in the lib folder and delete index dot Js Now, Normally, when you're about to start a new project, you have to run. You have to run NPM install or you have to run yard. Now, we have already done that, and we have installed our our dependencies. But open your package, stop Jason, and let's take a look at the dependencies. We don't have many. Express is our Web framework. It sits on top of node, and it makes writing servers way easier. Read. This is a database. It's not a database like sequel or mongo DB, but it's really good for storing objects especially, you know, key value payers. So objects and arrays on. And it's perfect for a chat application because red, this is super fast. It's very fast at reading and writing records on before a chat application. We don't need to store a lot of data. Ah, socket Io, This is familiar to you. We used it on the client. We're also going to use it on the server and then we're gonna use Blue Bird, which is a library for promises and the the RadiSys library here. It it by default, uses asynchronous callback functions but were able to use promises instead if we incorporate the bluebird, um um, module right here. Now, you don't have to install these because we have already installed them and their in their node modules folder right here. But let's stop right here. And in the next video will start up our server and we'll go from there. Okay, I will see you in the next video, but by 13. Server Setup: Hello and welcome back to the second part of the course. We're gonna build our Web server now. So in the project directory, let's create a new final. Make sure you're in the root directory will call this index dot Js and we're going to require in some modules just to get started. So let's get in express. Let's get in the path module. We didn't have to install this one because it comes native with no Js. We also want the http module. It's also native to node Js and let's get in socket api Oh, we'll call it socket. Require socket dot io. Okay. And using expresses very easy. And we're gonna create variable called app and we will in Stan, she ate the express object. We will also create a server. We will call http three server. We will pass in our application into their Wonderful. Now we're gonna tell our Web server to serve up static assets and our public folder. Okay, so it needs toe respond with the html file, the script Js and so forth. So we're gonna see, have not use express dot Static. Yeah dot Join Quite a lot of things underscore underscore de ir name, directory, name, comma and public. So path dot join will create a string, which is an absolute path to our public directory. We're telling express that our static directory for static assets will be in this public folder and we're telling expressed to use that to serve static assets. So that looks like a crazy line. But that's what's happening. And now we're going to make a round handler. So no matter what route for what you are, well, our users go to it's going to respond with the same index dot html file. So let's put in a row function with some arguments request in response, and we're gonna respond by sending a file, and the F is capitalized right here. Bernie is packed up resolve, and we're gonna look in the current directory in the public folder and we're gonna serve up index dot html. So no matter what route you go to in our host and origin, you're always going to receive the index dot html file, which is pretty cool. Okay, let's create and I o object. Constancio shock it. Don't listen. Let's give a listen to our server, and now we will tell our server to listen on Port 3000 simcon support. First, let's check the environment if it has a port and then 3000 like this. Hey, Huber, listen, Port. We're gonna give it a callback function, and if it's successful, we will log to the console express server running on port, and then it will display the port right there. Okay, very good. So we come back to the terminal. Thank and see here. If we run the are start. Okay. Are express servers running? Let's refresh. Okay, that looks good. All right. Great. Now we're not connected to read us right now, so we don't see any messages, and the chat won't work. But we have a web server that's able to serve up static assets like HTML CSS and JavaScript file. Okay, Now, in the next video, we're going to connect to our reddest David base hook up socket io, and then we'll be nearly done with the database. It will be a lot less work than the front end, I guarantee. But let's take a break. Thank you for watching. And I will see you in the next video, but buying 14. Redis and SocketIO: Hello and welcome back to the course. In the last video, we set up our web server so that it can deliver static assets. And this video we're going to connect to the reddest database and and also on a set up socket io so that we can wrap up the project. Okay, now, some of you might be experiencing a little bit of lag. For example, when you load up Well, this may not happen now, but essentially, some of you might encounter seeing the messages before entering the chat room. Um, so in order to prevent that, I recommend doing this. Take your chat room. That hide method in our public script up Js Take that. And just to ensure that no messages appear before we enter the room, just place that outside of the document ready function Look. Okay, it may happen to some of you and Internet speeds Could affect what loads first, but to ensure it doesn't happen. Just move it to the outside and you should be good to go. Okay, great. So inside of her lib directory. Let's go ahead and create a new file. Will call it. Read it stopped. Yes. Okay, and let's just not this out. We're gonna require in brothers and the blue board Bluebird libraries promise we're gonna call it that. But the name is Bluebird, and we're going to basically promise fi we're gonna make all of the methods and readiness that we plan to use. We're gonna make all of them use promises instead of Colback functions. So promise not promise by all. Hopefully I didn't misspell that promise. If I all looks good RadiSys read ISS client with the capital, our capital C pro to type. All right. And this looks a little funky, but don't worry about it. I got this directly from the documentation. Eso just follow along and you'll be OK, so promise if I all read if multi proto type, okay, looks good to me. And let's create the variable. We'll call it, read his client, and this variable will actually be a function will make it a fat arrow function. Okay, there it is in this function is going to return a promise to us to return new promise and a promise takes a callback function with a resolve or a reject argument. Well, with both of them, actually, and So we're gonna create a variable called connector and that will be equal to readiness. Create client. We're gonna invoke it and then give it an object. And the u R L is available right here. Process dot e n v dot Readiness underscored You are I Now, where is this coming from? Where is Red issue? Are I actually coming from? Well, it is coming from this file in here, OK dot e N v r c Now, I included this file in the starter pack, but normally you would not include this file in get Hub. In fact, normally you would go into your get ignore file and the type don't get ignore and air. Sorry. You would type in duck. Ignore you were talking in the RC so that you don't commit this file to get hub. Normally, you keep all of your secret passwords and keys and database credentials and this file so that it can remain secret. Now. Now, the problem is, I'm kind of doing something risky. And just to make it easier for you, I am just sharing my reddest database. So, please, this is my personal database. Don't abuse it. And if you'd rather have your own database. You can create your own reddest database anywhere and just replaced the your well right here. But for this tutorial, you can you can just use mine. And that would be okay, but red issue are I or rather process dot gratis or sorry, Processed. I envy red. It's your eye. It's coming from this file. Now, in order for that to work, you have to stop your server. You have to do source e N v r c. And so now all of those environment variables are going to be available and your script so process dot e N V. That means environment, envy, environment. And this is an environment variable. Okay, so enough about that in the real world, though, don't store your sensitive information and put it on, get up. Taking a risk. But I think most of you are honest people, so please don't abuse it. We're gonna write a couple of methods here, connector on, and we're going to give it the connect event. So if we connect to the reddest database awesome, let's lock that to the console, successfully connect it to read this and we will resolve the connector. But if we get an error, we should account for that as well. So connector on error. Let's give it a callback function. Let's do another log here. Failed to connect. Horrendous. And let's do a reject right here. Well, actually, we can just put this message inside of her reject. And I think, man, that would be totally fine. Okay, Cool. Perfect. So we have this function that will connect us to the database, and we're gonna import this function in our main server file. So in order to import it, we have to export it. So module, the exports equals reddest client. And now we can import that file into our main server. So let's go ahead. And is that right now? Right here. We will bring it in constant readiness client, and we will require dot, slash live readiness. Okay. And below blow this life, we're going to call the reddest client and invoke it. Remember, this is a function after all. We're gonna invoke it. And if everything is good, it will resolve. That means we can use a doctor then, so dot then connector. Actually, let's put this on another line. Hey, Thank you. And we're gonna just set up our, uh, our Iot. So I o dot on connection, we'll get the aero function, we'll come back to later. And in the event that there is an error, we're going to reject it. And in that case, we need to catch it and should always handle possible exceptions or errors in your coat. In that case, we'll just lock it out. We'll just walk out the error right here. Okay. Cool. All right. Great. We did a lot of work in here. We're almost done with the server in the next video. Well, that's gonna be our last video. We're gonna basically get the 10 most recent messages from the reddest database and send it to the client as soon as they connect. And we'll also handling broadcasting messages to other users. All right, so let's save. Let's make sure nothing has gone wrong and okay, great. We have successfully connected to rest. Let's stop here, and I will see you in the next video. Thanks for watching 15. Fetch and Add Messages to Redis: All right. Welcome back. You've come a long way, and we're almost done. Thanks for hanging in there. Okay, We're gonna put the final touches on her server, and now our chat room will be complete. So first thing that we're gonna do this bit of code right here. This will detect if a client, in other words, if a browser window has connected to our server and when it does, it will do something. So is soon as somebody enters our chat room, as soon as someone goes to our server or visits or Page, we want to send the 10 most recent messages to the user so we can do that right here inside of the connection event. All right, let's do it. I'm going to give it a little bit of space, a little bit of breathing room right here. And inside that connection event, we're gonna call the connector, and we're gonna call l Range a sink. And inside of her reddest database, we have a list, an array called messages, and I want to get the last 10 messages, so I'm gonna tell it. Negative. 10. Negative one. That basically means give me the last 10 messages in my database. If that is successful, we will call dot Then on it in messages will be our results. So we'll put that in effect era function. And then we will socket dot in it an event called innit messages, and we'll pass in the messages. Now, this event should seem familiar to you because it iss if you go back to public script up Js and you go right here, socket on. So on our server, we are emitting the in this messages event and on her client, we're listening to the innit messages event. So also, only client we are emitting events. So when we're sending a message, we are emitting a send message event to the server. So let's listen for that on the server. So we're gonna right? Uh, Bruce, I'm going to do that. And here, so inside in a safe socket dot on send message. And again, that's is coming from our send message event right here. Okay, we're gonna expect a message from the client. An object with those three properties, So we're gonna call the connector. We're in a coal are push a sink, were added to the messages J. Zonda string gift by the string. If I the messages before we store them. That's how red this works. All right, we're gonna give it the message. Okay, That looks good. That looks good to me. Then we're in a cold, then on it, and we should get a response. The response is not so important from the database, but we're gonna sock it, Don't broadcast, don't admit. And so socket dot broadcast Admit will send the message to all of the users except for the sender. So, for example, when I send a message, here it is. When I send a message, I'm adding it my chat bubble first, and then I'm admitting it to the server through the server. Onley has two broad cap that broadcast that message to other people in the chat room, but not to me. So that's why I'm using song socket broadcast. Don't give it so in there. I'm gonna give it new message, and I'm gonna give it Jason string. If I message just like that, Okay, Great. And if we go back to the script, there it is. We listen to the message of the server, admits the message, so Let's go back here. Looks like new errors. Let's go to the page. Local host. We will refresh. Stephen. Hey, Looks good. Okay? And let's do another one really quickly. Another browser window just to make sure this is all working. Look who's 3000. Well, say Tommy, uh, and it will send a message. Hey, guys, and it looks like it is working fantastic. Congratulations. You've come a long way. We have built an application from start to finish, all from scratch, with a little bit of boilerplate, Justo speed up development. But there's nothing wrong with that. Okay, in the next video, we'll wrap up the project and I'll give you some ideas so that you can improve this project . It's a pretty good chat room, but there's lots of extra features you can add yourself, so stay tuned and thank you for watching. I'll see you in the next video, but by 16. Project Ideas!: Hello and welcome to the final video of this course in the first part and for beginners and new coders. We created the front end of our chat room application and in the second part aimed for advanced students. We built the server from scratch, and now we have a complete project, working as expected, Very good jump guys. Now, this project isn't over, and I encourage you to keep improving upon its and add new features. For example, if you're a beginner student, well, there's many additions and improvements that you could make. For example, my chat bubble is always blue, but the other people's chatterboxes, they're always green. So here we have Gina. We have Kathy. We have Tanya, but they're all green bubbles. Can you give everybody a different color to make it easier to distinguish the different people in the room? That's one idea for improvement. Use different colors for the other participants. Many chat rooms play sound effects like when you send a message, and when you receive a message, sometimes it's a or a boob or so sound like that. So if you want, try incorporating sound effects for sending and receiving messages. One thing that you could do easily to improve the functionality, even if you're a beginner is right here. If I want to send a message, I have toe klik into the text box type. My message. Pizza and way didn't add that key up event handler for this, so it would be nice to press enter instead of clicking over here to send my message. It would be nice that I can this type press enter, and then it would send the message again. Kind of like like how a chat room normally behaves. So those are some ideas for beginners. If you're more advanced, well, there's a lot that you could do. For example, it would be a good idea to enforce unique names. So, for example, if I enter in Stephen as my user name, well, anybody else can come in and type and Stephen and enter. There's no unique user names. There's no passports or anything like that. You just type in the name and you know what? Somebody has the same name then. Too bad. Well, if you want a good coating challenge, enforce unique user names. Um, also, I think it would be very cool if you had a list of the active users on the left or on the right of the chat room. So many 10 applications. He have the room. But you also have a list of the users over here, and when a new user joints, you can add them to the list. And when a user goes away, you can remove them from the list. Uh, now who? Perhaps when a user leaves, you can display a new message like Tanya has left the room or something like that. That's another possible idea. And perhaps you can fetch mawr messages and display the entire history. Lots of ideas that you could do. And there's many popular chat rooms and applications available. So just look at your favorite one and try to imitate the features and those applications and incorporated in here. Okay, there's lots of great ideas to expand upon. This. I can't wait to see your improvements upon are already pretty awesome chat room. And if you have any questions about anything in this course, please reach out to me. You can always ask a question on the skills share platform, or you can find me at the best Js dot com If you want a one on one personal lesson And, of course, you know Twitter is another good option to you confined to me at SL hip hop. And, uh, yeah, I hope to hear from you. Thank you so much for watching this course. Aren't really enjoyed teaching it. And I can't wait to see you in my next course on skill share. Thank you and happy Cody, but by