From d8bbb79e27c8d60b0febd8cb6924ceb2098c9dfe Mon Sep 17 00:00:00 2001 From: Copple <10214025+kiwicopple@users.noreply.github.com> Date: Mon, 11 Sep 2023 20:57:27 +0200 Subject: [PATCH] realtime: add page on throttling --- .../NavigationMenu.constants.ts | 4 ++ apps/docs/pages/guides/realtime/broadcast.mdx | 20 -------- .../guides/client-side-throttling.mdx | 47 +++++++++++++++++++ apps/docs/pages/guides/realtime/presence.mdx | 20 -------- 4 files changed, 51 insertions(+), 40 deletions(-) create mode 100644 apps/docs/pages/guides/realtime/guides/client-side-throttling.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 81f0c44369e..5c9d864ce0c 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -886,6 +886,10 @@ export const realtime: NavMenuConstant = { name: 'Guides', url: undefined, items: [ + { + name: 'Throttling messages', + url: '/guides/realtime/guides/client-side-throttling', + }, { name: 'Subscribing to Database Changes', url: '/guides/realtime/subscribing-to-database-changes', diff --git a/apps/docs/pages/guides/realtime/broadcast.mdx b/apps/docs/pages/guides/realtime/broadcast.mdx index 90055d2c2ae..04496b4f52c 100644 --- a/apps/docs/pages/guides/realtime/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/broadcast.mdx @@ -245,26 +245,6 @@ channelD.subscribe(async (status) => { Use this to guarantee that the server has received the message before resolving `channelD.send`'s promise. If the `ack` config is not set to `true` when creating the channel, the promise returned by `channelD.send` will resolve immediately. -## Client-side rate limit - -By default the client will rate limit itself at 10 messages per second (1 message every 100 milliseconds). You can customize this when creating the client: - -```js -import { createClient } from '@supabase/supabase-js' - -const clientE = createClient('https://.supabase.co', '', { - realtime: { - params: { - eventsPerSecond: 20, - }, - }, -}) -``` - -By setting `eventsPerSecond` to 20, you can send one message every 50 milliseconds on a per client basis. - -Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. - ## More Realtime Quickstarts - [Presence Quickstart](/docs/guides/realtime/presence) diff --git a/apps/docs/pages/guides/realtime/guides/client-side-throttling.mdx b/apps/docs/pages/guides/realtime/guides/client-side-throttling.mdx new file mode 100644 index 00000000000..bc1624568a9 --- /dev/null +++ b/apps/docs/pages/guides/realtime/guides/client-side-throttling.mdx @@ -0,0 +1,47 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'realtime', + title: 'Throttling messages', + description: 'Use client-side throttling to manage message frequency.', + subtitle: 'Use client-side throttling to manage message frequency.', +} + +You should always consider optimizing the performance of you realtime system. + +## Project Quotas + +Each Broadcast and Presence message counts towards your [Project Quotas](/docs/guides/realtime/quotas). + +It's common to unintentionally flood the Realtime service with messages. For example, tracking mouse movents without throttling would send hundreds of events per second. It's rare that you need so many messages. Updating a mouse movement even a few times per second is usually enough for the human eye. + +The Supabase client includes a configurable throttling parameter to protect against these unintended floods. + +## Default client throttling + +By default the Supabase clients throttles messages to 10 messages per-second (1 message every 100 milliseconds). This is a soft-limit provided as a safe-guard when you're getting started. You'll rarely need to send more messages than this. + +Each client has their own throttling behavior. For example, if you instantiate two clients, by default you would send 20 messages per-second to your project. + +## Managing client-side throttling + +You can customize the client-side throttling when creating the client: + +```js +import { createClient } from '@supabase/supabase-js' + +const SUPABASE_URL = 'https://.supabase.co' +const SUPABASE_ANON_KEY = '' + +const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { + realtime: { + params: { + eventsPerSecond: 2, + }, + }, +}) +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/realtime/presence.mdx b/apps/docs/pages/guides/realtime/presence.mdx index 311e6aec849..ae645a42922 100644 --- a/apps/docs/pages/guides/realtime/presence.mdx +++ b/apps/docs/pages/guides/realtime/presence.mdx @@ -245,26 +245,6 @@ const channelC = supabase.channel('test', { }) ``` -## Client-Side Rate Limit - -By default the client will rate limit itself at 10 messages per second (1 message every 100 milliseconds). You can customize this when creating the client: - -```js -import { createClient } from '@supabase/supabase-js' - -const supabase = createClient('https://.supabase.co', '', { - realtime: { - params: { - eventsPerSecond: 5, - }, - }, -}) -``` - -By setting `eventsPerSecond` to 5, you can send one message every 200 milliseconds on a per client basis. - -Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. - ## More Realtime Quickstarts - [Broadcast Quickstart](/docs/guides/realtime/broadcast)