如何在apollo客户端中检测订阅（websocket）的断开和重新连接

Question

我正在构建一个聊天服务，我想处理订阅（websocket）连接断开的情况。 Apollo 客户端的配置如下。我删除了不必要的代码，如缓存、authLink 等。

我如何使用 React、apollo 客户端做到这一点？如果它断开连接，我想将其显示到聊天页面，当用户重新连接时，我想获取所有错过的聊天消息。这就是为什么我需要知道断开连接、连接事件

以下是该应用程序中使用的相关包：

"@apollo/client": "^3.3.7",
"subscriptions-transport-ws": "^0.9.18",
"react": "^17.0.1"

const httpLink = new BatchHttpLink({ uri: config.API_URL })
const wsLink = new WebSocketLink({
  uri: config.WS_URL,
  options: {
    reconnect: true,
    connectionParams:{       
      authToken: accessToken,
    },
  },
})

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query) 
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
  },
  wsLink,
  httpLink
)
const client = new ApolloClient({
  cache,
  link: from([new SentryLink(), authLink, errorLink, splitLink]),
})

Answer 1

我终于找到了解决方案。事实证明，您可以SubscriptionClient先声明 a，然后将其插入到 中WebSocketLink，而不是WebSocketLink直接声明 with 。

使用 SubscriptionClient，您可以侦听必要的事件，而使用WebsocketLink它实际上不可能（或非常有限）。

不幸的是，Apollo 文档中没有提及SubscriptionClient或处理连接问题的方法。

import { WebSocketLink } from '@apollo/client/link/ws'
import { SubscriptionClient } from 'subscriptions-transport-ws' // <- import this

const wsClient = new SubscriptionClient(config.WS_URL, {
  reconnect: true,
  connectionParams: {
    authToken: accessToken,
  },
})

const wsLink = new WebSocketLink(wsClient)

通过这样做，现在您可以监听连接事件wsClient

wsClient.onConnected(() => console.log("websocket connected!!"))
wsClient.onDisconnected(() => console.log("websocket disconnected!!"))
wsClient.onReconnected(() => console.log("websocket reconnected!!"))

还有更多活动您可以收听。但这些事件足以实现获取错过的聊天消息。

通过这些事件，在初始连接后，您可以存储disconnectTimestamp断开连接事件。当您收到onReconnected事件时，您可以简单地获取在该事件之后创建的聊天消息disconnectTimestamp