DEV Community

Alex Spinov
Alex Spinov

Posted on

Ably Has a Free API That Adds Real-Time Features to Any App

Ably is the real-time messaging platform that handles WebSockets, Pub/Sub, and presence at scale. Build chat, live updates, multiplayer — without managing infrastructure.

What Is Ably?

Ably provides real-time infrastructure as a service. Publish messages, subscribe to channels, track user presence — all via API or SDK.

Quick Start

npm install ably
Enter fullscreen mode Exit fullscreen mode
import Ably from 'ably'

const ably = new Ably.Realtime(process.env.ABLY_API_KEY!)

// Subscribe to channel
const channel = ably.channels.get('chat-room-1')
channel.subscribe('message', (msg) => {
  console.log(`${msg.data.user}: ${msg.data.text}`)
})

// Publish message
await channel.publish('message', {
  user: 'Alice',
  text: 'Hello everyone!',
  timestamp: Date.now(),
})
Enter fullscreen mode Exit fullscreen mode

REST API

export ABLY_KEY="your-api-key"

# Publish message
curl -s -X POST 'https://rest.ably.io/channels/notifications/messages' \
  -u "$ABLY_KEY" \
  -H 'Content-Type: application/json' \
  -d '{"name": "alert", "data": {"type": "price-change", "product": "Widget", "newPrice": 29.99}}'

# Get channel presence
curl -s 'https://rest.ably.io/channels/chat-room-1/presence' \
  -u "$ABLY_KEY" | jq '.[].clientId'

# Get message history
curl -s 'https://rest.ably.io/channels/notifications/messages?limit=10' \
  -u "$ABLY_KEY" | jq '.[].data'
Enter fullscreen mode Exit fullscreen mode

React Hook

import { useChannel, usePresence } from 'ably/react'

function ChatRoom({ roomId }: { roomId: string }) {
  const [messages, setMessages] = useState<Message[]>([])

  useChannel(`chat-${roomId}`, 'message', (msg) => {
    setMessages(prev => [...prev, msg.data])
  })

  const { presenceData } = usePresence(`chat-${roomId}`, { username: currentUser })

  const sendMessage = async (text: string) => {
    const channel = ably.channels.get(`chat-${roomId}`)
    await channel.publish('message', { user: currentUser, text, ts: Date.now() })
  }

  return (
    <div>
      <p>{presenceData.length} users online</p>
      {messages.map(m => <p key={m.ts}><b>{m.user}:</b> {m.text}</p>)}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Use Cases

  • Live chat: group chat, 1:1 messaging
  • Real-time dashboards: live metrics, stock tickers
  • Collaborative editing: multiplayer cursors, shared state
  • IoT: device telemetry, command and control
  • Gaming: multiplayer state sync, leaderboards
  • Notifications: live alerts, activity feeds

Free Tier

Feature Free Pro
Messages 6M/mo 50M/mo
Connections 200 peak 10K peak
Channels Unlimited Unlimited
Presence Yes Yes
Message history 24h 72h

Need real-time scraped data streams? Scrapfly extracts web data on demand. Email spinov001@gmail.com for real-time data pipelines.

Top comments (0)