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

Posted 2023-03-08

【中文标题】React js - 反应中的网络套接字链接代理问题

【英文标题】：React js - problem with proxy for web socket link in react

【发布时间】：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"

【参考方案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,
);