SocketIO and TypeScript

The course is in 5 main sections,

1. Set up the Development Environment

2. Create a Socket.IO boilerplate project - This section is optional, but advisable. This will give you a very good understanding of the aspects involved in creating a brand-new Socket.IO application from scratch.

3. Install Socket.IO Course Boilerplate - This section is also optional, but is useful in case you by-passed section 2, or you have finished the course, and you want a familiar template project that you can start from.

4. Learn all about the many aspects of Socket.IO from the core up to using it in more advanced examples and involving other third party libraries.

5. Deploying to Production - We will look at several options that you have for hosting your own Socket.IO projects on the internet.

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

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

2. NodeJS : https://nodejs.org/

Over the next few lessons, we will set up the course boilerplate.

We are going to create, compile and start a simple Socket.IO server.

We can simplify the transpiling process by using a tsconfig.json

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.

In this lesson, I show how to use TSC in watch mode, to create the ./dist/client.js script from the client TypeScript source code.

Note that this version will use an importmap to tell the browser where it can find the socket.io-client library when it encounters it in the ES6 import statement present in the transpiled client.js.

In this lesson, I show how to use Webpack, to create the ./dist/bundle.js script from the client TypeScript source code.

This solution is best when your client application becomes,

• larger and more sophisticated,

• references one or more external JavaScript modules,

• you want to bundle all the client scripts into one,

• benefit from using HMR while developing,

• benefit from tree shaking for modules that support it.

This section is optional. If you completed all the sections before this, then you already have the project created. This boilerplate is useful if you have chosen to bypass all the preceding sections, or you got stuck, or you have already finished the course, and you would like to use a Three.js TypeScript project template that you are familiar with.

Common Use Cases and there Relevant Events and Methods

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

When a new socket object is created from a connection server side, we can use that socket anytime, to send a message to the connected client.

Broadcast a message to all other connected sockets except for itself. Used most often after a socket level event occurs. E.g., a new message has arrived from an existing client socket, and you want to relay it onto all the other clients.

Emit a message to all connected sockets.

Used most often when a server level event occurs. E.g., a timer event occurred, and you want to send a message to all clients.

Using IO to emit a message to a specific socket ID.

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

It is also possible, for the client to initiate a message to the server at any time. In this example, we will prompt the client for a username, and then pass it to the server.

Creating a simple chat client and server.

A basic collaborative painting example.

Implementing multiplayer functionality into a threejs third person view application.

It is possible to have one socket server, and have several types of clients connect to it.

To separate command listeners for different types of applications, connecting to the one socket server, you can use namespaces.

Note that the default namespace when connecting to a Socket.IO server will be "/".

const socket = io()

Is the same as,

const socket = io('/')

If you wanted the one socket server, to deliver random numbers, and also run the collaboration painter program, then the namespaces you could set up may be rng and colabPainter.

We will now deploy one of the examples to a production server on the internet.

Steps are,

• Set up the Webpack Production Script

• Provision a Cloud Server for Production

• Deploy Files to the Server

• Start the Example on the server

• Set up an Nginx Proxy

• Set up and Point a Domain Name

• Install an SSL certificate

At the end, our example code, developed using TypeScript, will be officially on the internet for the public to see.

We have been using the webpack.dev.js file during each lesson so far.

The Webpack-Dev-Server is dynamically generating a bundle.js at runtime for us that is also running in HMR mode.

This bundle.js is generated fast, and we can preview it right away in the browser. However, it is a very large file in comparison to a production specific version of bundle.js.

We will use Webpack to generate the production specific version of bundle.js.

The production build won't include the extra code used by the HMR option since we won't be developing directly in our production environment.

Now, while the production version of bundle.js is much smaller, it does take quite a lot longer to generate, so it is not as beneficial to use it in development since you will need to wait some extra time between each change before you can preview it.

The production version of bundle.js will also be saved as a new file directly to the file system, so then we can copy it manually later to our own production web servers.

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

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.

Navigate into the folder that contains the package.json

$ cd /var/www/socketio-example

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

$ npm install --omit=dev

Now, you can start the Mini Games server.

$ npm start

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

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.

I have a domain already, and I can add subdomains to it, so I will create a new subdomain, socketio-example.sbcode.net

In my domain name provider, I will create a new A name record called socketio-example for my main domain sbcode.net that points to the IP address of the new server.

Let's make http://socketio-example.your-domain.tld have an SSL certificate and redirect all HTTP traffic to HTTPS