在 theia 编辑器前使用 http-proxy 添加代理

Question

我在端口 6080 上运行 theia 编辑器（比方说），当我在 ->

localhost:6080

打开编辑器时，它工作得很好

我正在运行如下代理服务器，它将请求从 5000 端口代理到 6080。 因此，当我通过代理访问编辑器时 ->

localhost:5000

，编辑器加载但 websocket 连接没有发生。 它失败了 ->

Client disconnected : 

（意味着

proxy.on('close' ..

事件被触发）。

代理服务器 ->

node app.js

let http = require("http");
let httpProxy = require("http-proxy");
let proxy = new httpProxy.createProxyServer();

function getPortFromUrl(url) {
    return 6080;
}

var proxyServer = http.createServer(async function (req, res) {
  try {
    if (req.url === "/favicon.ico") {
      res.writeHead(204);
      res.end();
      return;
    }

    // console.log("req.url : ", req.url);

    // NOTE: this logic of getting port I have simplified for DEMO purpose
    let uiPort = getPortFromUrl(req.url);

    if (!uiPort) {
      res.write("problem no port");
      res.end();
      return;
    }

    let targetUrl = "localhost" + ":" + uiPort + req.url.split("/").join("/");
    // console.log("targetUrl : ", targetUrl);
    proxy.web(
      req,
      res,
      {
        target: `http://localhost:${uiPort}`,
        changeOrigin: true,
        ws: true,
        secure: false,
      },
      function (e) {
        console.log(e);
        console.log("an error occured");
      }
    );
  } catch (exception) {
    console.error("Request URL: " + req.url + " " + exception + " exception");
    res.statusCode = 500;
    res.statusMessage = exception;
    res.writeHead(500);
    res.end();
  }
});

//
// Listen to the `upgrade` event and proxy the
// WebSocket requests as well.
//
proxyServer.on("upgrade", function (req, socket, head) {
  let uiPort = getPortFromUrl(req.url);
  console.log("req.url ::", req.url , " targetUrl :: ", `ws://localhost:${uiPort}${req.url.split("/").join("/")}`);
  proxy.ws(req, socket, head, {
    target: `ws://localhost:${uiPort}${req.url.split("/").join("/")}`,
  });
});

proxy.on("error", function (err, req, res) {
  console.error(err);
  //   res.writeHead(500, { "Content-Type": "text/html" });
  //   res.write(`Error`);
  //   res.end();
});

proxy.on('close', function (res, socket, head) {
  // view disconnected websocket connections
  console.error('Client disconnected : ', socket);
});


var server = proxyServer.listen("5000", function () {
  console.info("proxy server started on port 5000");
});

Theia 应用程序 ->

package.json

{
    "private": true,
    "dependencies": {
      "@theia/markers": "next",
      "@theia/terminal": "next",
      "@theia/mini-browser": "next",
      "@theia/plugin": "next",
      "@theia/plugin-ext": "next",
      "@theia/plugin-ext-vscode": "next"
    },
    "devDependencies": {
      "@theia/cli": "next"
    },
    "scripts": {
      "prepare": "yarn run clean && yarn build && yarn run download:plugins",
      "clean": "theia clean",
      "build": "theia build",
      "start": "theia start /Users/pawankumarsingh/Projects/theia --hostname 0.0.0.0 --port 6080 --plugins=local-dir:plugins",
      "download:plugins": "theia download:plugins"
    },
    "theiaPluginsDir": "plugins",
    "theiaPlugins": {
      "redhat.java":"https://open-vsx.org/api/redhat/java/linux-x64/1.14.2022122003/file/[e-mail]"
    },
    "theiaPluginsExcludeIds": [
      "ms-vscode.js-debug-companion",
      "vscode.extension-editing",
      "vscode.git",
      "vscode.git-ui",
      "vscode.github",
      "vscode.github-authentication",
      "vscode.microsoft-authentication"
    ]
  }

用于启动 theia 编辑器 ->

yarn

yarn build

yarn start

非常感谢任何帮助。

谢谢

我试着在 Theia 和 http-proxy 中寻找这个，但没有得到太多。

[编辑]

我通过像这样更改 websocket 代理逻辑使其在某种程度上工作 ->

proxyServer.on("upgrade", function (req, socket, head) {
  let uiPort = getPortFromUrl(req.url);
  proxy.ws(req, socket, head, {
    target: `ws://localhost:${uiPort}`,
  });
});

编辑器似乎加载正常，但我仍然得到 -> 客户端断开连接：（意思是 proxy.on（'close' .. 事件被触发）在初始加载时。

[编辑 2]

proxy.on('close', ...) 事件被调用，因为 WebSocket 连接被服务器关闭。这是正常行为，因为 WebSocket 连接在初始握手完成后关闭。

Theia编辑器第一次加载时，会与服务器建立WebSocket连接，实现实时通信。初始握手完成后，关闭 WebSocket 连接，触发 proxy.on('close', ...) 事件。

此日志消息是正常行为，并不表示代理服务器或 WebSocket 连接有任何问题。

Answer 1

我通过像这样更改 websocket 代理逻辑使其在某种程度上工作 ->

proxyServer.on("upgrade", function (req, socket, head) {
  let uiPort = getPortFromUrl(req.url);
  proxy.ws(req, socket, head, {
    target: `ws://localhost:${uiPort}`,
  });
});

编辑器似乎加载正常，但我仍然得到 -> 客户端断开连接：（意思是 proxy.on（'close' .. 事件被触发）在初始加载时。

proxy.on('close', ...) 事件被调用，因为 WebSocket 连接被服务器关闭。这是正常行为，因为 WebSocket 连接在初始握手完成后关闭。

Theia编辑器第一次加载时，会与服务器建立WebSocket连接，实现实时通信。初始握手完成后，关闭 WebSocket 连接，触发 proxy.on('close', ...) 事件。

此日志消息是正常行为，并不表示代理服务器或 WebSocket 连接有任何问题。