React js - 反应中的网络套接字链接代理问题答案

【问题标题】：React js - problem with proxy for web socket link in reactReact js - 反应中的网络套接字链接代理问题
【发布时间】：2019-10-11 16:45:14
【问题描述】：

我正在使用 setupProxy 为我的 react 应用程序设置代理服务器，该应用程序使用 graphql 作为在不同部分运行的后端，这样做 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
  }
});

我预计调用应该与正常调用相同，但它会引发错误。

【问题讨论】：

您找到解决方案了吗？我也遇到了同样的问题
还没有。 @安德鲁
您是否尝试在创建 WebSocketLink 时向 URI 添加主机名？即uri: "localhost/ws"

标签： node.js reactjs graphql create-react-app react-apollo

【解决方案1】：

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

在这种情况下，Apollo 在幕后使用了原生的 web socket 类，所以如果你能做到这一点，它也可以在 Apollo 中工作。

尝试改用ws://localhost:8001。

【讨论】：

【解决方案2】：

替换成这个

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

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

或

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

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

【讨论】：

肯定会检查这个并让你知道
嗨@EvilsEmpire，上述解决方案有人解决了吗？
如上所示，您为 WebSockLink 添加了什么？它需要一个完整的路径，那么它如何与 '/ws' 匹配？

【解决方案3】：

在 setupProxy.js 文件中添加这个对我有用：

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = app => {
  const wsProxy = createProxyMiddleware("/graphql", {
    ws: true,
    changeOrigin: true,
    autoRewrite: true,
    target: "http://localhost:8001",
  });
  app.use(wsProxy);
};

这就是我的 apollo-client.ts 文件中的内容

const httpLink = new HttpLink({
  uri: "/graphql",
  credentials: "include",
});

const wsLink = new WebSocketLink({
  uri: `ws://${window.location.host}/graphql`,
  options: {
    reconnect: true,
    lazy: true,
    connectionParams: {
      headers: {
      //add your headers here
      },
    },
  },
});

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink,
);

【讨论】：