React JS-React中的Web套接字链接代理问题

Question

我正在使用graphql作为后端在不同部分上运行的react应用程序使用setupProxy为我的react应用设置代理服务器，这样做HTTP链接代理工作正常，但WebSocket链接代理给我一个错误

为了解决该问题，我尝试将选项包括为ws：true，但这是行不通的。错误如下：SyntaxError：无法构造'WebSocket'：URL'/ ws'无效。

错误：

setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy("/graphql", { target: "http://localhost:8001/graphql" }));
  app.use(
    proxy("/ws", {
      target: "ws://localhost:8001",
      ws: true,
    })
  );
};

index.js

import { WebSocketLink } from "apollo-link-ws";
import { createUploadLink } from "apollo-upload-client";
//Apollo Imports End

// Declaring constants for GraphQL
const httpLink = new createUploadLink({
  uri: "/graphql"
});

const wsLink = new WebSocketLink({
  uri: "/ws",
  options: {
    reconnect: true
  }
});

我希望该呼叫应与普通呼叫相同，但会引发错误。

Answer 1

/ws不是 WebSocket 类的有效 URI。Websocket 需要完整的 URL 才能连接，您可以在浏览器控制台中尝试：

在这种情况下，Apollo 在幕后使用本机 Web 套接字类，因此如果您可以使其工作，它也将在 Apollo 中工作。

尝试使用ws://localhost:8001替代。