Question

我正在尝试使用Phaser3，ExpressJS（和将来的SocketIO）开发多人HTML 5游戏。

我想通过index.html将我的相位游戏提供给客户端，但是每当我尝试加载脚本时，Firefox上都会出现MIME错误，而Chromium上却找不到404。

server.ts

// @ts-ignore
import { Socket } from "socket.io";
import { Request, Response } from "express";
import * as path from "path";


const express = require("express");
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);
// @ts-ignore
const uuid = require("uuid");

app.use(express.static('public'));

app.get('/', function (req: Request, res: Response) {
res.sendFile(path.resolve('./index.html'));
});

class GameServer {


constructor() {
    this.socketEvents();
}

public connect(port: number): void {
    http.listen(port, () => {
        console.info(`Listening on port ${port}`);
    });
}

private socketEvents(): void {
    io.on('connected', () => {
        console.log("user connected");
    });
}

}

const gameSession = new GameServer();

gameSession.connect(3000);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="public/dist/socket.io.js"></script>
    <script src="public/dist/phaser.min.js"></script>
    <script src="public/dist/bundle.js" async></script>
    <script src="http://localhost:9000/livereload.js"></script>
</body>
</html>

package.json

    {
  "name": "lasttryphaser",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "precommit": "npm run lint",
    "lint": "tslint -c tslint.json -p .",
    "prestart:dev": "npm run prestart",
    "start:dev": "webpack -w & tsc -w --noEmit src/server/server & nodemon src/server/server.js",
    "build:release": "webpack --env=dev --optimize-minimize",
    "prestart": "npm i && tsc -p ./",
    "start": "webpack && node ./src/server/server.js",
    "webpack": "webpack --config webpack.dev.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "phaser": "^3.20.1",
    "socket.io": "^2.3.0",
    "socket.io-client": "^2.3.0",
    "uuid": "^3.3.3",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.2",
    "@types/pixi.js": "^5.0.0",
    "@types/socket.io": "^2.1.4",
    "@types/socket.io-client": "^1.4.32",
    "@types/uuid": "^3.4.6",
    "awesome-typescript-loader": "^5.2.1",
    "ignore-loader": "^0.1.2",
    "nodemon": "^2.0.0",
    "npm": "^6.13.1",
    "prettier": "^1.19.1",
    "resolve": "^1.12.2",
    "ts-loader": "^6.2.1",
    "tslint": "^5.20.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-livereload-plugin": "^2.2.0"
  }
}

webconfig.dev.js

    const path = require("path");
const tsconfig = require("./tsconfig.json");
const { TsConfigPathsPlugin } = require("awesome-typescript-loader");
const LiveReloadPlugin = require("webpack-livereload-plugin");

module.exports = {
    entry: "./main",
    output: {
        path: path.resolve(__dirname, "public/dist"),
        filename: "bundle.js",
    },
    mode: "development",
    resolve: {
        extensions: [".ts", ".js"],
        plugins: [new TsConfigPathsPlugin()],
    },
    plugins: [
        new LiveReloadPlugin({
            port: 9000,
            hostname: "localhost",
            protocol: "http",
        }),
    ],
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "awesome-typescript-loader",
                exclude: [
                    path.resolve(__dirname, "typings"),
                    path.resolve(__dirname, "node_modules"),
                ],
                options: tsconfig,
            },
            {
                test: /\.spec.ts$/,
                use: "ignore-loader",
            },
        ],
    },
};

tsconfig.json

  {
"compilerOptions": {
  "allowJs": true,
  "baseUrl": ".",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": ["dom", "es2017"],
  "module": "commonjs",
  "noEmitOnError": false,
  "skipLibCheck": true,
  "moduleResolution": "node",
  "alwaysStrict": true,
  "noUnusedLocals": true,
  "noImplicitAny": true,
  "sourceMap": true
},
"paths": {
  "client/*": ["src/client/*"],
  "server/*": ["src/server/*"],
  "shared/*": ["src/shared/*"]
},
"typeRoots": [
  "./node_modules/@types",
  "./node_modules/phaser/types"
],
"files": [
  "src/server/server.ts",
  "main.ts",
  "./node_modules/phaser/types/phaser.d.ts"
],
"exclude": ["node_modules", "*.spec.ts"],
"awesomeTypescriptLoaderOptions": {
  "transpileOnly": true
}

}

我查找了我在Internet上可能找到的所有内容，并阅读了一本有关使用Phaser构建多人游戏的书。我尝试从书中重建该应用程序（在所有浏览器上都能很好地执行），但仍然遇到这些错误。

感谢您的帮助

提供静态文件时ExpressJS错误-资源因MIME类型（“ text / html”）不匹配而被阻止

0 个答案: