如何在阿波罗客户端中检测订阅(websocket)的断开连接和重新连接 [英] How to detect disconnect and reconnect for subscription(websocket) in apollo client

问题描述

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

I am building a chat service and I want to handle the cases when the subscription(websocket) connection is disconnected. Apollo client is configured like bellow. I removed unnecessary code like cache, authLink etc.

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

How do I do this with react, apollo client? If its disconnected, I would like to show that to the chat page and when the user reconnects, I would like to fetch all the missed chat messages. This is why I need to know the disconnect, connect events

以下是此应用中使用的相关软件包:

Below are the relevant packages used in this app:

"@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]),
})

推荐答案

我终于找到了解决方案.原来你可以先声明一个SubscriptionClient，然后把它插入到WebSocketLink中，而不是直接用WebSocketLink声明.

I finally found the solution. It turns out that you can declare a SubscriptionClient first and then insert this into WebSocketLink, rather than declare with WebSocketLink directly.

使用 SubscriptionClient，您可以监听必要的事件，而使用 WebsocketLink 则不太可能(或非常有限).

With SubscriptionClient, you can listen to the necessary events, whereas with WebsocketLink its not really possible(or very limited).

不幸的是，Apollo 文档中没有任何地方提到 SubscriptionClient 或处理连接问题的方法.

Unfortunately, no where in Apollo docs, mentions SubscriptionClient or ways of handling connection issues.

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

By doing so, now you can listen to connection events with wsClient

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

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

There are more events you can listen to. But these events are sufficient to implement fetching missed chat messages.

有了这些事件，在初始连接后，您可以在断开连接事件上存储disconnectTimestamp.当您收到 onReconnected 事件时，您可以简单地获取在 disconnectTimestamp

With these events, after initial connection, you can store the disconnectTimestamp on disconnect event. When you receive onReconnected event, you can simply fetch chat messages that were created after the disconnectTimestamp

这篇关于如何在阿波罗客户端中检测订阅(websocket)的断开连接和重新连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！