套接字IO在本地计算机上工作正常,但在Heroku上不工作

时间:2019-05-27 01:16:32

标签: javascript reactjs express heroku socket.io

情况:

我正在使用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的组件:

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一起使用?

2 个答案:

答案 0 :(得分:0)

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

    // 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

答案 1 :(得分:0)

花了数小时研究和审查我的代码后,我才知道为什么我的应用无法在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,因为现在不需要了。