Connection
client.networkConnection stores the device's network status, and client.wsConnection the status of the WebSocket connection.
Reading
// "You're offline": `undefined` means unknown, so check `=== false`
const { isOnline } = client.networkConnection.state.getLatestValue();
const isOffline = isOnline === false;
// "Reconnecting…"
const { isHealthy } = client.wsConnection.state.getLatestValue();Subscribe to render changes:
const unsubscribeNetwork = client.networkConnection.state.subscribeWithSelector(
(state) => ({ isOnline: state.isOnline }),
({ isOnline }) => renderOfflineBanner(isOnline === false),
);
const unsubscribeSocket = client.wsConnection.state.subscribeWithSelector(
(state) => ({ isHealthy: state.isHealthy }),
({ isHealthy }) => renderReconnecting(!isHealthy),
);After a reconnect
The client refreshes channel lists, the thread list, and the active channels and threads on its own. connection.recovered fires once the active channels and threads are up to date. Use it to refresh anything else you show.
client.on("connection.recovered", () => {
refreshAppData();
});Network status reporter
isOnline comes from a network status reporter: a function that reports the device's network status and returns an unsubscribe function. Browsers get one automatically. Elsewhere, you may want to register your own reporter:
client.networkConnection.setStatusReporter((onStatusChange) => {
// Report the current status right away, then on every change
onStatusChange(myCustomNetworkMonitor.isOnline());
// Return the function that removes the listener
return myCustomNetworkMonitor.addListener((isOnline) =>
onStatusChange(isOnline),
);
});