Socket.IO and TypeScript
4.5 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
81 students enrolled

Socket.IO and TypeScript

Learn Socket.IO, TypeScript and NodeJS To Create Multiplayer Realtime Interactive Content for the Web
Bestseller
4.5 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
81 students enrolled
Created by Sean Bradley
Last updated 4/2020
English
English
Current price: $59.99 Original price: $99.99 Discount: 40% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • TypeScript Annotations, Types, Interfaces, Classes
  • TSC and tsconfig for browsers and NodeJS environments
  • Setup NodeMon and Concurrently
  • NPM, NodeJS and package json
  • Understand SocketIO communications between the Server and Clients while writing it all in TypeScript
  • Build an example multiplayer, realtime mini game along with a chat component that allows players to guess the lucky numbner and win/lose points accordingly
  • You'll get exposure to Bootstrap, jQuery, HTML and CSS animations
  • Learn about Express and serving static content through NodeJS
  • Learn how to build robust and interactive applications using TypeScript and SocketIO
  • Provision and Deploy to a cloud server, Setup Nginx proxy, Point a Domain Name and Add SSL
Requirements
  • Desire to code games and interactive content
  • Access to a PC, Mac or Linux with ability to install software such as VSCode, Git and NodeJS
Description

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

At the start of the course, there is a TypeScript crash 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 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.

Who this course is for:
  • Beginner Coders
  • People interested in SocketIO and TypeScript
  • People interested in creating real-time interactive multiplayer games
Course content
Expand 40 lectures 03:32:18
+ Introduction
40 lectures 03:32:18

To create a development environment like mine, install these packages.

  1. VSCode : https://code.visualstudio.com/

  2. Git for Windows : https://gitforwindows.org/

  3. NodeJS : https://nodejs.org/en/download/

Preview 02:05

Install TypeScript globally

$ npm install -g typescript

And confirm which version is installed

$ tsc -v

Install TypeScript
01:41

We will  create our first typescript file and name it foo.js

We can run this file directly in Nodejs or include it in a web page, and it will run inside the browser. But it isn't typescript.

$ node foo.js

Rename the foo.js to foo.ts

We can then compile it

$ tsc foo.ts

It will create a JavaScript compilation of the file, that we can also run in NodeJS

$ node foo.js





Preview 05:28

We learn about Type Annotations on TypeScript

Type Annotations
04:21

We learn about Interfaces in TypeScript

Interfaces
07:43

We learn about Classes in TypeScript

Classes
04:16

So far, all our TypeScript files were compiled to run in NodeJS, in this lecture I will modify it slightly to run in the browser.

Run it in the Browser
01:45

It's now time to learn about Socket.IO.

We now create the base folder structure considering our source and distribution server and client components.

Create the Socket IO Project
03:54

Create Socket Server Script, Install Dependencies and Types.

Install Types for Nodejs

$ npm install @types/node

Install SocketIO

$ npm install socket.io

Install Types for SocketIO

$ npm install @types/socket.io

Install Dependencies and Types
03:48

We now will look at the differences of manually compiling TypeScript files with option switches, versus using a tsconfig.json file.

Compile, Run and Setup tsconfig.json
05:12

Manually recompiling and restarting the NodeJS server upon each change to the code can become tedious. So we look at the option of automating the recompilation and server restarting using tsc watch option, nodemon and concurrently.

Preview 06:16

Now we create a socket.io client using basic HTML, and serve it using NodeJS express. We also install express types, so that we have intellisence in the IDE.

Create the SocketIO Client
09:27

We convert our basic HTML clients JavaScript to TypeScript, and setup auto compilation of it like we did earlier  with the server component.

Use TypeScript to Generate Client JavaScript
03:46

We look at server side Socket.IO connection and disconnection events and see how we can utilise them.

Server Connection and Disconnect Events
03:07

We look at server side, socket emit.

Server Socket Emit
04:26

We look at server side socket broadcast were we broadcast a message to all other connected sockets except for itself. Used most often after a socket level event occurs, eg, a new message arrived on an existing client socket.

Server Socket Broadcast
01:44

Emit a message to all connected sockets. Used most often when a server level event occurs, eg, a timer event occurred and you want to send a message to all clients.

Server IO Emit
03:49

Emitting a message to a specific socket id.

