ably-elsolya

ably-elsolya is a framework-agnostic JavaScript/TypeScript wrapper built on top of the official Ably Realtime SDK.

This package provides a clean and simple core layer for working with Ably without depending on any specific framework such as Vue, React, Angular, or Nuxt.

The goal of this package is to make Ably usage reusable, maintainable, and easy to extend across different environments.

Why this package

Many Ably integrations are written as:

• Vue composables
• React hooks
• Angular services

These approaches are not reusable across frameworks.

ably-elsolya solves this by:

• Removing all framework-specific code
• Exposing pure JavaScript / TypeScript logic
• Acting as a shared core that can be used everywhere

Installation

npm install ably-elsolya

Install Ably (required peer dependency):

npm install ably

Core Idea

The package exposes a single main class:

AblyClient

This class:

• Creates and manages an Ably Realtime connection
• Provides access to channels
• Simplifies publishing and subscribing to messages

No UI logic, no state management, and no framework dependencies.

Source Code

import { Realtime } from 'ably'

export class AblyClient {
  private client: Realtime

  constructor(apiKey: string) {
    this.client = new Realtime(apiKey)
  }

  channel(name: string) {
    return this.client.channels.get(name)
  }

  publish(channel: string, event: string, data: any) {
    return this.channel(channel).publish(event, data)
  }

  subscribe(channel: string, callback: (msg: any) => void) {
    this.channel(channel).subscribe(callback)
  }
}

Code Explanation

Importing Realtime

import { Realtime } from 'ably'

Imports the official Ably Realtime client responsible for creating and maintaining a real-time connection with Ably servers.

AblyClient class

The AblyClient class acts as a wrapper around the Ably Realtime client.

• It hides direct access to the Ably SDK
• It exposes a simpler and controlled API
• It keeps the implementation framework-independent

constructor(apiKey: string)

Creates a new Ably Realtime connection using your API key.

const ably = new AblyClient('YOUR_ABLY_API_KEY')

You should usually create one instance and reuse it across your application.

channel(name: string)

Returns an Ably channel instance.

const channel = ably.channel('chat-room')

If the channel already exists, the same instance is returned. If not, Ably creates it internally.

publish(channel: string, event: string, data: any)

Publishes a message to a specific channel.

ably.publish('chat-room', 'message', {
  text: 'Hello world'
})

Parameters:

• channel: Channel name
• event: Event name
• data: Message payload

subscribe(channel: string, callback: Function)

Subscribes to messages on a channel.

ably.subscribe('chat-room', msg => {
  console.log(msg.data)
})

The callback receives an Ably message object containing event name, data, timestamp, and metadata.

Full Usage Example

import { AblyClient } from 'ably-elsolya'

const ably = new AblyClient('YOUR_ABLY_API_KEY')

ably.subscribe('chat-room', msg => {
  console.log('Received message:', msg.data)
})

ably.publish('chat-room', 'message', {
  text: 'Hello from ably-elsolya'
})

Usage with Frameworks

This package works with any framework because it contains no framework-specific code.

React / Next.js

const ably = new AblyClient(process.env.NEXT_PUBLIC_ABLY_KEY)

Vue / Nuxt

const ably = new AblyClient(import.meta.env.VITE_ABLY_KEY)

Angular

const ably = new AblyClient('API_KEY')

What this package does NOT include

• Vue composables
• React hooks
• Angular services
• State management
• UI logic

This design keeps the package lightweight and reusable.

License

Ahmed Niazy 01096710328