情况:
我正在使用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一起使用?
答案 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
,因为现在不需要了。