Skip to content

Build an Example Mini Game

Video Lecture

Build an Example Mini Game Build an Example Mini Game Build an Example Mini Game

Description

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

img/minigame-example.jpg

Before we start, ensure your folder structure is the same as below,

1
2
3
4
5
6
7
|-- tssocktutorial
    |-- dist
        |-- client
        |-- server
    |-- src
        |-- client
        |-- server

and your server.ts, client.ts, luckyNumbersGame.ts, tsconfigs, html and package.json scripts are also identical to below.

Note

A pre built zip file containing the complete code and structure outlined in this page can be downloaded from the course resources on Skillshare or Udemy

src/client/client.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
class Client {
    private socket: SocketIOClient.Socket

    constructor() {
        this.socket = io();

        this.socket.on("connect", function () {
            console.log("connect")
        })

        this.socket.on("disconnect", function (message: any) {
            console.log("disconnect " + message)
            location.reload();
        })
    }
}

const client = new Client();

src/client/tsconfig.json

Note

In the videos i've targeted ES3 and module commonjs for the browser. I now recommend using the below client tsconfig.json that targets ES6 and ES6 modules.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "../../dist/client/",
        "baseUrl": ".",
        "paths": {},
        "moduleResolution": "node",
        "strict": true
    },
    "include": [
        "**/*.ts"
    ]
  }

src/server/server.ts

Note

In the video, my server.ts is using Socket.IO 2.3.0, it now uses Socket.IO 3.0.4 which means that line 23 has now been updated from

this.io = socketIO(this.server)

to

this.io = new socketIO.Server(this.server);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import express from "express"
import path from "path"
import http from "http"
import socketIO from "socket.io"
import LuckyNumbersGame from "./luckyNumbersGame"

const port: number = 3000

class App {
    private server: http.Server
    private port: number

    private io: socketIO.Server
    private game: LuckyNumbersGame

    constructor(port: number) {
        this.port = port

        const app = express()
        app.use(express.static(path.join(__dirname, '../client')))

        this.server = new http.Server(app)
        this.io = new socketIO.Server(this.server);

        this.game = new LuckyNumbersGame()

        this.io.on('connection', (socket: socketIO.Socket) => {
            console.log('a user connected : ' + socket.id)

            socket.on('disconnect', function () {
                console.log('socket disconnected : ' + socket.id);
            });
        })
    }

    public Start() {
        this.server.listen(this.port)
        console.log( `Server listening on port ${this.port}.` )
    }
}

new App(port).Start()

src/server/luckyNumbersGame.ts

1
2
3
export default class LuckyNumbersGame {
    constructor() { }
}

src/server/tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
    "compilerOptions": {
        "target": "ES2019",
        "module": "commonjs",
        "outDir": "../../dist/server",
        "sourceMap": true,
        "esModuleInterop": true
    },
    "include": [
        "**/*.ts"
    ]
}

dist/client/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>

<head>
    <title>TypeScript Socket.IO Course</title>
</head>

<body>
    <script src="socket.io/socket.io.js"></script>
    <script src="client.js"></script>
</body>

</html>

package.json

Note

The videos were created using Socket.IO 2.3.0. The below package.json and remaining course code examples now target Socket.IO 3.0.x

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "name": "tssocktutorial",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "concurrently -k \"tsc -p ./src/server -w\" \"tsc -p ./src/client -w\" \"nodemon ./dist/server/server.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sean Bradley",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.17.2",
    "@types/node": "^12.12.17",
    "@types/socket.io": "^2.1.4",
    "@types/socket.io-client": "^1.4.32",
    "express": "^4.17.1",
    "socket.io": "^3.0.4"
  },
  "devDependencies": {
    "concurrently": "^5.0.1",
    "nodemon": "^2.0.2"
  }
}

Run

1
npm install

And be sure you can successfully start it using

1
npm run dev

Warning

If npm run dev fails to start, try building each of the TypeScript sub projects individually first, then retry npm run dev

eg,

tsc -p ./src/server

tsc -p ./src/client

npm run dev

Then visit http://127.0.0.1:3000