Merge pull request michaljaz#43 from RealPeha/ws

WIP: convert socket.io to plain websockets

Author: michaljaz

.gitignore

@@ -2,4 +2,6 @@ node_modules
 src/client/dist
 src/client/assets/blocks
 src/client/assets/items
-src/assets/pack
+src/assets/pack
+
+yarn.lock

launcher_profiles.json

@@ -0,0 +1 @@
+{}

package.json

@@ -13,6 +13,7 @@
         "postinstall": "node src/postinstall.js"
     },
     "dependencies": {
+        "@msgpack/msgpack": "^2.4.1",
         "@tweenjs/tween.js": "^18.6.4",
         "ansi-to-html": "^0.6.14",
         "axios": "^0.21.1",
@@ -35,10 +36,9 @@
         "popper.js": "^1.16.1",
         "prismarine-block": "^1.7.3",
         "prismarine-chunk": "^1.22.0",
+        "qs": "^6.9.6",
         "replace-color": "^2.3.0",
         "rimraf": "^3.0.2",
-        "socket.io": "^2.3.0",
-        "socket.io-client": "^2.3.0",
         "stats-js": "^1.0.1",
         "sweetalert": "^2.1.2",
         "three": "^0.125.0",

src/client/scripts/Setup.js

@@ -2,7 +2,7 @@ import * as THREE from "three";
 import TWEEN from "@tweenjs/tween.js";
 import Stats from "stats-js";
 import * as dat from "dat.gui";
-import io from "socket.io-client";
+import { encode, decode, decodeAsync } from "@msgpack/msgpack";
 import { DistanceBasedFog } from "./DistanceBasedFog.js";
 import { UrlParams } from "./UrlParams.js";
 import { gpuInfo } from "./gpuInfo.js";
@@ -15,6 +15,14 @@ import { BlockBreak } from "./BlockBreak.js";
 import { BlockPlace } from "./BlockPlace.js";
 import { EventHandler } from "./EventHandler.js";
 
+async function decodeFromBlob(blob) {
+    if (blob.stream) {
+        return await decodeAsync(blob.stream());
+    }
+
+    return decode(await blob.arrayBuffer());
+}
+
 async function Setup(game) {
     return new Promise((resolve) => {
         game.canvas = document.querySelector("#c");
@@ -43,23 +51,46 @@ async function Setup(game) {
         game.distanceBasedFog = new DistanceBasedFog(game);
         UrlParams(game, (password) => {
             console.warn(gpuInfo());
-            game.socket = io({
-                query: {
-                    nick: game.nick,
-                    server: game.server,
-                    port: game.serverPort,
-                    password,
-                    premium: game.premium,
-                },
-            });
+            const ws = new WebSocket(
+                `ws://localhost:8080?nick=${game.nick}&server=${game.server}&port=${game.serverPort}&password=${password}&premium=${game.premium}`
+            );
+
+            const handlers = new Map();
+
+            ws.emit = (type, ...data) => {
+                ws.send(
+                    encode([
+                        type,
+                        ...data.filter((d) => typeof d !== "function"), // Temp solution
+                    ])
+                );
+            };
+
+            ws.on = (type, handler) => {
+                handlers.set(type, handler);
+            };
+
+            ws.onmessage = async (message) => {
+                try {
+                    const [type, ...data] = await decodeFromBlob(message.data);
+
+                    const handler = handlers.get(type);
+
+                    handler && handler(...data);
+                } catch (err) {
+                    console.log(err);
+                }
+            };
+
+            game.socket = ws;
+
             game.pii = new PlayerInInventory(game);
             game.bb = new BlockBreak(game);
             game.bp = new BlockPlace(game);
             game.world = new World(game);
             game.ent = new Entities(game);
             game.chat = new Chat(game);
             game.inv_bar = new InventoryBar(game);
-            game.eh = new EventHandler(game);
             game.distanceBasedFog.addShaderToMaterial(game.world.material);
             var gui = new dat.GUI();
             game.params = {
@@ -90,7 +121,11 @@ async function Setup(game) {
                     .easing(TWEEN.Easing.Quadratic.Out)
                     .start();
             };
-            resolve();
+
+            ws.onopen = () => {
+                game.eh = new EventHandler(game);
+                resolve();
+            };
         });
     });
 }

src/index.js

@@ -3,14 +3,16 @@ var opn = require("open");
 var express = require("express");
 var app = express();
 var server = require("http").createServer(app);
-var io = require("socket.io")(server);
 var mineflayer = require("mineflayer");
 var Chunk = require("prismarine-chunk")(version);
 var vec3 = require("vec3");
 var Convert = require("ansi-to-html");
 var convert = new Convert();
 var helmet = require("helmet");
 var compression = require("compression");
+const WebSocket = require("ws");
+const qs = require("qs");
+const { encode, decode } = require("@msgpack/msgpack");
 var port = process.env.PORT || 8080;
 
 app.use(
@@ -19,6 +21,12 @@ app.use(
     })
 );
 app.use(compression());
+
+const wss = new WebSocket.Server({
+    server,
+    clientTracking: false,
+});
+
 var mode = process.argv[2];
 if (mode === "production") {
     app.use(express.static(`${__dirname}/client/dist`));
@@ -35,9 +43,16 @@ server.listen(port, function () {
     opn(`http://localhost:${port}`);
     return console.log(`Server is running on \x1b[34m*:${port}\x1b[0m`);
 });
+
 var botByNick = {};
-io.sockets.on("connection", function (socket) {
-    var query = socket.handshake.query;
+
+wss.on("connection", (socket, req) => {
+    const emit = (type, ...data) => {
+        socket.send(encode([type, ...data]));
+    };
+
+    const query = qs.parse(req.url.substr(1), { ignoreQueryPrefix: true });
+
     console.log(`[\x1b[32m+\x1b[0m] ${query.nick}`);
     var heldItem = null;
     var bot = mineflayer.createBot({
@@ -51,29 +66,29 @@ io.sockets.on("connection", function (socket) {
     bot._client.on("map_chunk", function (packet) {
         var cell = new Chunk();
         cell.load(packet.chunkData, packet.bitMap, true, true);
-        socket.emit("mapChunk", cell.sections, packet.x, packet.z);
+        emit("mapChunk", cell.sections, packet.x, packet.z);
     });
     bot._client.on("respawn", function (packet) {
-        socket.emit("dimension", packet.dimension.value.effects.value);
+        emit("dimension", packet.dimension.value.effects.value);
     });
     bot.on("heldItemChanged", function (item) {
         heldItem = item;
     });
     bot.on("login", function () {
-        socket.emit("dimension", bot.game.dimension);
+        emit("dimension", bot.game.dimension);
     });
     bot.on("move", function () {
-        socket.emit("move", bot.entity.position);
+        emit("move", bot.entity.position);
     });
     bot.on("health", function () {
-        socket.emit("hp", bot.health);
-        socket.emit("food", bot.food);
+        emit("hp", bot.health);
+        emit("food", bot.food);
     });
     bot.on("spawn", function () {
-        socket.emit("spawn", bot.entity.yaw, bot.entity.pitch);
+        emit("spawn", bot.entity.yaw, bot.entity.pitch);
     });
     bot.on("kicked", function (reason) {
-        socket.emit("kicked", reason);
+        emit("kicked", reason);
     });
     bot.on("message", function (msg) {
         let message = msg.toAnsi();
@@ -87,34 +102,34 @@ io.sockets.on("connection", function (socket) {
         for (const replacement of replacements)
             message = message.replace(replacement[0], replacement[1]);
 
-        socket.emit("msg", convert.toHtml(message));
+        emit("msg", convert.toHtml(message));
     });
     bot.on("experience", function () {
-        socket.emit("xp", bot.experience);
+        emit("xp", bot.experience);
     });
     bot.on("blockUpdate", function (oldb, newb) {
-        socket.emit("blockUpdate", [
+        emit("blockUpdate", [
             newb.position.x,
             newb.position.y,
             newb.position.z,
             newb.stateId,
         ]);
     });
     bot.on("diggingCompleted", function (block) {
-        socket.emit("diggingCompleted", block);
+        emit("diggingCompleted", block);
     });
     bot.on("diggingAborted", function (block) {
-        socket.emit("diggingAborted", block);
+        emit("diggingAborted", block);
     });
     bot.on("game", function () {
-        socket.emit("game", bot.game);
+        emit("game", bot.game);
     });
     var inv = "";
     var interval = setInterval(function () {
         var inv_new = JSON.stringify(bot.inventory.slots);
         if (inv !== inv_new) {
             inv = inv_new;
-            socket.emit("inventory", bot.inventory.slots);
+            emit("inventory", bot.inventory.slots);
         }
         var entities = {
             mobs: [],
@@ -134,17 +149,20 @@ io.sockets.on("connection", function (socket) {
                 ]);
             }
         }
-        socket.emit("entities", entities);
+        emit("entities", entities);
     }, 100);
+
+    const handlers = new Map();
+
     bot.once("spawn", function () {
-        socket.on("fly", function (toggle) {
+        handlers.set("fly", function (toggle) {
             if (toggle) {
                 bot.creative.startFlying();
             } else {
                 bot.creative.stopFlying();
             }
         });
-        socket.on("blockPlace", function (pos, vec) {
+        handlers.set("blockPlace", function (pos, vec) {
             var block = bot.blockAt(new vec3(...pos));
             if (heldItem !== void 0 && heldItem !== null) {
                 console.log(heldItem);
@@ -153,44 +171,44 @@ io.sockets.on("connection", function (socket) {
                 });
             }
         });
-        socket.on("invc", function (num) {
+        handlers.set("invc", function (num) {
             var item = bot.inventory.slots[num + 36];
             if (item !== null && item !== void 0) {
                 bot.equip(item, "hand");
             } else if (heldItem !== void 0) {
                 bot.unequip("hand");
             }
         });
-        socket.on("move", function (state, toggle) {
+        handlers.set("move", function (state, toggle) {
             if (state === "right") {
                 state = "left";
             } else if (state === "left") {
                 state = "right";
             }
             bot.setControlState(state, toggle);
         });
-        socket.on("command", function (com) {
+        handlers.set("command", function (com) {
             bot.chat(com);
         });
-        socket.on("rotate", function (data) {
+        handlers.set("rotate", function (data) {
             bot.look(...data);
         });
-        socket.on("disconnect", function () {
+        handlers.set("disconnect", function () {
             try {
                 clearInterval(interval);
                 console.log(`[\x1b[31m-\x1b[0m] ${query.nick}`);
                 bot.end();
             } catch (error) {}
         });
-        socket.on("dig", function (pos) {
+        handlers.set("dig", function (pos) {
             var block = bot.blockAt(vec3(pos[0], pos[1] - 16, pos[2]));
             if (block !== null) {
                 var digTime = bot.digTime(block);
                 if (bot.targetDigBlock !== null) {
                     console.log("Already digging...");
                     bot.stopDigging();
                 }
-                socket.emit("digTime", digTime, block);
+                emit("digTime", digTime, block);
                 console.log("Start");
                 bot.dig(block, false, function (xd) {
                     if (xd === void 0) {
@@ -201,8 +219,20 @@ io.sockets.on("connection", function (socket) {
                 });
             }
         });
-        socket.on("stopDigging", function () {
+        handlers.set("stopDigging", function () {
             bot.stopDigging();
         });
+
+        socket.on("message", (message) => {
+            try {
+                const [type, ...data] = decode(message);
+
+                const handler = handlers.get(type);
+
+                handler(...data);
+            } catch (err) {
+                console.log(err);
+            }
+        });
     });
 });