如果问题的长度可能很吓人，问题的摘要是如何从节点服务器与前端应用程序交互。我相信 Puppeteer 的使用应该伴随着该请求的解决。问题很大，因为我解释了我在浏览器中实现后端代码（傀儡师）工作的所有失败尝试。除了构建和运行存储库之外，尽管按照说明进行操作可能需要一些时间，但我相信这个问题对于 javascript/node 常规程序员来说应该是可行的。就这样，感谢您的阅读。
我克隆、构建并运行imgui-js https://github.com/flyover/imgui-js存储库成功。
我想将它与 puppeteer 一起用于一个小型应用程序。里面的所有 npm 命令和尝试过的东西都在提到的 imgui-js 项目中。
我试过：
1.- 从项目中运行节点示例: With npm run-script start-example-node。
这会运行 example/index.js 脚本，但没有绘制任何内容，因为我们不在浏览器中并且窗口未定义。可以在main.ts中检查调试：
if (typeof(window) !== "undefined") {
window.requestAnimationFrame(done ? _done : _loop);
}
所以我不明白回购中这个例子的目的。Edit:似乎可以完成客户端-服务器通信，但我现在不知道如何做到这一点。
2.- Puppeteer browserify：我跟着浏览器化你好世界 https://browserify.org/。
只是步骤摘要：
npm install -g browserifynpm i puppeteer- 转到 build 文件夹为我的生成 de bundle.js
const puppeteer = require('puppeteer');脚本，所以cd example, cd build, browserify myScript.js -o bundle.js
- Add
<script src="./build/bundle.js"></script>到 example/index.html。
我收到此错误：
Uncaught TypeError: System.register is not a function
at Object.96.puppeteer (bundle.js:19470:8)
at o (bundle.js:1:265)
at r (bundle.js:1:431)
at bundle.js:1:460
我还尝试将 main.js 与我的脚本一起进行浏览器化：browserify main.js myScript.js -o bundle.js。同样的错误。
3.- 尝试使用 rollup 模块捆绑器设置 puppeter： 下列的this https://bl.ocks.org/twilson63/89601cdd3940fb03140c8d10bc09c98e资源等。这样做：
npm install --save-dev rollup tape-modern puppeteer
npm install --save-dev rollup-plugin-node-resolve
npm install --save-dev rollup-plugin-commonjs
npm install --save-dev sirv tape-browser-color
并尝试添加imgui-js rollup.config.js 配置文件。
认为它不起作用，因为所有服务器设置都在npm start等等不与rollup一起执行。
4.- Puppeteer-web：按照以下步骤this https://stackoverflow.com/questions/54647694/how-to-run-puppeteer-code-in-any-web-browser资源 我尝试在浏览器中运行 puppeteer。
npm i puppeteer-web- 客户端和服务端代码：
Client:
<script src="https://unpkg.com/puppeteer-web"></script>
<script>
const browser = await puppeteer.connect({
browserWSEndpoint: `ws://0.0.0.0:8080`, // <-- connect to a server running somewhere
ignoreHTTPSErrors: true
});
const pagesCount = (await browser.pages()).length;
const browserWSEndpoint = await browser.wsEndpoint();
console.log({ browserWSEndpoint, pagesCount });
</script>
服务器（server.js 脚本）：
const httpProxy = require("http-proxy");
const host = "0.0.0.0";
const port = 8080;
async function createServer(WSEndPoint, host, port) {
await httpProxy
.createServer({
target: WSEndPoint, // where we are connecting
ws: true,
localAddress: host // where to bind the proxy
})
.listen(port); // which port the proxy should listen to
return `ws://${host}:${port}`; // ie: ws://123.123.123.123:8080
}
const puppeteer = require("puppeteer");
puppeteer.launch().then(async browser=>{
const pagesCount = (await browser.pages()).length; // just to make sure we have the same stuff on both place
const browserWSEndpoint = await browser.wsEndpoint();
const customWSEndpoint = await createServer(browserWSEndpoint, host, port); // create the server here
console.log({ browserWSEndpoint, customWSEndpoint, pagesCount });
})
-
运行服务器脚本：node server.js。服务器似乎已正确创建。终端日志：
browserWSEndpoint: 'ws://127.0.0.1:57640/devtools/browser/58dda865- b26e-4696-a057-25158dbc4093',
customWSEndpoint: 'ws://0.0.0.0:8080',
pagesCount: 1
-
npm start（从新终端确保创建的服务器不会终止）
我在客户端收到错误：
WebSocket connection to 'ws://0.0.0.0:8080/' failed:
(anonymous) @ puppeteer-web:13354
我只想在我的应用程序中将 puppeteer 与此前端库一起使用，使用 puppeteer 获取数据以显示 UI 并将用户输入提供回 puppeteer。
我理想的解决方案是第 1 个，我可以使用除了 puppeteer 之外的任何 npm 包，并从后端（节点服务器）到客户端（imgui 用户界面）来回通信。
谢谢你的帮助。
EDIT:我用节点服务器解决方案服务器实现了它，这是我想要的场景，使用expressjs和nodemon，在应用程序中运行不同的服务器并与应用程序通信。现在我会发现更有价值的帮助：
1.- 浏览器化解决方案和/或关于我尝试这种方法失败的原因的见解。
2.- 将所有内容保留在同一服务器中的解决方案，即存储库中向浏览器提供 html 的服务器"start-example-html": "http-server -c-1 -o example/index.html"。不知道这是否可能。这是因为如果我用我自己添加的expressjs服务器来提供这两件事，我就不会失去生命负载等。
Create React App 的用途代理 API 请求 https://create-react-app.dev/docs/proxying-api-requests-in-development/
3.- 正如评论、指南或解决方案中所建议的那样，使服务器代码通过带有 imgui 输出的节点渲染窗口（npm start-example-node）当然是这个问题的有效答案。
在赏金期间用一些广泛的新场景来改变问题条件似乎不太正确，但现在条件已经改变，所以我尝试充分利用该主题中已经完成的投资和研究，这也是由于我缺乏 wev-dev 模块捆绑配置领域的专业知识，因此可能会为上述两个主题中任何一个主题中最有价值的建议授予赏金。感谢你的理解。
