Protocols & adapters: decision guide and page pattern revamp

src/components/Icon/glyphs/icon-tech-amqp.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechAmqp = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<text x={24} y={25} fill="currentColor" fontFamily="inherit" fontSize={15} fontWeight={700} letterSpacing={-0.5} textAnchor="middle" dominantBaseline="central">AMQP</text></svg>;
+const ForwardRef = forwardRef(IconTechAmqp);
+export default ForwardRef;

src/components/Icon/glyphs/icon-tech-mqtt.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechMqtt = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<text x={24} y={25} fill="currentColor" fontFamily="inherit" fontSize={15} fontWeight={700} letterSpacing={-0.5} textAnchor="middle" dominantBaseline="central">MQTT</text></svg>;
+const ForwardRef = forwardRef(IconTechMqtt);
+export default ForwardRef;

src/components/Icon/glyphs/icon-tech-pubnub.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechPubnub = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<text x={24} y={25} fill="currentColor" fontFamily="inherit" fontSize={20} fontWeight={700} textAnchor="middle" dominantBaseline="central">PN</text></svg>;
+const ForwardRef = forwardRef(IconTechPubnub);
+export default ForwardRef;

src/components/Icon/glyphs/icon-tech-pusher.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechPusher = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<text x={24} y={25} fill="currentColor" fontFamily="inherit" fontSize={26} fontWeight={700} textAnchor="middle" dominantBaseline="central">P</text></svg>;
+const ForwardRef = forwardRef(IconTechPusher);
+export default ForwardRef;

src/components/Icon/glyphs/icon-tech-sse.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechSse = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<text x={24} y={25} fill="currentColor" fontFamily="inherit" fontSize={17} fontWeight={700} textAnchor="middle" dominantBaseline="central">SSE</text></svg>;
+const ForwardRef = forwardRef(IconTechSse);
+export default ForwardRef;

src/components/Icon/glyphs/icon-tech-stomp.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechStomp = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<text x={24} y={25} fill="currentColor" fontFamily="inherit" fontSize={13} fontWeight={700} letterSpacing={-0.3} textAnchor="middle" dominantBaseline="central">STOMP</text></svg>;
+const ForwardRef = forwardRef(IconTechStomp);
+export default ForwardRef;

src/components/Icon/glyphs/index.ts

@@ -34,6 +34,7 @@ import IconSocialLinkedinMono from "./icon-social-linkedin-mono";
 import IconSocialStackoverflowMono from "./icon-social-stackoverflow-mono";
 import IconSocialXMono from "./icon-social-x-mono";
 import IconSocialYoutubeMono from "./icon-social-youtube-mono";
+import IconTechAmqp from "./icon-tech-amqp";
 import IconTechAndroidFull from "./icon-tech-android-full";
 import IconTechClaudeMono from "./icon-tech-claude-mono";
 import IconTechCsharp from "./icon-tech-csharp";
@@ -44,16 +45,21 @@ import IconTechJavascript from "./icon-tech-javascript";
 import IconTechJson from "./icon-tech-json";
 import IconTechKotlin from "./icon-tech-kotlin";
 import IconTechLaravelBroadcast from "./icon-tech-laravel-broadcast";
+import IconTechMqtt from "./icon-tech-mqtt";
 import IconTechNextjs from "./icon-tech-nextjs";
 import IconTechNodejs from "./icon-tech-nodejs";
 import IconTechObjectivec from "./icon-tech-objectivec";
 import IconTechOpenai from "./icon-tech-openai";
 import IconTechPhp from "./icon-tech-php";
 import IconTechPostgres from "./icon-tech-postgres";
+import IconTechPubnub from "./icon-tech-pubnub";
+import IconTechPusher from "./icon-tech-pusher";
 import IconTechPython from "./icon-tech-python";
 import IconTechReact from "./icon-tech-react";
 import IconTechReactnative from "./icon-tech-reactnative";
 import IconTechRuby from "./icon-tech-ruby";
+import IconTechSse from "./icon-tech-sse";
+import IconTechStomp from "./icon-tech-stomp";
 import IconTechSwift from "./icon-tech-swift";
 import IconTechTypescript from "./icon-tech-typescript";
 import IconTechVercel from "./icon-tech-vercel";