Server Emit to Specific Socket
05:16

We now look at the client side connect and disconnect events.

Client Connect and Disconnect Events
04:37

Emitting a message to the server.

Client Emit
05:57

We will now build a sample Mini Games server and client below using all of the things we've covered so far.

Preview 01:56

We will use Bootstrap to help with the client interface layout, so we install jQuery and Bootstrap.

Install Bootstrap
06:49

We setup the initial HTML layout with the Bootstrap classes.

Setup Initial HTML Layout
03:43

We add custom CSS to extend our design.

Add Custom CSS
05:31

We begin adding basic chat functionality so that connected game clients can communicate with each other.

Add Chat Functionality
09:59

We create functionality to auto assign random screen names to clients so that they don't need to enter personal information in order to play.

Add Screen Name Functionality
05:50

We now create out Player class, that incorporates the screenname type, score property and methods to manage the player object.

Create a Player Object and Score Property
06:21

It's now time to build a basic game engine, first with a timer that counts down and resets at the end of the round.

Build the Basic Game Engine
11:28

The game events for each game, can also be pushed to the chat window, so we do it.

Push Game Events to Chat
06:15

We extend the game engine, by adding a randomised result at the end of the round and notifying the game clients.

Generate Result in the Game Engine
06:35

We add buttons which allow the players to guess which number is going to come next. Each guess will subtract from the players current score.

Add Guessing Buttons
11:45

And finally, we add winners functionality to notify the players whether they guessed correctly or failed, and adjust the players score accordingly.

Add Winnings Functionality
12:12

We will now deploy our game to a production server on the internet.

Steps are,

  • Create the Start Script in the package.json

  • Provision a Cloud Server for Production

  • Deploy Files to the Server

  • Start the Games on the server

  • Set up an Nginx Proxy

  • Set up and Point a Domain Name

  • Install an SSL certificate

At the end, our Socket.IO Mini Games, developed using TypeScript, will be officially on the internet for the public to see.

Deploying to Production
00:52

When running on production, we don't need to use nodemon, concurrently or have TSC watching our source code for any changes we make to the files.

TypeScript has already compiled our code into JavaScript compatible for the browser and NodeJS. So we also don't need TypeScript to be installed on production.

So,

We can create a more simplified starting script that will just start the main server.js in NodeJS.

Create the Start Script
02:46

I want a publicly accessible server on the internet so that I can share my game with my friends.

I will use a Linux server with the Ubuntu 18.04 LTS operating system and It will be setup using Digital Ocean (FREE $50 - 30 Day Credit) as the cloud provider.

We could get an internet connected server from many different cloud providers, such as GCP, Azure, AWS, Hetzner, and many many more.

On Digital Ocean, I will use choose the $5 a month Standard Ubuntu 18.04 64 bit LTS.

If you register using my link https://m.do.co/c/23d277be9014, you will get $50 worth of Credit for 30 days, and often the deal can be even better. So be sure to check just in case.

Provision a Cloud Server for Production
03:05

We will connect to our server using Putty SSH, and deploy the files to our server using WinSCP SFTP.
We also install NPM on our server.

Deploy Files to the Server
04:32

Navigate into the folder that contains the package.json

$ cd /var/www/minigames


Now, install the packages from the package.json by using the command,

$ npm install


Now, you can start the Mini Games server.

$ npm start


Now open a browser and visit http://[your ip address]:3000

Start the Games on the server
06:16

I also want to point a domain name and an SSL certificate to the games server. We can add settings inside our server.js which is being run by NodeJS to manage this, but it is very common to use a proxy instead for this purpose. We can use Nginx. Nginx will be able to manage proxying for all your domain names and SSL certificates for this server if you had several websites running on it.

Install Nginx Proxy
08:44

I have a domain already, and I can add subdomains to it, so I will create a new subdomain, minigames.your-domain.tld

In my domain name provider, I will create a new A name record called minigames for my main domain your-domain.tld that points to the IP address of the new server.

Give it some time to propagate, and then visit

http://minigames.your-domain.tld

Point a Domain Name
02:30

We will set up SSL for http://minigames.your-domain.tld and repoint all incoming HTTP traffic to HTTPS.

Your Socket.IO Mini Games, developed using TypeScript, is now officially on the internet for the public to see.

Add SSL
06:31