Socket IO 在本地机器上工作正常，但在 Heroku 上不起作用

Question

情况：我正在使用 ReactJS 和 ExpressJS 构建一个 Web 应用程序（一个 SPA）。我正在使用 Socket.IO 进行实时聊天。当我构建我的应用程序并在本地主机上运行它时，一切正常，所以我决定将它部署在 Heroku 上。我的应用程序已在 Heroku 上成功构建并可以使用。问题：所以我输入我的应用程序，看看它是否在 Heroku 上工作正常。当我进入登录页面和注册页面时，该应用程序似乎没问题（这些页面不适用于 Socket.IO）。但是当我进入聊天页面（这个页面使用Socket.IO进行实时聊天）时，客户端崩溃了，它没有加载并抛出以下错误。错误：我收到以下错误：> Uncaught TypeError: Cannot read property 'DEBUG' of undefined    at load (browser.js:168)    at Object.eval (browser.js:178)    at eval (browser.js:197)    at Object../node_modules/socket.io-client/node_modules/debug/src/browser.js (vendor.js:2639)    at __webpack_require__ (main.js:788)    at fn (main.js:151)    at eval (url.js:7)    at Object../node_modules/socket.io-client/lib/url.js (vendor.js:2628)    at __webpack_require__ (main.js:788)    at fn (main.js:151)当我在线查看模块时，它有以下检查：// If debug isn't set in LS, and we're in Electron, try to load $DEBUG  if (!r && typeof process !== 'undefined' && 'env' in process) {    r = undefined.DEBUG; //the error is showed here  }所以我在本地主机上启动我的应用程序并搜索上面的代码，我得到了这个：// If debug isn't set in LS, and we're in Electron, try to load $DEBUG  if (!r && typeof process !== 'undefined' && 'env' in process) {    r = { /*A JSON object contains .env variables*/ }.DEBUG;  }代码：这是我的服务器：//requirements...const socket = require("./server/socket");const app = express();const server = http.createServer(app);const port = process.env.PORT || 3000;//middlewares...//routes...//database connection...socket(server);server.listen(port);console.log("Server started on: " + port);我的套接字设置：const socketIO = require("socket.io");const socket = server => {    const io = socketIO(server);    const chat = io.of("/chat");    chat.on("connection", client => {        console.log("User started chat!");        client.on("disconnect", () => {            console.log("User left chat!");        });        client.on("sendMessage", msg => {            const data = msg;            client.broadcast.emit("incomingMessage", { data });        });    });};

Answer 1

在花费数小时研究和审查我的代码后，我找到了我的应用程序无法在 Heroku 上运行的原因。那是因为客户端使用dotenv模块，我在webpack.config.js：

//...requirements

const dotenv = require("dotenv");

const webpack = require("webpack");

module.exports = {

    //...configs

    plugins: [

        //...other plugins

        new webpack.DefinePlugin({

            "process.env": JSON.stringify(dotenv.parsed)

        })

    ]

};

然后当我在 Heroku 上部署我的应用程序时，Heroku 将从源代码构建我的客户端，服务器将在dist文件夹中查找前端部分。客户端现在无法.env在 Heroku 上找到该文件，因此无法加载导致其抛出错误的环境变量。

Answer 2

问题不在于您粘贴的代码，或者至少我对此表示怀疑。如果您在线查看该模块，您会看到它具有以下检查：

    // If debug isn't set in LS, and we're in Electron, try to load $DEBUG

    if (!r && typeof process !== 'undefined' && 'env' in process) {

        r = process.env.DEBUG;

    }

你会注意到它正在阅读它process.env，这是一个 Node 的东西/Electron 的东西。在客户端的控制台内，输入window.process，如果你得到了什么，可能就是这样。它正在检查process......可能是 webpack