@@ -99,6 +105,7 @@ export const glyphs = {
   "icon-social-stackoverflow-mono": IconSocialStackoverflowMono,
   "icon-social-x-mono": IconSocialXMono,
   "icon-social-youtube-mono": IconSocialYoutubeMono,
+  "icon-tech-amqp": IconTechAmqp,
   "icon-tech-android-full": IconTechAndroidFull,
   "icon-tech-claude-mono": IconTechClaudeMono,
   "icon-tech-csharp": IconTechCsharp,
@@ -109,16 +116,21 @@ export const glyphs = {
   "icon-tech-json": IconTechJson,
   "icon-tech-kotlin": IconTechKotlin,
   "icon-tech-laravel-broadcast": IconTechLaravelBroadcast,
+  "icon-tech-mqtt": IconTechMqtt,
   "icon-tech-nextjs": IconTechNextjs,
   "icon-tech-nodejs": IconTechNodejs,
   "icon-tech-objectivec": IconTechObjectivec,
   "icon-tech-openai": IconTechOpenai,
   "icon-tech-php": IconTechPhp,
   "icon-tech-postgres": IconTechPostgres,
+  "icon-tech-pubnub": IconTechPubnub,
+  "icon-tech-pusher": IconTechPusher,
   "icon-tech-python": IconTechPython,
   "icon-tech-react": IconTechReact,
   "icon-tech-reactnative": IconTechReactnative,
   "icon-tech-ruby": IconTechRuby,
+  "icon-tech-sse": IconTechSse,
+  "icon-tech-stomp": IconTechStomp,
   "icon-tech-swift": IconTechSwift,
   "icon-tech-typescript": IconTechTypescript,
   "icon-tech-vercel": IconTechVercel,

src/data/nav/pubsub.ts

@@ -326,21 +326,26 @@ export default {
       ],
     },
     {
-      name: 'Supported protocols',
+      name: 'Protocols & adapters',
       pages: [
         {
           name: 'Overview',
           link: '/docs/protocols',
           index: true,
         },
         {
-          name: 'Server-Sent Events (SSE)',
-          link: '/docs/protocols/sse',
+          name: 'Ably SDKs (native protocol)',
+          link: '/docs/sdks',
+          external: true,
         },
         {
           name: 'MQTT',
           link: '/docs/protocols/mqtt',
         },
+        {
+          name: 'Server-Sent Events (SSE)',
+          link: '/docs/protocols/sse',
+        },
         {
           name: 'Pusher Adapter',
           link: '/docs/protocols/pusher',
@@ -349,6 +354,14 @@ export default {
           name: 'PubNub Adapter',
           link: '/docs/protocols/pubnub',
         },
+        {
+          name: 'AMQP',
+          link: '/docs/protocols/amqp',
+        },
+        {
+          name: 'STOMP',
+          link: '/docs/protocols/stomp',
+        },
       ],
     },
     {

src/pages/docs/protocols/amqp.mdx

@@ -0,0 +1,57 @@
+---
+title: AMQP
+meta_description: "AMQP is used to consume messages from Ably queues. Use an AMQP client to have worker processes pull messages from Ably for asynchronous processing."
+meta_keywords: "AMQP, Ably queues, message queue, consume messages, worker"
+intro: "AMQP lets worker processes consume messages from Ably queues for asynchronous processing. Unlike MQTT, SSE, or the vendor adapters, it does not connect clients directly to channels."
+---
+
+AMQP (Advanced Message Queuing Protocol) is a message queuing protocol supported by [Ably queues](/docs/platform/integrations/queues). It gives worker processes a reliable way to pull messages from Ably and process them asynchronously, with acknowledgement and at-least-once delivery.
+
+## Understand how AMQP works with Ably <a id="how-it-works"/>
+
+AMQP does not connect a client directly to an Ably [channel](/docs/channels), unlike the [MQTT](/docs/protocols/mqtt), [SSE](/docs/protocols/sse), [Pusher](/docs/protocols/pusher), and [PubNub](/docs/protocols/pubnub) protocols. Instead, you publish messages to a channel, a [queue rule](/docs/platform/integrations/queues#config) copies matching messages into a queue, and an AMQP client consumes them from that queue.
+
+Ably queues use AMQP 0.9.1. Queues are pre-provisioned and routing is handled by queue rules, so you subscribe directly to a queue rather than binding to an exchange or declaring a queue. Attempts to bind to an exchange or declare a queue are rejected.
+
+## When to use AMQP <a id="when-to-use"/>
+
+Use AMQP when you want to consume realtime data from Ably on your servers as a work queue, rather than maintain realtime connections on clients. This suits workloads where each message represents a unit of work, where you want to scale consumers horizontally, retain a backlog if consumers fall behind, and guarantee that each message is delivered to only one consumer.
+
+To stream data continuously into your own queueing or streaming service instead, see [outbound streaming](/docs/platform/integrations/streaming). To connect clients directly to Ably, use an [Ably SDK](/docs/sdks) or one of the other [protocols](/docs/protocols).
+
+## Connection details <a id="connection-details"/>
+
+Consuming from an Ably queue over AMQP requires the following values, most of which are shown in the **Queues** tab of your app [dashboard](https://ably.com/dashboard):
+
+| Value | Description |
+| --- | --- |
+| Queue name | Your app ID and the queue name, for example `UATwBQ:example-queue`. |
+| Host | The regional server endpoint for the queue, for example `us-east-1-a-queue.ably.io`. |
+| Port | 5671, the TLS-only port supported for secure AMQP consumption. |
+| Vhost | Always `shared`. |
+| Username | The part of your API key before the colon. |
+| Password | The part of your API key after the colon. |
+| Client | Any AMQP 0.9.1 compatible client that supports TLS. |
+
+For example, connecting from Node.js:
+
+<Code>
+```nodejs
+const url = 'amqps://APPID.KEYID:SECRET@us-east-1-a-queue.ably.io/shared';
+amqp.connect(url, (err, conn) => {
+  /* subscribe directly to the queue and consume messages */
+});
+```
+</Code>
+
+For a complete worked example, including decoding message envelopes and acknowledging deliveries, see [consume messages using AMQP](/docs/platform/integrations/queues#amqp).
+
+<Aside data-type='note'>
+AMQP connections may disconnect during routine maintenance. Most AMQP clients automatically reconnect and retry with backoff. If your client does not handle reconnection, implement this logic in your application code.
+</Aside>
+
+## Read next <a id="read-next"/>
+
+* [Ably queues](/docs/platform/integrations/queues): provisioning, queue rules, envelopes, and the dead letter queue.
+* [STOMP](/docs/protocols/stomp): the text-based alternative for consuming from queues.
+* [Outbound streaming](/docs/platform/integrations/streaming): stream data into your own Kafka, Kinesis, or AMQP infrastructure instead.