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

Posted 2023-02-22

【中文标题】Socket IO 在本地机器上工作正常，但在 Heroku 上不工作

【英文标题】：Socket IO works fine on local machine but doesn't work on Heroku

【发布时间】：2019-10-12 14:07:38

【问题描述】：

情况：

我正在使用 ReactJS 和 ExpressJS 构建一个 Web 应用程序（SPA）。我正在使用 Socket.IO 进行实时聊天。当我构建我的应用程序并在 localhost 上运行它时，一切正常，所以我决定将它部署在 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 );
        );
    );
;

module.exports = socket;

使用 Socket.IO 的 React 组件：

const _ChatBox = ( props ) => 
    const [connection] = useState(io("/chat"));

    useEffect(() => 
        connection.on("incomingMessage", message => 
            //receive message...
        );
    , []);

    const sendMessageToSocket = data => 
        connection.emit("sendMessage", data);
    ;

    return (
        /* JSX here */
    );
;

我想要什么：

我想知道我的代码是否有任何问题。当我将我的应用程序部署到 Heroku 时，是否需要在 Heroku 上进行任何额外设置才能使我的应用程序与 Socket.IO 一起使用？

【问题讨论】：

什么是崩溃？服务器还是客户端？

@VaughanHilts 客户

【参考方案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 文件夹中查找前端部分。客户端现在无法在 Heroku 上找到 .env 文件，因此无法加载导致其抛出错误的环境变量。

我删除了dotenv，因为我现在不需要它。

【参考方案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

【讨论】：

我得到了这个r = undifined.DEBUG; 而不是r = process.env.DEBUG;

对于window.process?

是的，当我输入window.process时，它会返回undefined