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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "compilerOptions": {
      "target": "ES3",
      "module": "commonjs",
      "outDir": "../../dist/client"
    },
    "include": [
      "**/*.ts"
    ]
  }

src/server/server.ts

 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 = socketIO(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

 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": "^2.3.0"
  },
  "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