Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions apps/docs/content/guides/realtime/concepts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,40 @@ Realtime uses several database connections to perform several operations. As a u

### Database connections

Realtime uses several database connections to do several operations. Some of them, as a user, you are able to tune them.
Realtime uses several database connections to perform various operations. You can configure some of these connections through [Realtime Settings](/docs/guides/realtime/settings).

The connections are:
The connections include:

- **Migrations**: Two temporary connections to run database migrations when needed
- **Authorization**: Configurable connection pool to check authorization policies on join
- **Postgres Changes**: 3 connection pools required
- **Authorization**: Configurable connection pool to check authorization policies on join that are always started.
- **Broadcast from database**: One connection to receive data from replication slot used to broadcast the changes to the clients that is always started.
- **Postgres Changes**: Multiple connection pools required. These pools are only started if you use Postgres Changes.
- **Subscription management**: To manage the subscribers to Postgres Changes
- **Subscription cleanup**: To cleanup the subscribers to Postgres Changes
- **WAL pull**: To pull the changes from the database

The number of connections varies based on the instance size and your configuration in [Realtime Settings](/docs/guides/realtime/settings).
The number of connections varies based on your compute add-on size and configuration. The following table shows the default connection pool sizes for different compute add-on variants:

| Compute Add-on | Broadcast from database | Authorization Pool Size | Subscription management | Subscription cleanup | WAL pull |
| -------------- | ----------------------- | ----------------------- | ----------------------- | -------------------- | -------- |
| Nano | 1 | 2 | 2 | 2 | 2 |
| Micro | 1 | 2 | 2 | 2 | 2 |
| Small | 1 | 5 | 4 | 4 | 4 |
| Medium | 1 | 5 | 4 | 4 | 4 |
| Large | 1 | 5 | 4 | 4 | 4 |
| XL | 1 | 10 | 7 | 7 | 7 |
| 2XL | 1 | 10 | 7 | 7 | 7 |
| 4XL | 1 | 10 | 7 | 7 | 7 |
| 8XL | 1 | 15 | 9 | 9 | 9 |
| 12XL | 1 | 15 | 9 | 9 | 9 |
| 16XL | 1 | 15 | 9 | 9 | 9 |
| >16XL | 1 | 15 | 9 | 9 | 9 |

<Admonition type="note">

You can customize `Authorization Pool Size` through the `Database connection pool size` parameter in your Realtime configuration. If not specified, the default values shown in the table will be used.

</Admonition>

### Replication slots

Expand Down
6 changes: 6 additions & 0 deletions apps/docs/content/guides/realtime/protocol.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,12 @@ System messages are sent by the server to inform the client about the status of

The heartbeat message should be sent at least every 25 seconds to avoid a connection timeout. Payload should be empty object.

For heartbeat, use the topic `phoenix` as it needs to be sent to the WebSocket server itself and not to a channel:

```json
{ "topic": "phoenix", "event": "heartbeat", "payload": {}, "ref": "8" }
```

#### Payload of access_token

Used to setup a new token to be used by Realtime for authentication and to refresh the token to prevent the channel from closing.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
</ResourceItem>

<Sheet open={open} onOpenChange={handleOpenChange}>
<SheetContent size="content" className="flex flex-col gap-0">
<SheetContent className="flex flex-col gap-0">
<SheetHeader className="shrink-0 flex items-center gap-4">
<img
src={`${BASE_PATH}/img/icons/${provider.misc.iconKey}.svg`}
Expand Down
12 changes: 11 additions & 1 deletion apps/ui-library/components/mdx-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,21 @@ const components = {
),
Callout,
ComponentPreview,
CopyButton,
TanStackBeta,
Card: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
<div
className={cn(
'flex w-full flex-col items-center rounded-xl border bg-surface-100 text-card-background py-6 px-4 shadow transition-colors hover:bg-muted/50 sm:p-10',
className
)}
{...props}
/>
),
LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
<Link
className={cn(
'flex w-full flex-col items-center rounded-xl border bg-surface-100 text-card-background py-6 px-4 shadow transition-colors hover:bg-muted/50 sm:p-10',
'flex w-full flex-col items-center justify-center rounded-xl border bg-surface-100 text-card-background py-6 px-4 shadow transition-colors hover:bg-muted/50 sm:p-10 h-52',
className
)}
{...props}
Expand Down
12 changes: 9 additions & 3 deletions apps/ui-library/content/docs/getting-started/quickstart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Start by installing [shadcn/ui](https://ui.shadcn.com/) in your project. Use the
If you're already using a recent version of shadcn/ui in your existing project, you can skip this step—this library should work with your current setup. However, if you encounter issues, try deleting your existing `components.json` file and follow one of the guides to reset your setup.

<div className="grid grid-cols-2 gap-4 mt-8 sm:gap-6">
<LinkedCard target="_blank" href="https://ui.shadcn.com/docs/installation/next">
<Card>
<svg
role="img"
viewBox="0 0 24 24"
Expand All @@ -21,8 +21,14 @@ If you're already using a recent version of shadcn/ui in your existing project,
<title>Next.js</title>
<path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
</svg>
<p className="font-medium mt-2">Next.js</p>
</LinkedCard>
<p className="font-medium mt-2 mb-6">Next.js</p>
<div className="border rounded-md py-1 px-2 bg-muted flex items-center gap-2">
<p>
<span className="select-none">`$`</span>`npx create-next-app -e with-supabase`
</p>
<CopyButton value="npx create-next-app -e with-supabase" />
</div>
</Card>
<LinkedCard target="_blank" href="https://ui.shadcn.com/docs/installation/react-router">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
4 changes: 1 addition & 3 deletions pnpm-workspace.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,7 @@ minimumReleaseAgeExclude:
- '@ai-sdk/*'
- '@supabase/mcp-server-supabase'
- '@supabase/mcp-utils'
- '@supabase/auth-js'
- '@supabase/supabase-js'
- '@supabase/realtime-js'
- '@supabase/*'

onlyBuiltDependencies:
- supabase
Expand Down
Loading