Socket.IO and TypeScript | Sean Bradley | Skillshare

Playback Speed

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

Socket.IO and TypeScript

teacher avatar Sean Bradley, Course Instructor

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

41 Lessons (3h 34m)
    • 1. TypeScript SocketIO Introduction

    • 2. Setup Development Environment

    • 3. Install TypeScript

    • 4. Build Your First TypeScript File

    • 5. Type Annotations

    • 6. Interfaces

    • 7. Classes

    • 8. Run it in the Browser

    • 9. Create the SocketIO Project

    • 10. Install Dependencies and Types

    • 11. Compile, Run and Setup tsconfig.json

    • 12. TSC Watch, Nodemon and Concurrently

    • 13. Create the SocketIO Client

    • 14. Use TypeScript to Generate Client JavaScript

    • 15. Server Connection and Disconnect Events

    • 16. Server Socket Emit

    • 17. Server Socket Broadcast

    • 18. Server IO Emit

    • 19. Server Emit to Specific Socket

    • 20. Client Connect and Disconnect Events

    • 21. Client Emit

    • 22. Build an Example Mini Game

    • 23. Install Bootstrap

    • 24. Setup Initial HTML Layout

    • 25. Add Custom CSS

    • 26. Add Chat Functionality

    • 27. Add Screen Name Functionality

    • 28. Create a Player Object with a Score Property

    • 29. Build the Basic Game Engine

    • 30. Push Game Events to Chat

    • 31. Generate Result in the Game Engine

    • 32. Add Guessing Buttons

    • 33. Add Winnings Functionality

    • 34. Deploying to Production

    • 35. Create the Start Script

    • 36. Provision a Cloud Server for Production

    • 37. Deploy Files to the Server

    • 38. Start the Games on the server

    • 39. Install Nginx Proxy

    • 40. Point a Domain Name

    • 41. Add SSL

  • --
  • 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.





About This Class

Learn Socket.IO and TypeScript to Create Multiplayer Realtime Interactive Content for the Web.

In this course you will learn about how to use Socket.IO and TypeScript in order to create multiplayer real-time interactive content that runs in the browser and on the web.

At the start of the course, we will do a TypeScript mini course, suitable for those with no experience at all of using TypeScript. It will cover the most common and major concepts of TypeScript that are applicable to all TypeScript projects and will be used throughout the remainder of this course.

Then, we will move onto learning about Socket.IO, and covering the major features that are also applicable to all Socket.IO projects, and will also be demonstrated throughout the remainder of this course.

Then we will apply all of the Typescript and Socket.IO concepts we've learned so far, to create our selves a complete working multiplayer, real-time game example with several game configurations running concurrently, with client and server components and hosted using NodeJS.

We will also deploy the finished project to a cloud server, run it behind an Nginx proxy, point a domain name and install an SSLĀ certificate.

When creating the main course project you will also get exposure to Bootstrap, jQuery, HTML and CSS animations.

You don't need any experience to take this course, since all the code is provided in the accompanying documentation that will be presented to you in a gradual format as each lesson progresses to the next.

Before taking this course, note that executing code snippets, copied from the supplied documentation is a major part of this course. The examples provided in the course were 100% created by me and were explicitly created for use in this course. You are invited to experiment with each new code addition after each lesson, by changing parameters and deleting or extending sections, in order to understand more about what each new addition of the project is doing.

So if you know that you like coding, you like seeing it work for yourself, you like to experiment, and have millions of ideas that you want to achieve, then this course is for you. Because at the end of the course, you would have built a generic working prototype that demonstrates many of the concepts involved in creating multiplayer real-time interactive content that runs in the browser and on the web.

Thanks for taking part in my course, and I will see you there.

Meet Your Teacher

Teacher Profile Image

Sean Bradley

Course Instructor


Hello, I'm Sean.

For over 20 years I have been an IT professional developing and managing real time, low latency, high availability, asynchronous, multi threaded, remotely managed, fully automated, monitored solutions in the education, aeronautical, banking, drone, gaming and telecommunications industries.

I have also created and written hundreds of Open Source GitHub Repositories, Medium Articles and YouTube video tutorials.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
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.


