Question

我一直在寻找一种方法来处理带有Apollo订阅的React应用程序中的Web套接字断开连接，但没有找到一种方法。我在阿波罗文档中看到的其他示例显示了以下用于捕获重新连接的方法：

  const wsClient = process.browser ? new SubscriptionClient(WSendpoint, {
    reconnect: true,
  }) : null;

  const wsLink = process.browser ? new WebSocketLink(wsClient) : null;

  if (process.browser) {
    wsLink.subscriptionClient.on(
      'reconnected',
      () => {
        console.log('reconnected')
      },
    )
  }

上述方法存在两个问题：

当用户断开其互联网连接时（仅出于任何原因重新启动服务器时），
重新连接是在我的React应用程序组件之外触发的。

我想做的是，如果用户断开其互联网连接或我的特快服务器由于任何原因而停机，则重新加载我的“聊天”组件。为此，我需要聊天组件完全重新加载，但我不确定从组件树外部是否可以重新加载。

Query或Subscription Apollo组件中是否有一种方法可以捕获此事件并相应地从该组件处理该事件？

Answer 1

我可以想到几种方法来处理这些情况，但是它们都不是一次性解决方案，每种情况都需要独立处理。

设置online/offline侦听器（ref）
设置Apollo middleware来处理服务器（ref）的网络错误
在商店中创建一个变量，例如isOnline，该变量可以保存应用程序状态的全局引用。每当上述两种方法触发时，您都可以更新isOnline
最后，将所有内容捆绑在一起。创建一个反应HOC，该反应使用isOnline处理每个组件的网络状态。这可用于处理网络错误消息，并在网络恢复后刷新组件。

Answer 2

您可以使用来自 SubscriptionClient 的 subscriptions-transport-ws 回调，如下所示：

const ws = require("ws");
const { SubscriptionClient } = require("subscriptions-transport-ws");
const { WebSocketLink } = require("apollo-link-ws");
const { ApolloClient } = require("apollo-client");
const { InMemoryCache } = require("apollo-cache-inmemory");

const subClient = new SubscriptionClient(
    'ws://localhost:4000/graphql',
    { reconnect: true },
    ws
);

subClient.onConnected(() => { console.log("onConnected") });
subClient.onReconnected(() => { console.log("onReconnected") });
subClient.onReconnecting(() => { console.log("onReconnecting") });
subClient.onDisconnected(() => { console.log("onDisconnected") });
subClient.onError(error => { console.log("onError", error.message) });

const wsLink = new WebSocketLink(subClient);

const client = new ApolloClient({
    link: wsLink,
    cache: new InMemoryCache()
});

我将它用于 Node.js，但它可能也适用于 React。

Apollo订阅-处理Web与SubscribeToMore断开连接

2 个答案: