# Connection

`client.networkConnection` stores the device's network status, and `client.wsConnection` the status of the WebSocket connection.

## Reading

```js label="JavaScript"
// "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:

```js label="JavaScript"
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.

```js label="JavaScript"
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:

```js label="JavaScript"
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),
  );
});
```

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/javascript/state-connection/](https://getstream.io/chat/docs/javascript/state-connection/).