1. TypeScript SocketIO Introduction: welcome to my course on typescript and soccer. In this course, you will learn how use typescript and suckered Io in order to create multi player, real time interactive content runs in the browser and on the Web. At the start of the course, we'll do a typescript, many course suitable for those with no experience, a love using typescript. It will cover the most common and major concepts of typescript that are applicable to all typescript projects and will be used throughout the remainder of discourse. Then we will move on to learning about socket io and covering the major features that are also applicable to all. Socket Io projects will also be demonstrated throughout the remainder, of course. Then we will apply aloe typescript soccer toy concepts of so far to create ourselves a complete working, multiplayer, real time game example with several game configurations running concurrently with client and server components, and hosted using Jay's when creating the main course project. You will also get exposure to bootstrap, Jake Weary HTML and CSS animations. You don't need any experience to take its course, since all the code is provided in the accompanying documentation there will be presented to you in a gradual format as h less and progresses to the next. So if you know that you like coding, you'd like singing work for yourself. You like to experiment and have millions of ideas that you want to achieve in this course is for you. Because of the end of the course, you would have built a generic working prototype that demonstrates many of the concepts involved in creating multiplayer real time interactive content. Runs in the browse and on the web. Thanks for taking part of my course. No, see there. 2. Setup Development Environment: first thing we're gonna do is set up in our development environment. I'm going to share some oy environment set up so that you can do that. Okay, so on a visual studio code got the page open AM and download and run that, Except put a desktop icon slicked allies Install, Finish. OK, now the next one is Get windows. There we go. Get for Windows download, and we will run that. Okay, so let's just run anyway. Yes. Next. Next. I want to get bash. No, it's headed to the desktop as well. Next. Next Believe that is a day folk. It's up to you to get from the command line, Lee. That is default use. The openness is so yous shake out windows next, use men tedious. Enable four system Yes, in store. No, it's launched. Git! Bash! War on it! And then we go ls very good. That works the next one known Js Okay. LTs windows installer. 64 bit Run next. Except next Next day Felt so good. Next in store finish. Okay, so there we go. Very good. It's now time to continue 3. Install TypeScript: So now we have a development environment. Let's create ourselves a working folder and install typescript. So open Explorer, I'm gonna create myself a new folder here somewhere. New folder, McCourty iss sock tutorial. And I'm gonna open that with card. Very big. Maximize that we don't need to. Welcome. Okay, so I'm gonna open a terminal now a new terminal and its windows pay our show. Since when stored get bash. I'm going to changed my day. Faux show tears get bash up him in case have been that one. And now starting in new terminal. Okay, so let's get Boesch now. Let's see whether we have typescript installed and we shouldn't. There we go. There's no typescript compilers, so we don't have top script. We should also check if we have NPM, which we do is we just started. I got version 6 12 1 in case let's installed twice script now using in PM J top script in tow. Okay. And now we can check again using too. You see life in of a and we have typescript version 3.7 points free. That's excellent. We can now continue 4. Build Your First TypeScript File: Okay, so let's continue. Let's create first typescript far. Now, this little section here is a typescript Money course. If you only know typescript. You may want to just bypass this small section and go straight into creating the saga Royo project. Otherwise, let's get on with this. So we're 40 credit ourselves a working folder, and in that I'm gonna a job script file called Food or genius. So I'm just gonna copy this script here, going to my visual studio code and credit you file called food dot Js and displaced at there. And that's just a basic job. Script form doesn't do a lot, creates a variable court bears and has ABC in it inimical function called food, which returns a string. Hello, I may say, and then just prints it to the console so we can just run that directly. Ni Js Lord food R J s never got Prince. Hello. ABC this fall will also run in the browser so that any changes So it is typescript. Common top script has a different extension and that is tedious. Top script is very useful when writing cut because it helps us to make a cut more robust and more precise by introducing type safety. So when we cried out variables, down methods and our classes and interfaces, Weaken described which data types all the arguments, all the perimeters are and you don't get that in jobs with by default. So it's quite easy to make mistakes when writing your job scripts. That typescript helps us to make our code much more precise and robust. So but we will do is we write our code using typescript, and then we'll use a thing called Tear C, which is a typescript Kampala toe output Java script to various different forms dependent on the environment that we want to run it in. For example, we can ask TSC to output a history compatible job scripts because we want to run their in the browser Well, we can ask it to Output A s 2000 and 19 job scripts because we want to run that No, J. Ayer's Now TSC will output airs three by default, and he is three will also work in Nigeria's. Okay, so let's try at t A. C. First thing we'll do is we'll rename this file here to through Doctor. Yes, Okay, so It's not typescript file. It's still Java script. It's identical, actually, to the other. JavaScript and TSC will also compile JavaScript to JavaScript. Typescript is an extension of job script, so we get a whole lot of extras. So let's compile this now. Using the typescript. Compile on that is TSC food dot tedious and here is credited new jobs, but far for its called food or Js. Now it's almost identical, except has lived a white space removed. But that is a S three compatible JavaScript. It's just pure basic job script. We didn't use any compiler options when we called ts si so it's just straightaway. Stay foam es three now just one thing to note here, but the idea is showing up that we have a problem with food or two years for hover over there. Says cannot really clear block scope, variable best. What's actually happening here is because it's because I got food on J s open the other window. It thinks that Bess was declared twice so you could just close the other window later on in the course will create a much more structured project, and our jobs for profiles will be output to a specific distribution folder outside of the typescript project so that era wine actually show up in type trips. But just at the moment, just be aware that that is not a problem. It is good that fall opened also with the idea. Innocents. Same folder Now. Another thing that might look strange to you is the naming of these variables. Where says food as bar, they called medicine Tactic variables. And if we scroll down here, there's some more information about medicine tactic variables here. What they are is it is good names to use for variables. If you don't have anything else you want to use so often, you'll see these terms in code examples and other examples that you'll see throughout this many course our food bar food barf as Cox Cox because cords growth, Dobley, Waldo, Fred and a few more that I'm anything. Did this good views heard examples. If you want to read more about medicine tactic variables, I've got a link to Wikipedia here for you. Okay, so excellent. That's at first typescript file. Next video will look at type annotations 5. Type Annotations: audio. Let's look at type annotations. You know what is that is a clue here. These three little dots under the word bar says perimeter bar implicitly has any time but a better type may be inferred from usage. Top safety is about being explicit, not implicit. We don't really want to guess what data types things are, but because of city to make mistakes. So what we can do is we can say you can call the food function, but only if you passing a string. Never, guys. So if anybody is gonna call the food function, they must pass in a strength so well, as is a string already east. That's okay. Let's try changing best to a number. That case already, it's now telling me that we have a problem because expects a string, not a number. We could say OK, so we could make that a number if we look and Nets was so good again. The same goes, say we could passing in a rave numbers 123 It says, Well, bass is now an array of numbers. We have a problem. An array of numbers is not compatible with just number. But if we wanted to have an array of numbers. We could do that like so and another thing that this type safety is good for. Is that what we're saying? You must pass in a value if you're gonna call food, But let's say we just we didn't want a passing of value and we just wanted to call for food like that. Well, straight away tells us no food needs of perimeter. If we wanted to call food like that with and without reminisce with, we could also make it optional by putting a question mark after the perimeter name like that. So that's now option. Also acknowledge call food without premises. A. With. And another thing that we can also do with top imitations is if I just comfort this back to a string and my respect I bay see and removed. The 1st 1 there is that we can use a union so I could say the value must be a car poor bus , for example. So here it says, argument of type string is not a suitable to primary type car or bus. So now I can actually pass in like this car, and that will be OK old bus, but not plain. We could also say car or bus or number like that so we could say passing a one and that would be okay. Well, it's a passing car. Now be, Iike I that as we saw, Plane doesn't work on the first that toe one. Bess. Well, we could just simply just talked a word any and everything would be valid even if I just sent. No. But since we're using type scripts and we have the option of top safety, we should be explicit in war. Everything should bay. Let's just put that back to bed as and will make that maybe see and natch be explicit as a string and using times, say, if you like, that helps us to make our coat more robust, more precise. Okay, so in the next video, we'll look at interfaces 6. Interfaces: into faces and types. Okay, so we saw on these annotations here we can have many primitive times, like string or number or Boolean Tour Boyd or undefined. But we can also have custom times that we create, such as que you wakes. This is a medicine tactic. Variable name that qu excess and being credited, It'll deformed. We can use need to face to do that. So that's great. One in an if ice QX has two properties, accused said, which is a string end i cordage, which is a number. Okay, so we could now past I qx into our food function, and we could see down here that the argument of type string is not a soluble to perimeter of top QX. So let's make bad as a Q X. We'll get rid of that. We can create an object that will be compatible with QX there, sir Credit object. So Q. You you said ABC CEO are key 123 There we go and there's no problem now, as is compatible with the QX there. Let's try that out now, so TSC food art ts and run it inside night through your genius. Any guesses Hello. Object. Object. Okay, so bah is no kicked. But we can now print the properties, so bar dot You use it us plus by I thought c e o r G e Stroll it again. Re compile and execute in nerd. Hello, ABC 123 So other options we have for riding this out is we could have also said is a type of key Lex, for example. And we could also say we could also cast that object to secu X down here as well. Now an older documentation of typescript you'll often see the steam still find doesn't need to face. You can also define that as a time like this Type Q X equals and that will perform almost exactly the same way. Q. U X is a type, and the information is available to be used. It'll still work, except for the same in the idea. The difference between using a type and an interface is if you hover over the definition here it shows type, Cuse said in court, which is quite easy to read. If you were to write Interface Q X like that, and to hover over the definition, you'd only get just the word interface in Q X so often later on in the course, all about you using type more often and in device. Whether you use a type warning to faces up to your day, they essentially have almost executive same purpose inside typescript. But classes can implement a need to face or type in the latest version off typescript. And the only real time that you need to use an interface rather than a type is if you want to do something called Emerge and Emerges like this, where the interface is defined twice and each time we have a different perimeter security UX. It's still an interface with Bar Doc use at N bottle Court, but you cannot merge a type so the top type like that you need to put in equal sign when use the time, it says a duplicate identify. So if you find yourself in that situation, we need to use emerged and use and into face like so. But I'm not doing that in this course. There are no times in this course, but I need to do that. Another thing that is interesting about these interfaces. All the types and the reason why it's really up to you. How you want to use them is when you compile the final JavaScript, whether you use an interface or type neither of those things that we present in their final job, script or fellatio. So right now we're using any device. If I just compile that and look at the resulting JavaScript, the interface declaration is not there. Neither is saying the types, and if we want to change it to a time equals same thing, let's compile and look at the job script, and it's exactly the same. So I find the most the recent documentation. He believes in the type of keyword to define their types and the older documentation. I said the word into face used a lot, but in another tiny difference between the time end into face inside, the idea is if I would just remove this cast here and I remove one of these properties now shows an error In Best, says property. Cordage is missing in a type but required in type Q X, like so been defined up here. We must use it. But if I was still write that as an interface Q. u X look at the air. A message. Their message is exactly the sciences. Property cord is missing in type by required in type Q X. That's cordon interface. Really, essentially typescript is treating it almost exactly the same. Whether you prefer to use the keyword interface, what time is up to you? Just remember. If used the word time, you'll need Nikos sign there. But day restrictions on the constraints are the same. Unless you're doing emerge. I expect that to change in your versions off typescript and the type of the interface will become a from or identical. Okay, so in the next video, we'll look at classes. 7. Classes: that's at a class. The people of this will use this interface in our new class week. Right, Sir. Just go up there and go class. I'm gonna call it grow old, which is another but a syntactic would and in the other private variable. And I'm gonna call it Copley. And it's a type because of type string. I'm gonna credit constructor, and I'm going to pass in Q u x of type qu x So we're using our interfacing the constructor here. We don't have to use that. We can use primitive types as well. Such as Waldir is a could just be an a right, A number array, an array of numbers, my guy. Very good, Chris, Enter. And with this do arguments for l constructor, I'm gonna sit the Copley property. So this dot ghar plea because, uh, kooks dot and we go see until he since helping me plus cook's dot court plus Waldo, I'm a guy. And since Gar Plea is private, I'm going to create a public message public. Get Copley and it will return this thought Copley. Excellent. So that new class there is using this in device. Plus, I primitive it can they all primitives if you like. Let's crack on you for a new variable down here. Let I'm gonna call it Fred. It's a type of growth because new growth, because it's a class I'm gonna pass in a cooks. Well, I've got one here in bed, So use that and a number 123 as an array, and it's so happy it's not shining any problems yet. And our console don't log fred dot get godly like sir, so we're not using this food function anymore. It's very good. Let's compile that tiu C through dot ts It's for us. Tired. They don't joyous a B C 123123 That's get Ghar, Please returning this start garb Lee, which is private and distort car vehicles. What we sit when we credit the constructor. New growth Bez 123 Bears Sequels, ABC 123 That's perfect. So far, let's have a look what the jobs could output looks like food or Js. Well, this is the jobless conversion of my typescript fall. Now that's great. Weaken just ties, going to create something that's quite nice and robust looking, and it will output some job script that we can run it note like that. But I want to run that in the browser now, so let's do that the next step. 8. Run it in the Browser: case. Let's run our little typescript example in the browser. The first thing I want to do is create a new four year called Food dot html, and in that I will paste this little hasty Mel snippet here. Company clipboard there. It's only very minimal, Hasty Mel, and it's got one script, Food or Js Nesta script awake reading when we compile and no had won Mawr line to food or tear standing bottom here. Natural Bay documents dot body In our haste, Tim l equals bread dot get gobbling like So now node doesn't know what document body in a hasty millions. But when this is running side your browser, your browser will know because your browser has a global objects called document with a body and who the body has in a hasty more so we can just write friend or get garlic straight to it. Okay, so we need to re compile food or tears. Do you see who dot ts Okay, and now we can open this food or hasty Mel directly in a browser, so it's reveal an explorer. There it is. Just double click it together in the browser. My sock tutorial Food on Hasty Mill, ABC. 123123 Very good 9. Create the SocketIO Project: Okay, That's great. So far, we've learned some basic typescript and we can see it running within a browser. And we can also see it running from node Js, and they can output down there. And it's now time to recreate this project to support socket io. Gonna let a whole lot of new things about typescript at the same time as we implement socket io. Okay, so we no longer need these three files we went through. We can just right click those and delete those when you could save and copy those somewhere else if you like, but we don't need them anymore. We're gonna recreate the directory structure here because socket io is going to have a client component and a server components. So let's start that. So first folder I want to create is going to be called a dist order. This is called the distribution photo. All the files are we compile the client and the server fires will go into here A credit new file called source. This will be where all where all our typescript falls exist and invited those. I'll also create a new folder called Client Your Client Specific type of script files and another one or server for service specific typescript. The same thing down here and distribution. So it's gonna copy those control C and Orvieto paste. No, I guess we have six folders now. And this is the structure that we working in. We'll put out typescript files in here. Needs to end when we compiled using TSC that will create false in their corresponding distribution voters, server and client. So the next thing will initialize this project using NPM NPM in it. Now it asks us for some questions. We can just press enter many times except all the defaults entry points. Not necessary. Test command three po keywords author. Feeling anything you like, Unnecessary. I see License. That is OK, Yes. Okay, so it's to credit a new file forest, Danny, ankle package dot Jason and we can look at it two years. Sock tutorial. Version one description. Mine we have. You don't need that. So I'm just gonna delayed it just so don't cause any ambiguity. Press control is scripts. We'll be using the scripts quite a bit and then all the losses. That's great. Just to show you what scripts is doing here now, you use it, weaken type in NPM run test like so and that will execute that command there in the console . There we go, that's given out. So it's echoed Aero noticed specified index of one, and it's given us a aero description with their number being one. That's up day. So just to show you a little more work window, you can do anything you can do in the command. I was get rid of that era number there and rerun that. There we go is just It hasn't given us an Eric owed. So anyway, I almost believe that it's big fault. There's a little bit of information there that you might find useful one day. Okay, so, Leo OK, the next thing to do will be will create some files and install dependencies and set up out project even further. 10. Install Dependencies and Types: Okay, So let's now create a new script which will be else Socket server. So in here. Source server, right click, New file. Or we could have displaced the icon. I'm gonna call it server doctor. Yes, To a new typescript fall. I'm gonna copy from my documentation. You'll find this script okay, And press control is to save it. And now we'll look at what we go. We got a couple of red issues here. Cannot find module Hayes TTP and cannot find soccer for the 1st 1 We can resolve haste. TTP is an inbuilt module in no jailers. And since types of doesn't know what that is, we can install an adult and dependencies here that will tell el idea about the types that no j issues is. So if we just type in here npm install types node and press enter, he creates a new entry doubt package. Jason here for the pendant ces types node. If we get back here, http is no longer showing ups an issue. The next one is socket io a socket. Io doesn't come pre installed with no jails, so we need to install it as a separate package that will be npm install soccer dot io. Okay, so shows up as a dependency now on peckish. Jason, if I go back, still gonna show up a czar red issue here. That's because our idea doesn't know about the types. So what we also need to do is install the types for soccer attire. This is NPM. Install types soccer. Oy presento. Okay. And now it's OK. Well, good package, Jason, instead of the socket Io types as well, that helps. Hello, I d a. Tell us what areas where have at actually designed time while they're writing the Kurd. Let's look at this script we've got here. So we could a port number a sucker server will list on a port. I've just chosen to be 3000 fanatics is quite common. What? Developing a socket io server. You can use any port you like 3000 system I'm using. I'm gonna hate TTP server hasty tp dot server down here in port I've set with a type. So we've seen that was already in my class App in a constructor Have an argument report making sit this local port very bored to bathe at port number. They also create the hate TTP server. It's another private variable in this class, which is a hasty TV server. Then we create our socket io server, and then we pass in the start. Survive because the socket io server will need a hate TTP server toe attached to And so this will be got here. So and in my start method will listen on the port that we said that I just write messages to the screen. And here I've used something else. These little back ticks here. There's little slanted back ticks. They're called templates. Strengths. And so that means we can just write the port strike to the string like that stop for a dollar sign. Curly Bryce. They stopped port. So the next video we'll compile this small runnin node and war understand that process and will simplify or adding a tears. Conflict far 11. Compile, Run and Setup tsconfig.json: the case. Let's compile this fall using TSC it's gonna be slightly different because our typescript fall was in a different photo. Now, so do you. See, we have to point to its source, serve our server dot tears And because I'm now using a dist folder I don't want to save my job script in the same for Oh, I want to save it. Danny and Dissed Server How we use another option here called out Directory being dist. Server like that end up. Also going to need to add another option for a s module Interrupt echoes. True. Now we need that because of using different kinds of modules and they s module interrupt will do a lot of the thinking by on the scene so it will import those for me. There's a link in the description for all the compiler options Social and we confined. Yes, module interrupt here a little bit about that. If we don't have that now, compile command here will throw narrow. You can experiment with that anyway. So anyway, there we go. That's credit. A new file new Js file for us and is putting to service Sir Js and that's the output there . That's the new Java script, anyway. And now to run it well type node dist! Suva server dot Js And then go server listening on port 3000. That's so I Britain just here. Now I think I know what you think. And you what is als This and dive talk that every single time now you don't and actually gets increasingly more complicated than mawr in Dempsey Project comes. So in order to make that easier, we can use a file called He is confident dot Jason, I'm or create that right now so we don't have to enter. This is every time you want to compile. So in my server folder here, when credit you file coat ts con fig dot jace center in that file level, paste that and shift. Or if just to format it nicely, control is it's so cellaring us to set compiler options. My target will be A s 2000 and 19. The default is es three. So that's straight job script. When I compile that Next, it'll be slightly different. Bay is 2019. The module is common. Js this weaken See little bit about that. Here on this page, so find common Js we could see module common Js different options here. Most popular ones a common Js and I m d. But I'm going to stick with common Js the out directory now in the example in the console, the ACT directory was dissed server because it was running from the root. This tears conflict is actually the silver folder are so needs to be relative to this photos. So we're gonna step down to then go distance server so down to and then into distance over as the out directory source map. It's true or false is up to you. Source Map is used for debugging and here's module interrupt True's what We also sit. And if we hover over that, we can get some more information here. You can experiment that that the false if you like anyway the include basically mains anything with a ts extension, including sub folders, and we're excluding anything in node modules. Now let's see how you can Paul that now you'd say TSC projects which 3.2, the folder of our project. It will find tears. Conflict, sir, that will be a source server into there we go that has created a server Js now in a s 2000 and 19 and also a map file that her first taste conflict script that is very minimal to stuff for us to continue starting the server hasn't changed yet. So still, node dist server dot chairs. There we go. So listening on Port 3000 now in the next video, we'll look at how we can make those two steps little easier manually compiling and manually restarting the server. Quite a lot of extra little things to do that you don't really to do this will automate that in the next step. 12. TSC Watch, Nodemon and Concurrently: Okay, so let's look at automating that compilation and restarting the server whenever we make a change to the code. When we compile our script, weaken put in next to flag gold Watch. Like, say so. We've seen a project here. Source server in this little extra option in w That means watch if I go down here. Watch. Run the compiler and watch mode. Watch input files and trickery Compilation on changes. Let's try it out. Okay, so starting compilation in watch mode found no errors. If I was to make a change to the script, say changed the case of port there, it has re compiled my farm. I want to put a full stop after their ray compartment fall again. So or if I added another method, for example, I don't have to keep typing in tisk, see to reconcile anymore. But one problem here is my consoles now being taken control of Buy this watch switch. So by my head here we can add another console window simply the terminal. There we go. Another one just there. And in this 10 run the surface of using night. So node dist! Sir David R. J s they're going. So the listing on Port 3000 we still have a problem evolves to make a changing breath. Control is to say, if it would re compile. But the server here hasn't got the latest change. So let's have a look at that. I'll change that to Capital P server listing Import three compiled. But the server doesn't have the update on my side. Press control. See to stop it and restarted its now Got a capital P. We can automate that race starting and no J. Issa's well by using a program called Node Modern. OK, so we should install no daemon. So that will be a npm in store save. Dev No. One. Now what I'm doing here is this switch will save it into the package Jason into development dependencies, which gives us the option of excluding it If we want to deploy it toe alive. Server We don't need No don't wanna live service a Justin during development, so npm install save Dev No. One. Excellent. So it's credited New Dev dependencies. No daemon in our package, Jason. So now if I was to instead of running node disservice over Js, I'll change it to know mom like So East Server server japes and it's running. No, Just like before the server listening Import 3000. If I was to make a change to the code, for example, they said that to lower case P again Press save. It's very compiled. Also restarted. Denied server. Is this using night month? Show you again? I'll sit that capital P. Okay, so three compiled and also restarted the server. Yeah, that's using TSC with the Watcher switch and also using note one, which is also detecting for the changes to serve a dot Js. Still, opening up to windows like this is a little bit of a pain. I mean, might not be, but there is a way we can make that easier as well. By credit in command. Here in Packaged on Jason, which will run these two processes in the background for us, Bow to do that will need a new package, while first I'll just stop days and in that one and stop that one. We'll need a new package called concurrently and will also install that as a development dependency. So in PM store save Dev concurrently. Okay, so that's credited New dependency now dead dependencies called concurrently and that is a command lawn command. But we can pass in extra commands. And to use that what we do is appearing in scripts will credit new one called Dev Colon to string, and we concurrently kill K means killed any existing processes. And then we now add how commands full, say TUC project source, Server Watch and also node one distance server server jailers and note that they're in double quotes here and they've been escaped so that it's going concurrently. Kill or processes at the same time. Will run T u C Project in watch mode and no admin server dot Js Chris s to save. And to run that script a bit like what we did with when we did the test. We type npm run give, like so and it's now doing both of those things in one console Windows server listening import 3000. So if I was to change this to a lower case Okay, trophyless, it is re compiled and restarted. Node. There we go. So server listening on port with Lakis that's using Tearce watch node modern. Concurrently, it's quite a common process that a lot of typescript projects you might come across Seoul optional. It just makes a little bit easier. The next section will actually credit, climbed now a clot script and then connect a client the service using sorts. 13. Create the SocketIO Client: Let's now cried a socket I a client that we can connect to l server with. Okay, So in our dissed client folder here, credit new file called index dot html and in their or paste this html copping to click put there now this is a very basic socket Io climb. People download the client job script from our socket server and it will Instead she ate a new i o object and call it soccer. They will use that. This is very basic at the moment. The next thing will go into a server script here and we want to serve this hasty Mel Farr Friuli internal whips. Other here with credit So we'll use a new module for that Court Express. Sit down here. That's import expressing path like that and part has been found already. Cause path is an internal node Js module and we've audience stored nodes types. So it confined already we dont have expressing stores, so I can't find Marshall Express and we haven't Also we also haven't installed expressed types, so types that doesn't know what types it has, it's list of it, so npm install express Okay, NPM install express types very good. And if we go to package, Jason will say we have two new entries here tops express and express Very good. Let's get back into their This is still not showing as problems sold yet, but just rewrite it. Express ago. These air a darker blue because our variables haven't been used yet, they declared, but not used. So let's use them now. Down here on this lawn, it's ad these two things constant express and abuse express static past or join directory name calling. Now we'll add app also to a hasty to be server here like that. So when this hasty TV servers cradle, it'll also cut the express application, which were using to serve aesthetic hasty, more files from this photo and then further down soccer tires server will attached to the existing server as well. So it's good if we NPM run death in the case for listening on Port 3000 we open a browser and visit 1 $27. 001 Call 3000. It is not much to see it, but we have a title now. Then, if I was to view the developer tools we can see in the console and the network that we have some communication happening with their sockets service. Let's do some more. When this object is created, so could I. Oh, it will attempt to connect to The same mural of this page is hosted from So by default, that will be hasty. Tp 1 27 001 Call three cells and if you have a socket, several different server, you can top that. You are a role in a bit of its hasty TPS, or if it's domain name or whatever. But really, that is default because we're serving this from the same place as a Now, let's detect that connection event more. Write something to the console. So in this code here with this, I owe on connection functions soccer, but that their i r on connection this many different methods on events on connection functions. Soccer. It's a soccer is a type of socket i o not stalker console log. A user connected. Okay, so a user connected has actually already been written down there because our existing client here is continually polling out socket server. It automatically connects it. House stock of surgery starts anyway. Let's look at that side by side on or refresh. Refresh he down there in the council. Every new connection we're riding. A year's connected to the console from that is happening here. I owe on connection on this event. The event fired when we get a new connection. Okay, Nothing we can do is we can use this socket variable. It's been credit and we'll just right out socket dot i d. There we go and we'll see what that is. Okay, colon slash and everything on port user connected. And that's the socket idea of this particular user. So I have been up this in a different browser and records in this Pepe's well, so we have two tabs connected. We have two years of connectors, Danny with different ideas. Besides, I was third tab ago, and this will work in all browsers is a Firefox browser. Can I go so connected when we can just close those? Okay, so let's have a look at this Index. Hey, smell more detail. What I'm actually doing is pulling the client Java script from our soccer server, and that is done down here. But we cried out. Why, Oh, soccer server. It has some defaults, and those defaults can be found in rocket Io server options. So I have this page open. Okay, this is on the socket. Io website server options here is actually called options, but server options in the types 22 important things I shave first our past. That's a default value for parts and serve client equals. True. So we have both of these things sit. So that means is serving some client JavaScript actually, throughout existing soccer server. And I show what that looks like. I go to the browser here, and I type in socket dot io. That's the default path. Value there and socket. No, I own dot Js We get some Java script and we're using that actual job script here. Soccer. I o c j s inside the haste email client here, so we actually just pulling it directly. We have the option to disable that, um by saying colon serve client equals false like so and has re compiled three fresh. It doesn't return the jobs anymore. Which also means that our little default index, hasty Mel won't work and wind actually trigger down here to the new Klein is connected But this is kind of what you'd prefer to have is to not serve clients scripts 32 socket server like that. You can also get from a cdn an example of using a city and its down here. If you go to mind X heist amount, replace that that is now downloading soccer. I Js the client script from Cloudflare City in so far as to refresh that client We go, I use a connected and they use it connected. There we go. But I'm not gonna use the cdn. I'm gonna continue to serve it from our server like this. So that's gonna be back to default, which is true like that I can remove that cause it's a day for now. Another thing you might want to try and do one day is you might not want to serve it from the socket Io folder. You might wonder silver from something like custom path in your server ever since he can right path colon slash custom path back to here and replace that with custom. Pass that. We got to get a job script again. Who wants to get I'm going to leave? That is default, sir. just I'm not gonna say any syrup Shin's yet, but we'll look at more serve rubbish nous later on. And if you want to see what they all are, this quite a few of them. It down here can't sit up back to Defoe and test, and it all works. They use connected. That's good. That's very beginnings of our client script in the next video will now build this using typescript and add a few more socket functions. 14. Use TypeScript to Generate Client JavaScript: Okay. So rather than writing job script directly, 12 really basic html page were used typescript to do that. So what we'll do is we'll create a client ts in source clients. So let's just copy descript copy the clipboard. Open up. Source Climbed new foil clients dot to yes and paste. So the era is cannot find name space a soccer Toyo client. Okay, so we need to install the socket io client types to do that in PM in stall types. Socket, I hyphen client time in case it's no longer a problem package dot Jason is now showing types a socket io client. Okay, so the next thing to do is we're credit ts conflict to copy that, and we'll credit ts con fig in source. Client as well. Okay. Says yeah. New file ts conficker Jason. Well, pace that, And to compile that you would use tear See would do it manually. The Project Bang source client and we could use watch if we wanted to. Okay, so there's Klein. If we look up here in disc line, we have a new client. Js just crowded the joust version. Marvel typescript. I just change something. Press this. It's free composed and as you probably I mean, you can probably say that some kind of problem that XY I want to be out, too. Ray, Compile the server scripts as well as the client scripts. Doesn't matter which one I changed one toe already compile so we can change package Jason down here and at another command here, like so being client. So it's climb eso in PM Ron Dev. Now what it will do is whether I change the client script. It will re compile Klein Js or Fire Change Server Js your e compile survey Js So these are two separate little typescript projects here now or some projects inside my main visual city I project. So now the next thing is this index hasty. Mel doesn't yet use this new client. Js Let's change that. Eso will change this line at this line Here Never go. L Heist Ml now uses the compile JavaScript about top script narratives there. Let's refresh that number AZA and refresh every guy good Stan lighted client Js and suck Odoyo Js Very good. That now means we can use type scripts to develop our clients or JavaScript for us suck it . I A client as well. Next video will begin to look at the different kinds of options we have. We want to communicate between our client and server. 15. Server Connection and Disconnect Events: because the now will start looking at communicating between the server and clients, and we'll look it a lot of the most common events and methods. The kinds of events and methods that you use in every soccer Ohio project that you probably create in the 1st 1 is with saying Connect already, for example. Look at this down the bottom. Refresh that we're printing out a new connection. Plus, l suckered i d. And we'll also look at now that disconnect event. So when your client connects to the survival connect. If you disconnect like your do you close your browser or you're refreshed will be a disconnect event triggered on the server. So let's have a look at that stunt your handled. We're in here in this on connection. Yeah, with this socket object that is created we couldn't have, I knew disconnect event and it There we go. So socket on disconnect and then callback function, soccer disconnected and now just once again print the soccer idea. So control this to save that. Three compiled and no J esus restarted. We get back to my little client here, says soccer disconnected, and he used a connected That's the old idea. That's my new I D. I go to the old or day and new idea now living more about this socket objects. It is quite a lot of information in there that we can look at, you know, just quickly just console. Print that to the console console like so and then we'll have a look at some of that information. Okay, so three building a new connection happened, and here is the object is printed out of the console on There's a lot of information. It's an enormous amount of information, actually. But the most valuable stuff that I can see is here in the referral. The user agent. It's other things that host fucky time. A few other things. I'll let you use that if you you want to. That's what too narrow bear that you can do that and weaken. Look at that again for a, uh, different or second client Civil. There were guys. Second, client use connected. The first client Oh, disconnect, reconnect, Let me go! And the 2nd 1 I'll disconnect and reconnect them ago, you would use disconnect if, say, you were breading variables. Feel specific socket like your game characters or chat messages. And then when they disconnected you, it just clear those variables from memory Nora Logan and out of Isis up to you, The disconnect Very useful. 16. Server Socket Emit: Okay, so now we'll look at it. The server emitting messages to a client. Once a connects toe together, get a client that connects to the server, and the server will descend. Hello, socket. I d back to the client. And we could just copy that line down there. And just after I wrote it to the consul, We can also do soccer admits. Ever got this soccer? We can omit a message back to the original soccer. Hello, Soccer I d. Let's try that. Okay, Two browsers open is the 1st 1 Okay, so if we look at the network What What was coming through the network here. But just click that one down here says message. Hello? That's my i. D c. July day. So that's coming from the server with its explicitly said Hello with the I D. Which happens to be a string. It's going to the client top script here and will do something with that message. So in the constructor with the star soccer explosions, copy that the we will they start soccer, we can with their message, which is a top. Any console don't log message. So And if I was to go to my clients again and refresh forces looking the consul here is his Hello. It's in the console on the client, and now I will roll it to the document. So document thought body, I thought in a haste email a cools message. And don't just record there. Okay, sir, It's simple looking our clients now. So what? Both their clients should have these? Well, once I refresh their clients, we should get that brief. Fresh never gets written to the screen on. So 2nd 1 refreshes written to the screen Okay to you for clients at the moment. Greatest of meeting anything like a string. Basically, we couldn't meet an object. My example. Let's say name equals a B, C and H A cools 123 being a number like that very comma. And now when our clients get this message that will come through as an object brie, fresh object object. That's the object there with an Asian name. And we could also assign it to a type. For example, say we'll call that a user use, for example, it will create out here a interface or user, so name, string, age number and down here Oh, right message dot name, so I d is showing it now, plus message dot h like So now let's check that in the Client A B C 123 object ABC on age 123 Very good on something that when we can make that much more sophisticated to our needs . But I'm just showing you that you can also send through an object and said It's type, but I won't be using that at the moment. So I'm just gonna undo all that. Leave it as any for now Central. A simple string. Now, if we look at this here, what's actually going on us when we get a new socket connection on their existing socket? We're sending a message down the same soccer back to the client says Hello, socket I d. What we'll do in the next video is broadcast a message. All connected clients 17. Server Socket Broadcast: Okay, so let's look at another kind of common scenario and that would be broadcast. Now we have three clients, my one and client to their already connected client. Three comes along, connects to the server. Now we want to service, say to client one and two. Everybody say Load a socket, plant three. So how do we do that? We use a socket broadcast, admit, then we can send a message like that. So it's goto our service grouped server here on the new connection. We'll send socket broadcast Admit message. Everybody say hello to some Friday. Now soccer broadcast omits sense to all connected sockets except for itself. So if I saved that and I just modified clients slightly Southern it it prints a new line for each message like that brief, fresher climes. Their client one is connected. Client to is connected. If we look a client one, it's been told everybody celo to client to its open assert. There we go Now Client one has another message. Say hello to client three Client to has also missing seller to client three and client threes Any new? Yeah, we could just keep doing that forever. And if a client. One disappeared and came back then Client 23 and four would be told to say hello. Back to client one. Very good. 18. Server IO Emit: case. I know. Let's look at oil limit on the server. That's down here. They start. I omit Now. In the last two videos, we looked at soccer. Omit where we send a message to the incoming socket here. This I own connection soccer more. Send a message back down the same soccer. We looked at socket broadcaster Mitt, where we can send a message to all other soccer's. Except for this one. And this time we'll look at this. The I a moment now I will admit, is the Iot up here socket serve are sending to all stock. It's so an example why you might want to do that is a server three clients. So on the server, I'm generating a random number on a timer event. So every second will generate a new random number and all. Then send that number off to age climb. Okay, so well, we need to do to see that working is copy this line here, go into a code and just down here outside, off the connection event set interval. Least I are don't limit random. I could just send a message, but I'm actually crowding our custom event on the client. This time, I'll get on to that math dot floor master at random times 10 every one second. That's generating a random number between one and 10 every second. That's one definitely seconds after random will produce a flooding. Point number and math dot floor will return the greatest inter job less than or equal to its numeric argument. Okay, let's save that in Case has generated new server code for us right now, we don't have any thing listening for reward random on our clients so that now get into this client script here more copy and paste this section going to the client, and we'll place that there. Now note that the difference here soccer on message or suck on random have just credit a new custom event just by creating a different word. Suck it on. I could have anything I like soccer on later board, for example, or anything. So every time the client gets a new message and a seven string equals random will do something. Do we want to do with that particular thing and on this example? Oh, console loved the message, and then I'll say the winning number is message will print that to decline so control is to save. Let's open a couple of clients. I have three here listening. Let's just free fresh old days one by one. There we go and we can see the hello that we first started with the winning number coming through. And we can also see the everybody say hello to coming through that the wing number is coming through every second. It's a new wing number and also know that the winning number is exactly the same on old clients. Let me just show you that again. Or refresh, Refresh, refresh four for 4111666 to 2 to 70444 So that message is arriving on H declines at exactly the same time. So that is example off bio omit. 19. Server Emit to Specific Socket: Okay, so now we'll look at on the server emitting toe a specific socket. An example might bay. We're generating random numbers and we might want to check for a winner. So one of our clients is registered a number that it's playing for, and then we can have a function on the service is checking those numbers, and if we find a winner will send to the specific client, you are the winner. What I've got here is a little mini game I've started to create called Lucky Numbers Game. So in server here Source server. Here it's credit new file called Lucky Numbers game dot ts and in that fireable paste discard. There we go in save Okay, so it has an interface. So this is essentially just a basic dictionary where we will store socket ideas against a client's lucky number. And so down here we create a public version of that lucky number, and it's just an empty object for now. But we'll feel that in the moment upon nation you connection. I'll show that to have a constructor and we have a function called get winners where we will pass in a number near return an array of strings and basically to return these string bucket ideas of every user who had the number. That's just a mini lucky numbers game. It's implement that in the server doing a service script here, we will need to import their lucky numbers game. Okay, so going on here that first the first line here. Import Lucky numbers game from Lucky Numbers Game that sound new module that we just credit . Lucky numbers go further down. We will credit very before eso down here. Private Wood has called a game at the top of lucky numbers game now and then. Constructor this start game ankles. New Lucky numbers game. Let's put that there. This dark game equals a new lucky numbers game. It's copied this first line here and talk about that. So after we console long that a new user connected, we'll say they start lucky. Game numbers for this soccer I d equals a new random number between 1 10 This is the Lucky numbers dictionary that we talked about here, and we've given it a key being suckered. I d equals a random number. So for every new connection to civil will give their client and you random lucky number between one and 10 K's the next line going down his soccer emit. And rather than just saying hello, suckered, i d. Will say hello Soccer, i d. Your lucky number is whatever was this lucky number that you were just given. So try us to psych now. Finally, in this set interval function we just did in the I omit video, this is a little more complicated. What is replaced that completely with this and press control is and what is doing more for every 1000 milliseconds, which tickles one second, we calculate a new random number within credit winners variable. When we call this stock game, get winners for this random number and that will return an array of string, which means we could also type that control shift after former And if we just don't length if there are any one is in that awry. Winners for h least dot i dot to. That's socket i D, which was inside. Winners don't commit message. You are the winner. This is sending to one specific socket and whichever socket i d was returned by this Get winners function here in our little lucky numbers. Game module. The control s to save this start. I omit Brennan number that has unchanged were still sending the random number. Everyone 1000. So that's going. Refresh a little clients. Okay. Refresh, refresh and refresh cases. Winning numbers. You are the winner with number six. So when we connected, your lucky number was six. Okay, On this side, your lucky number was five. So you are the winner for them for number five, And that's pretty much it over here. The second client, his one twice is lucky. Number is seven. So you are the winner. Number seven. You are the winning numbers. Seven. Right, sir. That's an example of Hey, my one on mitt toe a specific socket. Basically, they k here is this extra bit here. Got to w in between the i r. Indian mitt. So in the next video, we'll look at the kinds of abuse cases applicable to clients 20. Client Connect and Disconnect Events: Okay, so in the next few videos will do some work on. The client will look at some of the events. The first events will be connect and disconnect, and we'll also work on the presentation a little bit of decline to make it look much better . So in this first function on Connect here, I am going to just clear the inner hate email. You can just call any functioning lock in this example. I'm just completely clearing in Nice demo. And the reason for that would be I mean, here's a client and I just well of connected. But if I was to brace, start to server, for example, Boy Chelsea and in PM Run Dev, we have a new connection down here, but it's continuing to print from the previous connection. Maybe you don't like that One way you can handle that kind of problem is to credit connection event that clears the document, for example. So just copy this first section here and put that in and basically on connect, I will print connect the console, then clear haste amounts of. I saved that there and refresh that some good letters code. If I stop the server now and restart. Look to the left and a new connection has just cleared out in a haste email and to show that the Connect event is the first event that will happen upon a connection to the server . So if I show that in the consul here and just refresh that connect is the first thing that's just happened and once again if I control seat stop that start the server again. Look down here. Connect is the first thing. So whatever you want toe happen, such as initializing your client. You can do that in the Connect event here, so the next event will look at his disconnect and hey might want to use it. So let's just copy that will put it into their client like so. And all I'm doing is printing out, disconnected from serve our plus the whatever the payload waas. Yeah, so it's just that control is to save. Now this refresher clients, we get the latest code. Now if I was to stop the servant now by pressing control, see, we get a disconnected from server plus the payload, which was just a string saying transport era. So that's, uh, how you might want to use disconnect. Just a drink, a message like that on. Notify the user in some way. Another thing you can do with disconnect is weaken. Force the document to reload, for example. No, I won't print that anymore. Artistic location. Reload. Now if I just reload that now. So we get the latest code in the client. Now, if I did something like change some code by putting in a blank space and press control s an array compiles they glowing job script again. My whole browse on the left, Aegis refreshed. Let me show that again. Removed that empty space Control s on the lift. My whole browser has just refreshed. You can get libraries toe and to your projects That will do that. But essentially, that's really is all that's happening under the hood is disconnect. Event is causing location to reload. So it just pretty much just implemented a library you could have downloaded and the two libraries that you could import into NPM that I think of our live reload in browser refresh . But we don't actually need to import. Those could have just implemented their own solution there, sir. Once again it says like, Make any change, Lloyd. Putting us a new line press control is that disconnect is forcing my breast to rely on. I mean, it's something most ideal solution because if I just close the server control, see, then my hope document handed completely disappears. Maybe want something like that anyway, that so you can do it. And that's the connect and disconnect events. 21. Client Emit: Okay, so let's look at a meeting. Messages from the client. Could we actually haven't done that yet? First thing we'll do is we'll copy this line. They stopped soccer document put into the client code down here in stop soccer message, and we'll pace that. And pris control is now we have a problem. At the moment. It's not immediately visible, but if I was to you ve the console, we get some little areas here unable to get property and mitt of undefined or no reference what that mains is in our message here. This this hasn't been declared inside the event scope. That's sort of the scope of this exists. We can see that only as we hover over it here doesn't really mean anything. Another way you can tell that is, by at this level here, you compress full stop and you'll get intelli sense. You even getting telling sense further down as well. But inside the event function, you press full stopping to get nothing, because this doesn't refer to the same thing that this does here. So one way of getting around that is to convert dysfunction here into an arrow function. So let's just get rid of that would function in between these two characters here putting equals in an arrow. Now this Now our first, the same this as its parent. So if I was depressed, full stop there, we get a property and we get a bomb or something down here. So it's this within the scope and outside that scope, because the same thing and just converting it to a narrow function like that, it's usually easiest way. So I press save now, and it was just refresh that to get the latest card, we no longer getting any areas in the job script. So this is now actually emitting a message back to the server. Now the next problem here is that we don't actually have a listener on the server looking for an event string message. Let's do that. Okay, so in the code down here in service dot tears, you now on connection event right. A new event for solid on message will adapt to the server, So let's go to a server card. So what? The connection event down the bottom there. Soccer on message. Let's just log that message Control save If we looked on the bottom here says Thanks for having me to What's actually happened is the user Gotti's. Hello, You're lucky. Number is three and then we've set. Thanks for having me, sir. So soccer admit message from the service to decline. Hello. You're lucky. Number is three And it on the clawing on message we've sent back Thanks for having me. So that's working now. Now one kind of problem that can happen now is on a server. We could decide to omit a message back to the client using the same sucking here. Soccer daughter Mitt. No problem. My problem. If I press save, we're gonna have an issue where our client server will be continually transferring to and from using the message of rent. Here, let me to suppress control is to CIW. We'll watch that. Well, look, thanks for having me things about me and it's just saying no problem all the time. So So what is good? Teoh, rather than using one kind of events string to handle everything just cried them specific. So, for example, instead of this bang on on Messi's discovery on Thanks on Thanks response, Chris, I've and on the clawing wheels will meet a thanks response. Co. Haven't completely saw the problem yet on the server. Instead of sending back a message, will send a no and no problem response notice. Fix it, spelling every guy and on the corn, we can have another specific event for no problem. Response. Classic Cools. We got a no problem back precise. If we got another problem back and a new lawn anyway, good night. Put him back. I'm just showing you that so that you can see why it's a good idea toe. Have a specific event to create your own specific event names. So I recommend if you're doing this deal code and to just remove this little section now, if you don't really want it and almost server same thing we don't need to and all that specific message right At this point in time, what will do in the next few videos is colluded. A work on the presentation of our client. Prove some of the functionality to turn it into a riel multi player, many game and by implementing a lot of the things we've already learned 22. Build an Example Mini Game: Okay, so let's a ploy. Everything we've learned so far build ourselves this mini game where it's a multiplayer game. It has a check down the side and we can chat. And another client can be opened up and it can also chat back. I like, sir, we can place guesses on one of three games, which are all the different phases. For example, this one will guess those. The next number will be wonder five. And I lost. It doesn't matter. Then we'll do. We'll build this complaint Little mini game using everything we've learned so far. All in typescript in Sakata. Okay, so just ensure that your father structure looks like that your client ts so we'll just insure it Looks like that. So copy that and replace your existing source client client tears. Your client tears. Conflict should look like that. Your source server Servet ears should look like that. Your lucky numbers game should look like that. We're going right back to basics here. We're gonna rebuild. This lucky numbers came completely the server ts confliction looked like that. Your client haste to Mel should look like that. And your package Jason should have these dependencies and also these death dependencies. And then if you're building dis completely from scratch, you can run in PM, Install said. Those dependence is getting stalled, and then you could just test that it'll works using in PM run Dave, and then we will be able to continue on to the next stage where we install bootstrap, we start building. This climbed bit by bit, using everything that we've talked about so far and only previous lessons. 23. Install Bootstrap: Okay, so we're ready to install Bootstrap now, so my code has all been updated. It's all better basics, as outlined. Any documentation Now what we'll do is we'll add bootstrap, which is a job script in CSS framework used for building user interfaces. It's very popular, so it's quite good to understand how you might want to add that to your typescript projects . So we'll do that now. So just ensure that or your code is working. I've just started this using any PM run, Dev, and every time I refresher, I get a new connection and disconnected event to like so the back to basics project we've been working with and now wig installing Bootstrap. So the first thing to do will be to pop the No Js server now, Chris Control, See Twice and let's in PM install Jake Weary. Now Bootstrap uses Jake weary, so and we'll use Jake Weary as well. So this is a good opportunity to install it as well. So right click NPM install Jake Weary. Excellent! That was show up now package Jason. Here's Jake Wyrick. Let's also installed Jake weary types so that we can get in telly sense in visual studio code times. Jake Weary. Excellent. It's showing up there. Now Install NPM install Bootstrap And this bit isn't necessary because But, you know, it's just install it anyway, cause maybe you mind. I want to explore it in your own time. Can't bootstrap types bootstrap will be interacting without bootstrap framework using Jake weary so we won't be writing any boost for a specific job script. So this was not totally necessary, but we just got it anyway. So your package Jason now has types bootstrap types J Query, Bootstrap and Jake weary. And what that has actually done is I begin The Night Modules folder has created two new additions. Bootstrap Dist with CSS and job script in it, which will use and J query notice. Jake Weary also has a dist. Folder as well. With some Jake weary pre compote job script falls more useless, especially that one there. The next part is to include these now haste email. So down here in client East Klein Index html 1st 1 that's include the bootstrap CSS. Okay, so bootstrap CSS bootstrap Mincy assists and also to include the Jake Weary and the Bootstrap Java script. Inside the body tag here like so Bootstrap consists of another libraries well called Papa. And at the moment, I'm just floating bootstrapped. Ah, bundle Minges, which has already just bundled Papa. For us, Papa is a new addition to the latest version off Bootstrap. It's an animation library case. The next thing now, as we saw earlier when we start the soccer I serve our, it exposes this new endpoint forests soccer Toyo soccer riot dot Js so that we can download it straight from the soccer server here. I'm referencing Jake weary directly and also bootstrap directly. So at the moment when we run, this basil would turned four or four areas because our express server that way we've started When we start. No, justice doesn't really know about these things. So what we'll do is we'll serve thumb from a node Modules folder bindings aesthetic paths to our express object in Servet ears. So let's do that. So if we scroll down here to serve a tear so we can see those two lines here that I'm talking about. So we created a new static route for Jake Weary, which will point to a Node Modules folder holding Jake weary, dissed and the same thing for bootstrap like So So let's just copy those two lines and added to L Servet ears to Danny just after we do abuse. So abuse. Jake Weary and app use bootstrap. So let's look at the hasty mail. So Jake weary Slash J. Kareem in D. J s director server. Jake Weary Express, Static Path joined directory name Go down to then in tonight modules and then Jay Query distillates. Look at that when typescript composes Tears file and we placed into dis server. So it's server Js. Let's go down to Donna Dist, then into node marshals, then into Jake weary and then into dissed. And then Jake weary Minjae s. That's what's happening there were saying that followed Jake. Weary points to note modules. Jake, Weary, dissed and inside Jake very dissed. We have a file called Jake Weary Mindo Js, which were loading here in our heist email. You don't have to use this technique to download job script strictly for me. Night. Montreal's photo. You could just copy that directly into your disc client folder or some other far if you like, or you can use a cdn now I'm just showing you how to do it this way using express static routes, because it's just useful. If I find endless just in PM Run, Dave and everything has been re compiled. And now we get back to a client on this refresh. Okay, let's look at the network there. Spin that network and refresh socket Io client Jake Weary men. We have Jake Weary Men s a threat for not modified, but strap men CSS bootstrap Mondor men. So those have all downloaded, okay? We're not getting for four errors and they're being served from our no J ISS Express. So we said I'd say anything yet, but we do have bootstrapping can start using it. 24. Setup Initial HTML Layout: Okay, So now let's set up the initial hasty Mel lay out of our little client. That doesn't really have anything yet. Okay. So good. Quite a bit weak and copy from this page, The easiest thing to do would just be copy or going to hell code index. I smell slick door and just replace it. Okay, so let's have a look what we got. Let's refresh. Desprez are now a guy. We have something that's beginning to look familiar now. It's not really doing anything much yet. Just showing some of the titles and some text and check thing doesn't do anything. It's not programmed to yet. Let's have a look at the Po'd that we just paste it what it might be doing. Okay, so we have this give here. This is the Jumbotron. That's a bootstrap, a common bootstrap thing. Lucky numbers, many game, Mrs H one. I get lucky numbers, Many games. This is the jumbo Trump to speak Square here were saying and we have Ah, Lincoln there again. High trip in sort of pay tag we have down here a new section called Never. That's a common bootstrap. Singers well, with different things like buttons and some other buttons, like normally in bootstrap buttons or in Saudi You Ellen Alloy. And there's a function which we haven't credit yet. So on Click client dot show game, Bronze Games, Silver game, old game, these of the titles that we see you and we have a container here with the row and in it. Three other dibs for each of the games and each of these games a pretty empty at the moment , only ever. Title you can see and they're all on by default. And here's a check Penhall and with a button doesn't do anything. It's just what you should do is will continue working on this client. But in the meantime, just feel free to see what happens. When you say delayed something and refresh, we go. Put that back. Let's delayed the whole naff section. Refresh. Now we don't have enough undo. Let's delayed, say one of the one of the game penalty control this. Then we go. One of the game panels is missing from there, controls it, and we can also remove the whole chat panel. Refresh the chap panels missing, controls it that it's pretty good. So far Let's just maybe add a few more. Those very fresh Let me go if we got some more menu while I was across the I mean bootstrap is her major subject with its own documentation you might want to go to, but plenty of examples. Approach components the batch, breadcrumbs, spoons, for example. I have a button button info we could use, say, as an in focus. Charmy is blue. Let's do button danger, but button danger. It's refreshed again. There we go. There's sin buttons now red. You can experiment if you like, but anyway, that's just under that and leave it to what we started with very good and in the next video will add some CSS. 25. Add Custom CSS: Okay, let's add some custom. See assists now to make it look a little bit more like what we're expecting to see down here on my documentation and Customs seizes, this is copied this whole style section here Siani addition on the index hasty meal. That's that here in the head to stand here. Control ISS. So what that looks like when we refresh well that we have two panels. They checked panel with a Grady Int C assists that both got Grady and see assesses, and we can only see the bronze game. Now they're silver game and gold game have disappeared, so next bit even know this is not see assist dispute Is JavaScript in our source Client client tears here. It's at this function called show game copy. Going to Client tears. Trois. Now show a game. Where does this come from? In index Hasty Mel. From the previous lesson, I had dysfunction here on these in this nev client dot show. Cain zero client dot show Game one and Show game, too. We look at that says show game switch idea Case zero. So game Penhall one fadeout game penalty Fado game. Penhall zero. But White 100 million seconds they will fight in. It's the same thing here. Case one game. Penhall zero Fadeout game panel to fade out Game Penhall one. Delay 100 milliseconds while they fade out and it will fade in game panel one something game penalty to fighting. Let's see that working toe. Refresh that. Okay, Silver game, gold game. You sit a slight fade going on there. Okay, so we're still haven't programmed chat yet, but this is something worth experimenting with now, after this video, for example, in the index Hey, smell in the new CSS, you can see well is the game Penhall And that dot means its class. So if I just copy, find that did in Here we go. Class game. Penhall Class Game. Penhall Class Game. Penhall. So although these three games Bronze Games, silver game and gold game here that have fading in coming back in again, all have the class game panel, so it's a double good that so position relative border, solid gray heights rented any two pixels border radius in a box shadow. You can experiment with those you got to take them all away. So let's take away the border radius in the books show control This very fresh and you can see it's a square now and it's not a book show. Where is the check? Panel? Does have a box shuttle when it has a curved border. Weaken. Increase those curves quite a lot. Okay, look at that. So this is time for you to play around with CSS if you think you might like to, but I'm just going to put everything back to the way it waas really for the next listen. So another thing, too, if you this hash means I d. So we should expect to see something in the Haitian Belco with an idea. Game panel zero. And there we go. Give class I d game Penhall zero than is Iran saying Bonds game game panel, one game penalty. They got ideas and also this function here. Show game client dot show game. If we go into client to Yes, we got the show game to function here we look at this Is Jake weary? Were time Jake weary to find this element with this I d hash game panel one and do fade out . And if we just press dot there would get intelli sense for Jake weary. That's because we installed Jake weary types earlier, and we can look at each of these different things in the bit of documentation on H one. And if you have installed the J query types and you're not getting any until the sense yet , but you're getting like red squiggly areas like that. One thing did you Condo's with typescript is press F one, and you can search for the word restart like that you got Restart tear server. Just click that down the bottom left here initializing job script in ts language support. It happens very quickly that will reload all the types in the background for you, but anyway, so right now I've got all the Jake weary until he's since running because we've installed J query types. But you have a good old play around with this. And remember, doesn't matter what you damage. You can always see. Just come back this page again and just press copy and replace soul, so have a bit of fun with it. Excellent 26. Add Chat Functionality: next thing, what we'll do is we'll add some chat functionality. So when a client here we have this little chat window doesn't do anything yet. So ABC Press Center doesn't work. If I press send, it doesn't work. So And if I had a second client open like so they could chat back. Doesn't work, was just implement I very simple chat functionality So all the little clients are connected can talk to each other just using chat. So the first thing to do is, well, quite this new fall called chat message Tear. So it's just a type, so let's just do that in source server down here at a new four coach at message dot to yes , and in at, Well, pace this talk. Here we go. I'm just using a type type chap. Message is to properties Messages from will. Use that now. So server server tears. Let's add this little section here, down here in the connection event. We've seen this before. Soccer broad custom it so basically, Windows Server receives a chat message with a chap message unit containing a message and from well, socket broadcaster Mitt back to all the other clause so you can see here, Me hard driver. It sets the broadcast flag when admitting event broadcasting an event will send it to all other sockets in the name space except for yourself. Okay, save that cases scroll down a little bit. Source. Client Client TS Let's add these type to the client tears as well. Climb tears. Okay, note that I've added it to the actual tears fall this time. It's because L client JavaScript, when it's been compiled, will have problems with imports by default when run in the browser. So we'll look at that later on in the course had toe actually import from different files on the client side, Let's add an event to read chat messages from the server. There we go. So on chat message from the server, it will be a top of chat message and will upend this message message from and the chat message dot message to how messages element on the document. This is I D messages and a pending a new ally list item. Say that if we get a hasty my document and look up, try and look for something with an idea. Messages control their find messages of ago. It's an ordered list. So inside Out Chap panel, here we have disordered list. Let's well, the oh well element represents a list of items where the items have been intentionally ordered, such as. A change in the order would change the meaning of the document. Now, in this particular chat function, you can either use A UL on an ordered list or an ordered list. Doesn't really met up because we're replacing the style completely. So anyway, this is our ordered list. That's messages for this cover to the typescript messages that append a new list item, which is basically the incoming message from message Now. Scroll chat window. Let's copy that function down here. Scrolled shirt window. Let's just add that down here. What it's doing often on chat. The message will peer somewhere, and to be more messages, you have to scroll the screen up or down. Whichever hell, however, you like to stall your chat. So basically, after each new message, I'm school in the chat window, so it's animating the scroll top property off. See, Assists is looking at the messages element is looking at all the least artoms getting the last child and sitting the position scroll top of messages to be the position top. So with 500 million second animation and then the next step we set time out if the length is greater than 10 will remove any list items in positions. There are no next thing down here. Let's cried a function called send message. Well, at that as well. When we press the button on our form here like send that will call the send message function just here he will look up something with an i d. Of message text. So let's find message text. There we go. Input class, form control I D. Message text inter chat message. That's this little box here. That's the message. Text element has an idea. We'll get its value. And if its length is greater than zero, will continue this start soccer dot Omit chat message were quite a new chap message, which has a message text and for now, the from value on this hard coating toe baby will write something a little bit more complicated in the next lessons. Okay, so what is the message text being broadcast? Okay, end also, we're doing a soccer broadcast from the server. That client isn't going to receive a response about the message. So what we'll do is we'll just right our message to our own copy off the messages sorted list and also scored a window. So and then we'll clear the message Text field down here. So control save Scroll down to the disc Klein Index Hasty Mill. Let's add some see assists to style these incoming messages. So basically, these air list items this style type none, which means removes the little bullet point or the number you might see on list items in HTML. And I got two kinds of messages. We got other message. This is the message that we'll see from all other clients and will float that right. And this is my message when I post a message on I added to my own messages ordered list. OK, so let's copy Easy style. Then there these three extra styles but the main index hasty m o messages ago. There, there, we can experiment with those later on. I know dilate style. So what happens and also changed the color if you like and changed the border radius. The next thing let's make this button down here work. So that is down here in button. Send. Let's scroll down the documentation. That's copy that line and replaced that and we can see on click client Send message. That's the same message function we've just added to the client ears. Now this is not finished yet, but let's see what it looks like so far the two clients side by side. And if we do high on the left, I go baby says hi. And on the right here this is our other message from the other clients High Bay So we can see we can you say hi back my back And this client sees his message Hi, Back on the one on the left gets the response So cool sent it back when we consider styling for the message Way send and the message we get from the other clients is different now. One other thing, which is useful in chat messages when you type something, it feels intuitive to press the enter key. And right now the indication on doing anything while this input box has focus. So what we can do is up here in pliant dot ts. We can add a document on Ready event which will attach a K press event to our message text listening for the enter key. And if if you press the enter, Katy will send a message, we will call this stop set message. So it's just copy that and we're inside the constructor declined constructor. We will attach a K press of event to the element with the idea message text and when you press key third in which is the enter que you will call send message down here it's just a three fresh and that's test press enter and that works now and on the other side press amazing and time that works Excellent. Now feel free to experiment with these styles. For example, if I was to remove these styles for my message now the message precise, brief, fresh and ray fresh thereon styled. Now you can see in that both one has float left and oneness flight, right? You know, you can sort of see that you can change the style any way you like. Also down here on client tears. When we get the check message, I'm using bootstrap class float right I can just do float left and Let's have a look float . They're both identical. Now they're both on the same side. Let's just sit that back and let's put this styles back and this is good and we will continue from here. Next video will add screen name functionality. So rather than saying it's from maybe every single time, we'll create some kind of functionality that, alas, is toe have a unique use, and I am for each different client. 27. Add Screen Name Functionality: In the last video, we implemented the chat, and when you send some information, I have a just devoting as I B s. The sender's initials to us now create a system where we can have unique use names more random or is to use the names for each of the new clients. Is they connect and in this case, oldest credit. Random Use a random system for doing that rather than going for the complications of crediting sale, logging form and with persistent storage for unique users, will described them randomly so that every time we refresh, we get a new random the name Let's do that. So on the tutorial here will credit new, far called screen named Our Tears Down Here and serve also serve, Ah, screen name Matias. And in that let's put this type and the type is screen name has a name, which is a string in an abbreviation, which is also a string save. Let's create our random screen name generator. Now this Copy that phone and down here and server you file random screen name generated or ts biscotti discard. And what's actually happening is I'm going to lists one just called animals, another one called colors. That's a list of just several different kinds of animals. Colors there, and I have one public method. Generate random screen name and what'll do was pick a random color from that list and pick a random animal from that list and then credit a screen time and screen name, which is a top of screen name, has a name, which is color plus animal. So example Red Cat, an abbreviation being color. Zero animals there. Oates. The first letter of each so Red Cat would be R C case of Saved that. Now let's import that into server tears. Import reign of screen name generator from random screening General safe. That's quite the variable random screen name generator. Put it down here after game. Now let's and Stan. She ate it. Random screen name Generate has a new reign on the screen. Nine Generator and also now when a new client connects, we will generate a new random screen name and then, well, so could emit back to that soak up there. The screen name do have just generated. This is a random screen name. It could have come from a database if you wanted to do that. Nor could he is too cookie or some log in process. Save K now Client ts Let's created type of the screen name that the client can use. It's create a private variable down here and let's create the event. So on screen name will get a screen name from the server and we'll set the local variable, which will be a screen name and everything. On the document with class screen name this time was a class you lot daggers text to tap the screen. Name, Name. Okay, so and also in our send message function, let's just update these two lines now used the screen name property so down here. Send message these two lines here so that would be the message from this time will be the start screen Name that abbreviation. Add some additions to index Hasty Male. The first ones are a style for screen name. End circle, so index html Screen name with the border radius foot whiteboard in the color in a circle. We'll see the circle in a moment, close circle and down here in alittle three game panels that we're slowly building. We'll add a div here showing the screen name. And actually, I'm just writing it three times. Sinister show that this time we're editing it. A class, not an I d, while classes useful if you want to modify multiple things at the same time. So anywhere where there's a classical screen name that's these three spends here will have their text updated with the new night. That's testes. Errorless. Refresh that. Okay, My screen name is Red Tiger on the left. Here on the right, let's refresh that My screen name Here's red Quo refreshed again. This time with screen name is Yellow Frog. And if I send a chat message Okay, so my Brady ation wife inside the little Grey circle Hello And over here on the right, I got a hello from why, if Okay, so if Red Koala here since he's abbreviations gonna brk say hello, hold it back. I go from RK okay, because that's just very quickly implementing some kind of user name or screen name functionality, and it's non personal information, so it's quite safe to use. It's nice. It's a very quick solution 28. Create a Player Object with a Score Property: Okay, so we've built out screen name functionality now. It's not very versatile. So what we'll do is we'll create a player object, which also includes the screen name plus also score and some methods to Minnich that player object. So that's in the documentation here. We'll credit player object with this score. Property. Now we want to create a new player typescript file, which will be a class that will implement tonight. Player into face and the I Player interface will have a screen name that we just credit, plus a school. So let's do that now. Let's create this new player. Tuft would fall, and but this code into it. Okay, sit down here and survival. It's crediting fall called Player dot typescript and paste that. Okay, so it's using the screen name that we know about 19 abbreviation. Plus, we have a new property court score, which is a number, and it's a class off play on implements. The I player interface you need to face this time doesn't make much difference to the actual output. A job script from the compiler, But it's just a nice way of writing code in the cases of private score here Number zero in a private screen name. Screen name. So when we construct this player, objects will use the constructor more passing a random screen name that we created. We have a public school Get method. We have a public screen name, which is a get method returns this screen name and we have a public get for the player itself which returns? Basically, this the player object with the score on screen name. This is a cast Cast this object as a player and I function to adjust the school plus or minus as we we know lose each time. Okay, So save that the next things Servitia slits Import player. Okay, Server Tearce up here import player from player and down here. Let's copy this long Put that down here. And what this is doing is cutting I Dictionary of Players, which is on i d, which is a string end of player. So each of our socket ideas will reference a new player object and we'll be able to retrieve those using Nizar days. Okay, so it's now. So just after where we create this random screen name down here rather than socket a meeting a screen name back to the client. What we'll do is we'll create a player will add a player to a dictionary with the idea being suckered. I day does a new player which uses the screen name. That's the constructor and we'll omit a player. Details. Which is this player? Suck it. I d dot player and down here on disconnect when we get a disconnection and on a disconnection will remove the player from memory where I go. Okay, save that. No, it's a declined typescript. So down here we create a new type. If a client just after screen name player, this is much simpler than the server player. Object is just a type with a score in a screen name. The client's side version of Player doesn't need to be anywhere Near is complicated. It's just has two properties. Scoring Screener. Let's get this loan replaced that we now having a player object, which already has screen name in it. Let's socket on player details. Case less free removed. This whole want me credit. Earlier on play details. We'll get a player which consists of a score in a screen name. That screen name has a name and an abbreviation to this player equals player, and we'll continue to update the screen name property. But this time it will be a player dot screen name, dot name, and we have a score which will just create in a moment of a play a school and down here we send a message. Will this update these two to use the new player object? Okay, so because right now they're using this start screen name abbreviation. We don't have the start screen name anymore. We have a player object which contains the screen name just now, this stop player dot screen name abbreviation. Sit down the heist ml dishcloth index rather than just riding your screen name is class screen name. Well, right. Your screen name is class grain name and your school is span score. Just replace all of those. They're also classes. We have three copies later on. At the end of the course, you'll be able to redesign your client completely, and you'll get a put your screen name and your score somewhere else, rather than like how I'm doing it now. I'm Jim, like heading it three times, which might seem like over engineering it is a little bit. Doesn't matter. We're just learning about classes a little bit here that you can do that with classes. If you ever want to The case, let's test that. Listen to client, so refresh and your score is zero three fresh that your score? Zero It said a style to its score cause it doesn't look very prominent. Okay, just about here. School. It's very much the same. A screen name, same color, same properties. And you can improve those if you want to, so you and your score zero in your score. Zero. To refresh. Andi, If you don't like your score industry fresh and get new school, you'll get back to zero. The score is persisted, so you know a guy. 29. Build the Basic Game Engine: Okay, now let's build a very basic game. INGE. First thing to do is crack this oil called Game State Down here. Server, new file game, ST dot Tears. Copy that, and this is just starters about games. State will let more to it, but right now you can. So we have an I D. So we'll have multiple games running and each will have their own I d. Another different title. Give them a logo. We'll see that in a moment. They will have a property, which is a game face. Would be number such a 01 or two. And there'll be a game clock, for example, to be 30 seconds to make your guests and the cloak who can't them by one and them the duration value. And that will be how many seconds is on the clock when the game starts. Not just a simple date that we can pass from the server to the client, and the client will read that state in update the presentation because create our lucky numbers service game That follower exists. It's just copy that completely. I want to fall here and mistress place that control this and what we're doing here is where setting up some private variables match our game state. We have a constructor, and when we instead shape block a numbers game, we'll give it an I. D. Give it a title logo in a duration. Say that. And then we can just update these internal properties here with these values from the constructor arguments. And down here we have another function called Sit Interval, which have seen already, and it will run every second. And it essentially every second what'll do is reduce the game clock by minus one. So on the first pass, if this game face equals zero, which it does because we've just initialized with zero up here, the start game clock equals dis duration. Then we'll set game face equals one. It wouldn't go down to the bottom and then create this game. State variable, which will consist of an idea title logo game face, which currently equals one and then a guy in clock and in duration on the second pass game faced equals one. So if this game clock is less than zero than what a game face to it, it's not going to bay. So it's going to continue to rotate, reducing game clock by one enough during the game state each time. And then you know so won the game. The game clock will be below zero. So what's that game physicals to the next passage game physicals to We'll check the clock again for to be less than minus five of them will sit game face back to zero, where it would just re initialize some very once again for us, the game clock back to whatever duration was Sit. Now this really isn't doing much. It'll it's looks more complicated than what it is. All it's really doing is getting a cloak, canning and damn. Once the clock gets to zero, it is in another face for about five seconds, then resets back to the start again. Toe. What of the way set duration to bay when we constructed our lucky numbers game object. This will get more complicated, but right now it's just counting down the clock, and we'll use that to draw a timer on our game and a progress bar. So save that. Take it to the next one. Source service. Erviti is take private games in a server here in a socket. Io fresh course. We had one game. Lucky numbers game. This time we're gonna have multiple lucky numbers games. This is not a dictionary. There'll be no idea. And I'll use a number 01 to digitize a point to a new lucky numbers game. So to be a dictionary of lucky numbers games. Okay, so further down here, Copy that. We are creating three different lucky numbers games. The first Lucky numbers game is gonna have an I. D. Zero. I'm gonna name it. Bronze Game. That's its logo. That's an emoji is gonna have 10 seconds on the clock each time it starts. Okay, so this games one another lucky numbers game. So it's called Silver Game. This is a slow go, and it's gonna have 16 seconds on the clock. Another one, Number two, The goal game. It's got an idea of to That's its logo, and it's gonna have 35 seconds on the clock. Now, this is just beginners stuff. This will get more complicated. And now also for Servet ears, copy This Interval said down here, sit into of also everyone. Second, it will rerun this This start, I omit what we'll do is, we'll send a game states to settle the clients using oil mitt and that game states will consist of Honore off three game states. So game, state for Games zero, the Star Games, one game state and this the games to Games state. It's an array of game states for each of the three different games that will have running that will have their own internal clocks updating every second counting down their game clocks. Okay, now add something to the client ts. So we'll add a type to the client tear stiffer game states so that the client now is what Game state is. I get in that game. State is identical to the game statement. Sought to serve a sub project further down its credit event for game states on the client copy that we're after disconnected. Okay, so once we get a game, states, we're expecting that to be an array of Game state. And so, for each of these games, states quite a little game state variable. The two main parts here are if game state game clock is greater than equal to zero will do . Those things else will do those things, So if the clock is less than zero. The background color or the time a bar would be different. The which will be different. The time of display will be none, and the game phase text will be game closed. And if the game clock is greater than Nichola, zero will print. New Game gets a lucky number will display the timer. We'll up that its value to the game state game clock failure. And we have a progress bar. We we calculate the percentage, depending on what the current clock value is and what the duration of the game. Waas. Then we need to create some elements of the hasty mail for game face Time A and Tom about. Let's do that now. Okay, so down here index, let's add some styles. Ex Hasty Mel. Okay, That said, the styles and their classes because they have the DOT here, says the progress contain our progress. Far game face at a time on the time has got a font sizes. Position is absolute in the Progress Bar has a color. Various properties. We can experiment with letter Let's go down and down here in our game. Penhall gifts. It's just at this section here. Okay, so after game title now time A has a zero that's so gay. My day progress container with a time a bar zero That's our game I d and a gang phase zero this to the others as well. Tom of one. Tom about a one game face one and the next one. Time to Tom about to end game phase two. Eso Each of these things has a different idea, like game face with a number after time out with a number after in Tomba. Get back to client. We'll see here. I'm getting time. A plus game, I d dot c asses display block. Oh, time a plus game. I don't see us his background color. It's, uh, execute that. You see what it looks like and type in the browser. And so Okay, lucky numbers game. What we have here is a timer counting down and a progress bar. The animates depending on the number like so That's the percentage 50%. 40%. 30% new game. That's the game State string game closed. These are the things that are changing depending on what the game states are on the server . I'm getting new game steps for every game. X second. The Silver Game has a different game, States. So has different timer. The gold game has a different game. State has a different timer. They're different. Stage bronze games at two seconds left. Silver Game 86 Lived in Gold Game. Two seconds. Game closed. Very good. So you have three different games running on three different timers. And if I have some upside, but so we can see both clients are saying exactly the same information. They're both getting same information exactly the same time. Every second service updating the game states fresh those games and sending it off to each the clock. Cesena's soccer Doyle may in the next video. We'll use this game state information to update this chat here. So not only can the players talk to each other, we'll also get game stay updates written to the Champ panel so that when you're on the bronze game, you know what's going on in the gold game that happened to flick between excellent 30. Push Game Events to Chat: Okay, so we have three different game is running all with different game states, different game faces and different values on the clock. We're updating the screen with game panels with game face information. We can also update the chat. So in this list, no show had a credit callback that we can pass to our lucky numbers game, which is a little lower to update the chat windows for all the connected clients. Because the first thing I want to do is on chat message. Two years. I want to add a new property to a chat message the time called Type, which come bay Arthur, apply a message or a guy Message Control is to save. Let's go for their into service ts here and down here, where we kray are lucky numbers games. Then add a new property, which is a callback function for in survey here. Okay, so here comma this update yet Okay, so let's just do that. So when we instead she ate our lucky numbers game were also passing a reference to a function which will allow it to update the chat windows on the client's slits, their crate, this particular function that we gonna pass the reference for? Okay. Said Dan Hands called public update check, but that just there before to start function. Okay, so this function is now being credit. So a game engine, We'll call this function here now. Server tears, which were just the start. I omit chap message. Whatever. The chat message. WAAS. Okay, so now let's go into a lucky numbers game and implement code that will use this new callback function. Okay, lucky numbers games. So that's create this one bothered property update check call back. Let's at it. To deconstruct us. So are constructed near Requires a value for the update check. Call back end here. We're just saying that it's a function that will return void. So the function expects a chat message. So your timing out game When we call this update, check callback function. We need to pass it a chat message. This is what we're doing here. We just described that that's what needs to be done. And dysfunction returns void. If you look here, just runs the function and doesn't attorney about you, we don't need it to its continue. So Okay, so now inside l body of air constructor. We will set the local private property update chat callback equals whatever function reference we passed in women, constructed it time and now in the game engine time A. Just down the Yeah, what we're doing here is when we have a new game. Will call this update chat callback with a chap message the message of a new game. Have you from the start logo, which is those emerges that we have been using and the type will be a game message, and what we'll do is when they get a game message on, the client will stall it differently than the chat messages coming from players. The next one. Well, this one o'clock is less than zero. We'll send a new Chet game closed. Very good. So control this Saif. Now down on the client. We also need to tell the client about this new property that's inside chat message, so client tears could be applying message or game message for that property there and here . When we get chat messages, depending on the type, we'll stall it differently, so down in unchecked message. Let's just replace that single line there with that. So if the chap message, start type, seacoast game message. We'll use a different class. He afloat lift, and the message will have a different class called game message rather than other message. And now to create the CSS style four game message tone index there. My message, I guess. The other message. My message and game message it pretty much identical. Except the color is different. But you can mess around with all these things After the video brief. Fresh to get the HTML. Okay, Refresh free Fresh green tiger on this side and purple fish on that side. A case of God. New message. Game closed and this is L. A Go. So the bronze game is closed. Gold game is closed and it brought scammers in new game. The silver game is closed. We can see what's happening now we can say hello and my own message. G teeth a green tiger. Hello And the other recipient on the other side Got my Hello. I'm gonna say hello back and okay, My back toe. It's a multi purpose chat window. Now, in case the next video, we'll extend the game mentioned further to actually produce a result and show that result down here on the game Penhall and will animate it to be pretty colors 31. Generate Result in the Game Engine: Okay, so now we've got these games that are doing all kinds of things now will implement some result functionality so that when the clock gets to zero will generate a result in more show that result down here. And then we can use that to a little place to my guess is and increase their school. In this video, I will add the result component and more make it enemy pretty colors. So to get started will add a new property to the game state a result. So server game, state tears. It's a game stateless did it there. Save that. And immediately we see little error. Downey Unlucky numbers down here saying Distort game state result is declared here so properly result is missing in type. That's top script doing that for us. Very good. Let's add some properties to lucky numbers games. So there's a private Barrymore, for Result. Down here will change the game logic slightly when game face equals two. If the clock eagles minus two will generate a new result, Okay, they stopped. Result meth dot floor methought random times 10 plus one. That's our random number. And then we'll also like we did in the last video will update the chat with the result, they start resolved and down here in Game State. Down the end, let's add this result. So a result, this'll not results. Nice. That's the seven out for the client that's at the result to the game stake in the client result number, but said this. Okay, so what this is doing when their game Clockers started, or the game clock equal situation minus five or just fade that result panel out. So it's not on all the time. You'll see that working once we we start and food down here when the clock is less than zero. If the game stake game clock equals minus two in the game, state results not equal to minus one, then will set the text of the compartment with Result value Game I. D. And were fading so soon. And we'll also sits defaults for when the document first loads. So what this is doing is adding a spinner class, which we haven't credit yet 28 to the result values for each game. So result value 012 Now you can use J query to add classes. Two elements with ideas. That's just a week unjust. You write that nice smile card, but I'm just showing you actually do enjoy Aquarius well and close as the specified classes to each element in the set of Mass Gentleman's and also will default. Each of the result alert panels to being hidden when the document Lloyds because their function seal will show them fighting. Okay, so let's look at the Hasty Mel. Now. Hasty Mel has a few new CSS classes as a result value with the font size in a Whitson text alignment. And we also have this spinner his little animation. So basically, when we refresh this, you'll say that the result will have a little spinning disc around it. And this ISTEA code that does that was to say, it's a star that doesn't may say Index that would just lay okay, so So she a little ring spinner, but four colors but animation. It takes 0.6 seconds to do one rotation and a runs infinite. And these with sources in this positioning. And now let's add a result give elements to our little game panels. Yeah, okay, So just after their shift, all after for men que result of that zero and result value. Zero. It's too the same thing down here. If the if the format, that's result that one result value one and result value to and that resulted to was overly too. So that's the alert panel Class Alert. This is Bootstrap and its alert info Roll Alert. These have pre defined bootstrap styles, and the role is alert. It's just less us to interact with these dues in a more extended way, such as this. Storm alert don't hide. Okay, so let's refresh all that and have a look. Cases refresh that bronze game game close Result Number eight, and we actually get in the chat as well. There was a light. So silver game game close result. One. A great result. One they will have do from results. We can see them. William in the next video will implement some buttons that will allow players to guess the number and a justice school 32. Add Guessing Buttons: in case and now will add some buttons we can use to. My guess is with that stays buttons down here and the first thing we should do is open. Our index dot haste to melon creates a new styles. So in index page Timo No guy. Let's go further down this one, for we have another animation. It was called glowing. We'll see where that is used. In a moment. I put that at the bottom like so and also here we have a Siris of buttons to add to our first game panel, which is dying. Panel zero. It's her down here to stopped were more screen name is shift off after former. Okay, so we have 10 buttons, one fresh number, and they're gonna style button success, which comes at his green. So and the i. D is 00 which means game I d. And the number 01 war words. It's zero based 01122334 And here we have a function on Klay. Clients of mid guess Game I day the number down here and have a good luck message. So when you submit a guess, a little good luck message appears. What a little crossed fingers symbol. Let's add the seven buttons to the other game panels as well. Okay, so the game, my day 111 in the number 123 in the submit button ideas 10 and the 3rd 1 for the last game . Okay, just after that. Shift out. If that's everything for index haste, email now Source. Client client ts private. In this round, it's a new private property inclined. So add that there, this is to track whether I play out for us. The Playa has actually mine guesses in each of these games that 01 and two. And this is a just internal property that we can use to decide what we do. Some things or not. Okay, lets down here in soccer on game states down here just after we display new game gets a lucky number. We'll get all the submit buttons and well said their property disabled equals force when the game closes, will disable or buttons. So basically what's going on here is is we get a new game. Well, just read naval the buttons again. We'll see that. Okay, sit down here in the next section where the clock has got to zero. We get all the sudden it buttons and we'll disable them. Set disabled equals true on all of them. 0 to 10 for each game I day. And a good luck message will also hide because I will say the Wen Wei submit a guest. Good luck message appears and also another one here way away are showing the result value and the alert. What we can also do is highlight the winning button. So the winning button, which will be submit button zero in whatever the game result. Waas minus modern memory was zero based. We'll sit US animation property being glowing, infinite and then just after that will set a time out. Four seconds where we will remove their animation. So glow for four seconds showing you that that was the correct number. We'll see that work excellent Down here, we need a function for confirmed guests. Hope what? That just there. What's happening is when you make a guess and you send it to the server, the server will send a confirmed guests back with the gang number, the guests, the number and your new score, which will be minus. Whatever the value is deducted for each guests for a game, we'll look at that in the moment we said in this round for the game. Idea goes true. Submit. Button will now be disabled secreting. Press a button once for every round, for example. You can press the button, but one only one surround otherwise would make much sense. A good luck message will display, and the school will update with that new school number there. We also need a sub MIT guests function because we credit all those buttons with click events. He requires a game I d on a number and it'll warm it. That summit guess to the server just to show the hasty Mel. So they go. Summit guests, summit guests sub make. Okay, So the next thing now to change the lucky numbers game we need to important a reference to the player object. Lucky numbers game. So just at the top here we'll create some new properties down here after is old, so we'll need a record. Each game will need a record of all the players, all their guesses, and we have a property called enter points, which basically age guests will subtract from your current school. So that values one, I guess you make will take one off your school. Must see that working. Okay, Now let's add these two to the constructor. Inter points and players. So when we construct a new lucky numbers game, we also have to tell it what it's well, how many points you're gonna need for guests and a reference to the playas object which is actually here on the server tears. So we have a global players object which is available to all games, and we're gonna tell we're gonna pass a reference to that to the lucky numbers game so that it can up that at school. Okay, so it's then populate those values once the constructor is called so and players equals players and into points into points. Okay, now, when a new game it has started will reset its local copy of guesses back to distant object because we keep a recordable guesses. Well, name that in the next video where we calculate the winners. Okay, So down here there is a function for summit guess, which will be called by servant tears describing the player socket and the number where we added to the guesses on we adjust the play a school, the sea just school function that you've got in player here down here pushed onto the guesses record. And if this is the first guess in this round, will also send a chat message describing that the screen name of this player is playing on this game as a top of game message kind. Return true summit guests and finally, server ts. We have to change how we. Instead, she ate now games because we don't have to pass in two extra values being one for him, much being one for how many points of costs to make a guest, which is one on this game. And we need to pass. In a reference to this thesis dot players on this silver game, I'm going to make it costs two points or every guess, and we're passing the stop players. And for the Gold Game, it costs 10 points, Fergus and the reference to the top players. There we go. They filled it down. Let's create a submit. Guess event. Okay, so on. Admit guests on the client. If the guesses within the tolerances will the stock games game I day summit guests, the Soccer I D. And the guests submit guests returns. Bullion returns. True returns True well, sock Intimate confirmed guests back to the client where the client will disable the button so we can say that again on client confirm. Guess we do these things. The submit button to say What is true? Good luck Message would display and way adjust the place. School presentation. Okay, that's good. That's view all that now in the clawing sale Looks okay, so we have our buttons. You in the game clock got to zero. So the buttons and now disabled and then winning button is now highlighted. The game has opened up against all the buttons, are unable again while on trial for 11 is now disabled. Three is disabled. Five has disabled 67 or miss down seven. I missed out this round, right was the winner, and every time I press a new guests, my school goes down minus one, and it is updated in the presentation here, and it's the same thing if I was to go into the Silver game. My school is also updated on this came panel so And it Guess on this game costs too points on the gold game before I make a guess. Because 10 points like that, I'm going to win on this round. I'm not gonna wait 25 seconds for, but we haven't yet Friday the winning the winning functions yet to to update our schools if we win yet, so we're never actually gonna win anything. These numbers are always gonna just go down anyway, to this the buttons and the various extra functionality that comes along with it. Okay, so they have a guy. Ex RAM will work on calculating winners and displaying that information as well, whether you won or lost. 33. Add Winnings Functionality: Okay, So now let's add all the functionality to calculate winnings and to manage its presentation case of first file index html right down the bottom. Here we have two extra look panels, winner alert and loser alert. They just thought the result of such pretty much identical except it just shows some different information. Eso copy that. That's part of the first game panel. Everything with Syria that said that to game Penhall zero. So down here, just in this class, Ro, we have the result. Will the zero winner alert zero and loser? Well, that's right. It's good in for game panel one. Simon Singh. A soul. That one winner. Let one loser a little one and for the lost one. Okay, that's everything for index heist email. So that next one client ts it's add the winners properties. So in Game State, we have two new properties for winners and whether the winners is calculated, I just feel when is when is calculated down here we have another property client. Alerted winners and losers is something we used to track whether we've actually shown the alert or no, this is so that we don't keep showing the load in the same ground. We only show once in around will reset it at the beginning of every round down He s This is where we doing it. Okay, so at the beginning of every new round will set this alerted winners losers. But this game I d equals false. The next one will also, after five seconds into a year round, we'll also just fade out the winners alerting those air alert if they're open and down here dysfunction. If the player was in around well, yeah, if the play was in the round and we haven't yet alerted the winners and losers and the game State has said that the winners have been calculated, we will. If my soccer I d happens to be in game state winners, then I'll despite the winner alert. Otherwise we'll see the loser, will it? And then we set dis alerted when it's losers for this game Monday, it was true. So the next time we get a game state and the clock is listed zero we don't re execute that section. Okay, down here on document. Ready? Well, just ensure that the winner and the loser alerts are disabled and That's it for client Tear . So save that the next one game state on a server. That's add those to the service copy of Game State. Okay, when is when is calculated? Now the lucky numbers game. It's create these extra private properties. Okay, so we have wind points. This is how much you win on around. If you guessed the correct number. This is an array of string of the winners, basically the soccer I days of the winners, what we put into this property and returns for the game state and whether or not we've already calculated the winners for this round. So we don't really do that kind of thing. If the clock was below zero and down here we have a new cool back. Now this callback will be used just toe resend, the place information back to the specific player. Basically, if we've win on amount, will adjust our points and then we'll descend a new play. It details back to the players soccer, so they will get their updated school instantly. Okay, so go. So in the constructor, let's at one for wind points. So now when we instead shade our lucky numbers game We also have to tell it. What are the winning points for this game? In the reference to the plate, details call back. Okay, so inside the constructor, this starts implied details. Callback equals simply. Did House call back Kaeser in the time on the game? Tommy here, when we reset around, will ensure that way. Set the winners and the winners calculated. So we don't have any winners in this new round. And when it's calculated it was false, It's a new condition down here when the game faces two was finished. Okay, so if the game clock equals minus three this time, so remember, we just did the minus two will calculate. The result will send the result off now on the next round. Game clock will be minus three, will calculate the winners depending on what the result was, and we'll get back that string array and for each of these soccer ideas, and that string array will adjust the players score by whatever the wind points is for this game. It could be anything you like, and then we'll send the play date. I'll speck to the play, and this is the player details call back we just set up earlier so we can see our game state. It's missing something. So is missing the following properties for type game state winners and was calculated to do that now. So I was just copy that line and ago. Now has winners and winners calculated at the end. It's a client. When I get that. Now, we need to create dysfunction for calculate winners. There we go. Excellent. And as you've seen with all the buttons, a player can have multiple guesses per around or per game. So for every player, its socket for every player soccer in this guesses in this Games guesses. And then, for every guess in this guesses for the players soccer i d. If the number equals one of those guesses, then will add the players suckered i d to this return String return. That's a calculate. Winners. Okay, so this winter Sequels calculate when it's and for each of those winners, we find we do those things again to save that. And now facility ISS. Let's update how we create these lucky numbers Games need to add two new properties servitia us because we're using typescript. We get all this little helpers to tell us certain problems, and the problem here is we need to sit the winning points now. And so on this bronze game, I'm going to say, If you win, you get 10 points. I'm going to say if you win on the silver game, you get 20 points and if you win on the gold game, you get 100 points way. Also need Teoh send off a reference to up same play details call back. So this send player details. Are we having crowded dysfunction unit? What? We'll do that sick. That's what the top script is telling us that the idea is telling us that you can't find simply a detail. So let's do that now. Okay? So sin play details down here and we have no problems. Let's test all that out in case we have our new lucky numbers games. Let's create some guesses. So great. Five guesses my scores monitor, but I got three high win. You guessed the correct number. So my score has now increased by 10 on da Troy 78 or ignorant in good luck, it says I lost. You lose so lost more my little guests. I lost my points due to my wrong guesses. Destroy it a gold game, but 20 seconds left on the clock. I'm gonna make a guess on all of them And he shall make a guess. Hope go down by 10 points. Now I'm guaranteed to win. But money gonna win 100 Which is exactly how much I might in guesses. 321 Game closed the game closed. Result five. I win, I guessed. Correct number, But I 100 some back to where I just started from. Let's try something else. Let's try the odd numbers. Uh, the NYSE. Anyway, that's the lucky numbers games. Congratulations on writing the lucky numbers game. Sure, you have many ways you might want to improve that. I've got a few suggestions down here on the sex for tasks. Much is. You might want to add the winning amount to the Winners Alert panel. It might wanna add with screen names to the chat window alongside the result declaration. You might want to make the game names national Nevin game panels dynamic from the game states rather than hard coded Mr Share that Siddiq that's hard coated in the hay smells so is that we have that in our game states on our service so wicked if you just right those dynamically And rather than creating these three panels individually and Haitian Mel, we could also write those dynamically using Jake weary. You could change the styles. You could change the names. You wouldn't have to use the whole nine create images instead of using emojis. You can even add new buttons saying Bill, Odd numbers, but all even numbers, but numbers higher than in the top half bit numbers in the lower half. You could even change hell this now all these animations work and even change the order of the order of animations. You could even well, anyway, there's a 1,000,000 things you can do with it. I think by this time you have seen a lot of how you might want to use Socket Io to create a multiplayer game and the value off typing that in typescript 34. Deploying to Production: Okay, so this is how many games project Fully working now weaken. My guess is we can check making get the result, and we can play with other people as well. But there is one problem, and that is said it's running on our local server or development environment in the next few videos will put this onto a live production server on the Internet. Okay, so those steps are so well, credits start script in the package, Jason, Will Provisional Cloud server do we can use for production? That'll be a lock, sir. Would employ our files to the server. We'll start the games on the server and then we'll set up in the inch. Next proxy will pointed of May name and then went still in SSL certificate toe ride. The end out typescript. Many games that we've credit in this course will be officially on the Internet for the public to see. Okay, let's get started 35. Create the Start Script: Okay, so the first bit create the start script in the Peggy's Jason. So when running on production, we don't need to use note one concurrently or have tear see watching our source code for any changes. Typescript has component according to job script compatible for the browser and no Js. So we also don't need types of diver. So what, we'll do you credit? New script Inside out package Jason for start. But it's just that line there. Okay, so in package Jason, put a comma after that. Then start no dissed Server Server Jr's. This is just a very much simplified version off the death, except we're not concurrently starting up to you see toe watch the server and the client scripts. And we're not using node Modern to monitor for any changes to server Js here. We're just using node straight away, and we're going to service server Js and that's at night. Jay is civil, though have written down here. Okay, so Becky's Jason saved that. Now stop the development version now to stop this one. What we do is type in PM stop. Okay, so that's listening. On port 3000 I refresh. We go exactly the same thing The differences were not using concurrently to start to tear See processes which are monitoring the typescript files were not using node one to serve the server Js in the morning will re start the server each time server Js has been changed . We're just running it directly night. So we're not using twice script at all anymore and we're not monitoring for in changes. So if I make any changes at the source code, they won't be reflected here. So this is how will start the production. So because the production service not a development server on the development civil will start using the Dave option here now, also in PM start, you're not that I didn't write in PM runs start. I could have done that in PM Start is just in a liest being. PM Run start in PM start is just how you see it commonly on the Internet you could talk in PM round. Start if you want such you OK, so other aliases you might see occasionally are in PM test. That's an idea of MBM run test. That's a test there and P m noticed. I go notice space afford. There is notice. Miss Of what? And in pm stop. Okay. The next video, we'll get ourselves a live server. 36. Provision a Cloud Server for Production: Okay, so now let's get ourselves a live server, a server that we can use for production. It's gonna be a lilacs server. I'm gonna use who bun to 18.4 lt years. That means long term support. That's very common these days to get your service from cloud providers. They're very cheap in a lot of problems have been solved when it comes to creating data centers and all the things you need to do. So it's just much easier to use the cloud provider. So examples are JCP is your aws head snob than many, many more. There's loads of them now. So much competition. I use digital ation and if used my link, which is just down here as well. You get $50 for 30 days credit. So you condone create a whole lot of services that, if you want, you can make as many mistakes as you like and you can delete them to start again. And if you use the link the moment you actually get, let's have a look. You actually get $100 for 60 days from a friend, so complete registration gets started to get your $100 worth of service for 60 days. Now, the sir, I'm gonna show you $25 a month so well for $50. But the days you get 10 of those so assed plenty. And for $100 for 60 days, you can actually have 20th those for two months. But anyway, I'll show you how to build one. And you can experiment with that as much as you like. Okay, so I've already registered with digital election. I'm gonna credit seven now. Okay, so I've logged into digital ation. Now I'm gonna create myself a civil. So happy Create credit droplet. Okay, you Bantu? I can use different operating systems of our like, but I'm going to use it 1 to 18.4. LTs standard server is gonna be the cheapest $5 a month. Get one gig CPU, 25 gigs a disk, Asus Day and one doesn't get about to transfer. This is plenty. These are the only service I ever use. Are you all kinds of things? You can choose whichever region you want on normally. Use Amsterdam And if you have ssh keys, I recommend doing that. But don't worry. Use a password if you have never done this before, So credit root password to access the jobless. I want you to credit password that only you can use. Okay, So Okay, so she's the host name. This could be anything. You look, I'm gonna call it many games. Can you call it many games if you look OK now? Just Greg droplet. And this was just all the minimum of sittings. Did Ugo to get this to work? Okay, in a moment, you will give us no i p address. That's why Pay dressed am or used in a moment to copy that and just put it somewhere. And there's nothing on our server right now. If we were to talk that i p and nothing would happen not getting anything, so the next few days will set it up. Excellent. 37. Deploy Files to the Server: Okay, so let's now deploy our files to the live server. Before we do that, we're gonna need to be out of connector alive. Server and on Windows will use a program called Party and Party is an ssh client. It's a site. Remains secure show so you can download party from this website. Okay, download party. And I want 64 bit windows 10. So I'm going to use that installer there. Bms I'm case the wife installed party already, and now I'm going to set up a connection to a new server to grab that I pay address. This is the I P address I've got right now. Yours will be different. Name it. Whatever you want. Many games is a good example. And press save. So you now have an option there. So many games, and you can load that. Open that, and then you get your prompt toe logging. So log in as root. And the password is whatever you put into digital ation. So Okay, so I'm logged into my brain. You serve, okay. And there it is. Okay. And we can see that it works so of ssh onto else server. The first thing to do is to run pseudo ap ti update so that we gotto up today a list of all the latest packages because we're going to install a few packages in a moment. Okay. Pseudo ap ti update. Very good. Never gonna copy out many games Project using sftp. And that is secure file transfer protocol. In order to copy the files, we have many options, but on Windows Easiest is to use a program called Win SCP. So download win air seeping download now win SCP, I have win SCP already and stop. So I'm going to create a new site in the host name. Put our I P address and the use name is route. Now don't put a password here. Just type it at the prompt. So press save. We can call it whatever we like. I'm getting a bullet. Many games. This is just a This is the site name that will show up here. There we go in this many games now weaken. Just double click or press Logan, we don't type password. Okay, so now that we've logged on to the file system of our server just will go down one level, get into here Vile in here will create a new photo called www the re W w. Okay, and go into that. And this is where we're gonna copy out many games, falls so will create another father. I'm gonna call it many games telling you folder many gangs. Very good. There's nothing in there right now. Now copy your project into the new mini games folder on the left Here, navigate to your project folder and the falls that we want. Our just pack is Jason End ist So what we need Because we're not running node one concurrently when I, using type script on the server were just gonna run straight away Server Js, which will serve client and index and not our session weaken verified. That is it. Spa citi dot thought CD CD www ls that is just like typing de ir and Windows. Ellis. Any names CD? Many games, Ellis again. You see, there's a dist photo with the package shows. If we want to look at that package, Jason, here we can say cap package, stop Jason and we can see let us stay in a cell. And there's a start script that we just create it. Okay, so now next bit. That's install in PM. Let's see if we have NPM first. We're very unlikely to in PM hyphen V. Now it's not so wants us to install it. So normally destroyed pseudo a p t install in him. Okay, Press? Well, yes. Is they fault? Okay, that's done. We can write in PM by from the vegan. There we go. We have in PM's 3.5 point two. Excellent. Okay. Brilliant to see the version. Number displayed in the next video will actually start it. 38. Start the Games on the server: Okay, so now we're going to start. The game is won out. Brand new server. So let's never get to the photo, which I've already done. I'm here and I can see it written down here that I'm in the photo. Another thing you can do if you don't actually see that written taken right P W d It will just tell you which followed that you're in and we're just do ls making civica package dot Jason. That means we can now run NPM in store. Now that will read the Pakis, Jason, and install the dependencies in our pockets. Jason, set up a project for us. Okay. Excellent falls to see what that did for Just go into the mini games photo here and just refresh that is credit a note modules, photo or us here. Very good. And in there, we'll find out bootstraps, socket, io, Other things that we've imported earlier on in the course NPM start. That's the script. We just credit a little while ago. So inside of a cessation decision here in PM, start server listening on port 3000. Okay, Very good. Weaken our visit there on the internet, so open a browser and visit that I p colon 3000. Http. Your I p address calling three sales Very good. That's on the Internet. So lucky numbers came. You can now share that with your friends if you want to. And your friends could play talking. I panetta mistaking brazo giggle crime I got We're playing the same game 321 Name is over. Been closed. I couldn't Now we can chet like sire, and it works. Brilliant. Okay, now something else to show you. We've started this in our main ssh decision, and it's running. I can't type anymore commands into this currently. Ssh! Decision. He forced to close this party like that that has broken my life website because the main session that was hosting that NPM start has now closed. So to solve that problem, well, use another program called Screen So loved back into your position again. A game's route. And what we'll do is we is a program called screen. So s C r a. N like So you read that if you like press space or enter to end Now, this is credit a second session inside our main session. And so when I close my main session, this intercession will still be active. That's what screen is good for, keeping things running in the background even when you close your main session. So in this second position here, way can start L many games. So lets navigate to the folder so seedy. Ah, www. Many games like so and then do in PMS start a case that started now in the screen session. So if I press control a and then control D, I can exit the screen position, control a control D, and that puts me back into the main sessions. I've detached now on the screen session, and that is still running. It also type H Top like this and scroll down to the bottom. We can see that we have some node processes running in the background. This is our node server running in the screen. Session control. See to quit that Now it's free. Fresh that see it working and it's working have also exit this man session, which I can either press by pressing X like that or type exit like that. Impress refresh on the browser. The many games is still running. That's good. Now, if I was to come back into party again and re logging again. Route. Okay, I can read. Enter. That's transition by typing screen hyphen. Are we going on back into that screen session where I was before I could exit again. Go control a control D an update touched. Now I can start another screen position as well and which we don't need to do in this course. But I'll show to you anyway, because screen is quite useful. I'm just gonna start another screen session here, Chris. Enter to end, and I'm just gonna type anything like Ellis. Okay, that's just something. They're press control a day to accept that. Okay, Now, if I type screen iPhone are now because I have several screen sessions, I get a choice. So I can either join the 1st 1 which was down here 8993 or 9147 So I want to join that many games that we started the first time. 8993 Okay, there we go. So I d screen are again to list. Um, and I conjoined 9147 Okay. And that's that one. And I if I typed exit in that that would then remove my 147 so screen. Ah, now, since there's only one screen session running takes me straight to the only one that's running their control a day to detach from the screen. So stays running in the background. Which also means that if I was to close, my main is this age session and refresh the browser that many games is still actually running on the server. That's good. That's all that screen. So it's an important part to be aware off now when looking at the euro, you can see here that it's not secure. It's just a warning. Anyway, The next few videos will make this even better. I make that look professional. Okay, excellent. 39. Install Nginx Proxy: Okay, so, looking at our current many games, it's not secure. Choosing I p address and it's using report, we can modify our server code here and server ts What? We can use a different port number. Army can make a make a user specific domain name. And we can also tell it which certificates to use inside our service script here. But the most common way people manage these things now is to use a proxy, and the most common proxy you'll come across is engine X ascends next here. So it's a Web server are making use it to proxy. To our know, Jay is suitable, but rule bind L SSL certificate and the main aim at the proxy level So we can have one proxy managing many websites on a single server and you configure the domain names and SSL certificates or in that single proxy. So we should do is check in Genetics isn't store okay? And the next hyphen V something. Okay, that's installing suitor IBT install and next. Yes, this chicken's version. Now I get 1.4 game 0.0. That's very good. This chick, its status pseudo service and UNIX status. Okay, active Running now. Press control, See to Exeter. Now, on a server, we have two sites being served. There is the one that we've set up through Nigeria's. And then there's the one that Engine X. Sit up. This just on day four. Poor lady. Okay, welcome to in genetics. We're now gonna Mike engine ICS 0.2 l many games, servant. Okay, so let's open up with their CP again and navigate to this folder E T. C in genetics sites enabled. So E t c engine X, this sites enabled. And this here is a symbol ing to a file that exists in sites available. So what we'll do is we'll delayed this default here the late okay, and we'll create a new file in that photo, and I'm gonna call it many games. You can call it anything you like. So on. Ssh. Let's CD to that 14 80 c engine X sites enabled. Let's create a new foil pseudo in an r. Many games stuck. I can call it anything I like. I could even call it the name of my domain names. So, for example, when the main aim is gonna be called, many names that Sean was here dot com dot com Whatever you like, but many games dot com will also work presente. This is like a text that it up for long walks inside that that's at this script. Listen, I d proxy pass. Okay. Right. Click and video server. Listen, 80. That's IPTV version for that's the I P V. Version six location. Anything that's gonna go to port 80 we're gonna pass it to internally to 1 27 001 called three citizen. Okay, so Pro X takes it them? Yes, to save it. Okay. Ls instead, many games start cough. Because to refresh this, we go to many games. Took off. Now we need to restart inch next proxy. A pseudo servers engine X restart. Okay, we can Chickens status. So we didn't break anything. It's active running. Chris Control. See, now here we removed this sport number. The case taking us to our lucky games. We no longer need to talk to poor number. I guess we're gonna use a an I p address directly. Now. That's a little bit nicer. If you want to pass it on to friends. This is worth noting. This is not perfect yet. If we press if 12 and we look at network here and just refresh that what we're getting down here is polling the left here. So this is not really using a Web soccer, which stays connected all the time. While this works, this is a full back for older browsers. For an older hey, TTP Standard will modify our proxy to support Hasty to be version 1.1 down here in East Second Script here I'm creating a second location for soccer Io. We looked at this earlier on in the course, but make it select where we're gonna get out socket io library from. And for this particular path, we're going to say Use hasty DB version 1.1 and we'll add days extra head upgrade properties and will proxy pass onto slash soccer. Doyle. Let's replace a script with this script here. So a pseudo nano that script against Sudan and many I'm start dot com in tow. Let's delayed all that by pressing control K different times. Scrub this script and paste that says the same as before. Essentially, that's from before, and this is the extra section they control X Yes. Restart the proxy. Actually, before we restart the proxy, we also have an option to test their configuration. And that is n jinx. T like so syntax is Okay, Okay. So let's restart the proxy. A guy making double chickens status. Very good control. See, now, if we were to refresh that we didn't get the Web soccer transport, it's no longer polling Post Post Post until they can figure out to use the Web socket kind of sister detail that it's not immediately visible when viewing the game in the browser. No need something to look out for when you're viewing your socket by our application by are a proxy. Okay, now, another thing we can do is Port 3000 is still open. It doesn't matter home, but just to keep it nice and tidy will block port three cells instead of the only way you can enter this game is report 80 which is the default. I don't have to write Port 80 because that's just a default. Okay, so we'll use a program called I P tables. I P tables is a firewall. So Bitpay tables l that tells us which firewall rules we have active right now. We don't have any pets Blocked. Port 37 down here. I'm going to, except port 3000 for local host only. That's because their proxy is doing a proxy pass internally to pour 3000. Thank you. And then going to drop everything else on Port 3000. So that's there. That's the word drop. Just there would repped and toe. And now we can list that rule I p tables, hyphen. Capitol Hill, it says, will accept local host to port 3000 but anywhere else will just drop it. Okay, Now, just refresh that case still works. So the engine X proxies still able to internally redirect to bought 3000 getting the proxy pass. If I was to use sport 3000 from the outside world, we're gonna get a time out. That's another little detail that you condone. Dio like your application a little more professional. Okay, that's time down. So that's another good thing that you can do without using a proxy redirecting internally on the server to port 3000. Okay, Now, in the next video, we'll pointed to my name to that 40. Point a Domain Name: OK, so that's our game. And we can get to it using I pay address just to prove that. There you go, just my wipe a dress. We can now assign a domain name for that. I pay address. I already have several domain names, so I could decided. Sub domain. I'm gonna add a sub domain. Many games start sure marcie dot com That's gonna point to that I p address. Now there are many domain name providers in the world. What you'll need to do is if you don't have a domain, either by one, and pointed that I p address or if you have I did my name already. You can credit, subbed a mine and also pointed that I paid rece. And what you'll be doing is Craig and a name record I name record, which will be like any games dot com a name to their I p address. That's essentially what you're doing in your domain name provider, so I've already done that. So I've created a new sub domain called Many Games for my domain short Muzi dot com. That's in a name record points that I p address it hasn't yet propagated his website that I can use toe monitor its propagation. So many, many games that shown was here dot com. Okay, I'm looking for a name. Records. Which one? 42? It just so happens that that propagated quite quickly for May. Now it can take several hours or domain name to propagate. Be prepared for that to maybe take a little bit of time. But that's probably getting nice and quick, so I should be out of this now. Go straight away. Any games dot com has taken me straight there. That was very quick. Normally, it takes a few hours for a domain name to propagate. Now, at the moment, I don't have any real good answers for getting into May name if you don't really have one. Other than perhaps name cheap dot com, you can try something like my many games server dot Exe wise ID. Okay, so exploited domains of currently quite trooper 0.81 or pounds a year. After that, it's a little more expensive. We don't have to renew it if you don't want toe the moment I can see. That's probably that's a good option for you to use an exquisite domain through name sheep . You want something really super cheap, but works and you can sit a name records using name cheap and you can create sub domains using night in shape as well. The case that works Okay. Says to one problem left says it's not secure. So what we're gonna do the next video is give it an SSL certificate. Excellent. 41. Add SSL: Okay, so now let's fix this problem. Let's make it secure by using SSL so that our whole many games project, even the soccer, all the messages will be transferred. Cross the network using SSL to get our SSL certificate. I'm going to use certain body. We can get free SSL certificates from them as long as we have a domain name and your domain name has propagated across the Internet, it's mine has because of many games. Start sure, once he dot com works now and they could see before that had propagated to all countries. Okay, so ssh onto your server and I'm still in these sites enabled for That's okay, but the mini games can't just here. We'll edit that in a moment. The first what we'll do is install sert bought on our server. But to do that pseudo a p t install said but Okay, yes. Okay, so now we'll type pseudo certain but certain only Okay is giving us two options. One. Spin up a temporary web server or to place falls in the Webroot directory on their application. Number one will require us to stop the inch next over first because port 80 is already in use and it won't be able to do number one or number two. We're number two. You have to tell the location of L Webroot. If we look here on one s a p again, this is our many games folder If we get a dist client Yeah, this is the Webroot off our application. This is what? And no Js is serving this index haste to males in the Webroot here. So you have to give it that folder location there. So I right. Click that and just press copy path to clipboard just for now, Okay? Back into its S H. I select two. Okay, So placed end to the demining will bay many games that Sean was here dot com Now, remember that has propagated across internet Now, Now we have to tell it, D webroot. So if I just right click Vaart www Many gay missed East client. It's going to save a fall into that web root and try and serve it throughout application there. Okay, so congratulations. Your certificate and chain have been saved at e t. C. Let's encrypt live many games. Start, show Macedo come full chained up PM and also the proof Kate R. P. M. Was gonna have a look at a T c e T c. Let's encrypt Have to refresh it can sit e T. C. Let's encrypt live many games. Wants you to come it, sir. Chain for chain proof K. That's all the false. That's it, boys. Credit for us, sir. Now scroll down a little bit and we should copy this script. So I copy that and will replace that many games. Scripts, pseudo. You know, many games start cough. So press control. K two removal that right click now scroll upwards. OK, so we're now listening on Port 443 Which is the default is his cell port. We have SSO on a server nine. We were right as whatever. We chai's many games. Sean was here dot com. Let's encrypt saved it to in a guy and the guy stuck on us. Yeah dot com Like so proof. Okay. And actually, the 1st 1 it was called full chain dot PM So, like news. Full chain thought pH. Let's just put a semi colon at the end. Very good. Okay, so this is the same as before this next one proxy pass is the same as before, but down here on poor 80 we now have a redirect a 301 redirect to they hate https version off many games and whatever the Jarawas Hey, control X. Yes, that's chick the config. Syntax is successful. Let's restart Engine X double check its status. Well, good control C and my browser has auto refreshed to show a certificate. And it's https. Refresh, refresh. We go a browser. It's true that in another, what else is there? Go straight away. It's gonna certificate. Connection is secure. That's brilliant. Now, if I was sister type many games by itself without the hasty TPS into a browser. Auto redirects to the hasty TBS version. That's because we did this 301 redirect down here for poor 80. That said, you can eat. I just pass it to your friends just like that s a visit that in a brother, you don't have to say Visit Haiti. TPS consular slash Many games You could just say Isn't that strong? And Firefox and it works Brilliant. That's crime. And this is a new edge browser. Okay, let's say that's deploying your mini game, this project to a production server. Just just put the RC on top. Excellent