---
title: "External Providers"
description: "Use third-party WebSocket providers for real-time update notifications on any platform."
canonical_url: "https://nuxtseo.com/docs/skew-protection/providers/external"
last_updated: "2026-08-21T08:08:09.076Z"
---

External providers (adapters) allow you to use third-party [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) services for real-time update notifications via the [`updateStrategy`](/docs/skew-protection/api/config#updatestrategy-polling--sse--ws) config. This enables instant updates on **any platform**, including static/prerendered sites.

## Why Use External Providers?

- **Static Sites**: Get real-time updates without a server
- **Scalability**: Offload connection management to dedicated infrastructure
- **Reliability**: Use battle-tested WebSocket services
- **Simplicity**: No server-side WebSocket setup required

## Available Adapters

| Adapter           | Service                                           | Free Tier         |
| ----------------- | ------------------------------------------------- | ----------------- |
| [Pusher](#pusher) | [pusher.com](https://pusher.com){target="_blank"} | 200k messages/day |
| [Ably](#ably)     | [ably.com](https://ably.com){target="_blank"}     | 6M messages/month |

## Pusher

[Pusher Channels](https://pusher.com/channels) is a hosted WebSocket service.

```bash
npx nypm add pusher-js
```

**Configuration:**

```ts [nuxt.config.ts]
import { pusherAdapter } from 'nuxt-skew-protection/adapters/pusher'

export default defineNuxtConfig({
  skewProtection: {
    updateStrategy: pusherAdapter({
      // Required
      key: process.env.PUSHER_KEY,
      cluster: process.env.PUSHER_CLUSTER,
      appId: process.env.PUSHER_APP_ID,
      secret: process.env.PUSHER_SECRET,
      // Optional
      channel: 'skew-protection', // default
      event: 'VersionUpdated', // default
    })
  }
})
```

## Ably

[Ably](https://ably.com) is a realtime messaging platform.

```bash
npx nypm add ably
```

**Configuration:**

```ts [nuxt.config.ts]
import { ablyAdapter } from 'nuxt-skew-protection/adapters/ably'

export default defineNuxtConfig({
  skewProtection: {
    updateStrategy: ablyAdapter({
      // Required
      key: process.env.ABLY_KEY,
      authUrl: '/api/ably-token',
      // Optional
      clientId: 'browser',
      channel: 'skew-protection', // default
      event: 'VersionUpdated', // default
    })
  }
})
```

## Custom Adapters

Create your own adapter by implementing the `SkewAdapter` interface:

```ts [my-adapter.ts]
import type { SkewAdapter } from 'nuxt-skew-protection/adapters'
import { z } from 'zod'

const schema = z.object({
  apiKey: z.string(),
})

export function myAdapter(config: z.infer<typeof schema>): SkewAdapter {
  return {
    name: 'my-adapter',
    config,
    schema,
    toPublicConfig: ({ apiKey: _apiKey }) => ({}),
    subscribe: (onMessage) => {
    // Connect to your WebSocket service
    // Call onMessage({ version }) when update received
      return () => { /* cleanup */ }
    },
    broadcast: async (version) => {
    // Broadcast version to all connected clients
    },
  }
}
```