It is one of the simples way to make real multiplayer because we can host on Heroku. But now we use localhost. Later I will show how to connect the Node.js server (in TypeScript) and Qt C++ client and if you want to see it right now just open and run this example: https://github.com/8Observer8/websocket-connection Next is an example in pure JavaScript:
This example shows how to deploy on Heroku: https://github.com/8Observer8/multiplayer-game-in-js
Run it: https://multiplayer-game-in-js.herokuapp.com/
This is locally:
Create this structure:
my-game
---public/index.html
---app.js
- Install Node.js and “nodemon” (npm i nodemon -g)
- Go to “my-game” and run: nodemon app.js
- Open a browser tab and type: localhost:3000
- Open a browser console: Ctrl+Shift+J and you will see “connection”
app.js (Server)
const express = require("express");
const http = require("http");
const ws = require("ws");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "./public")));
app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "index.html")) });
const httpServer = http.createServer(app);
const wss = new ws.Server({ server: httpServer });
wss.on("connection", (wss) => { console.log("connected") });
const port = process.env.PORT || 3000;
httpServer.listen(port, () => { console.log("Server started. Port: ", port) });
public/index.html (Client)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<script>
const ws = new WebSocket("ws://localhost:3000");
ws.onopen =
() => {
console.log("connected");
}
</script>
</body>
</html>