How-to: publish and subscribe to channels

Interactive how-tos let you get hands on with Ably features without needing to run or install anything locally.

This how-to steps through the basics of publishing and subscribing to Ably channels using the example of sports scores. You will publish basketball and football scores on a loop and subscribe two different clients to the results in realtime.

What is pub/sub?

Publish-subscribe (pub/sub) is an architectural pattern that enables any number of publishers to send messages to a channel, and any number of channel subscribers to receive them. Publishers and subscribers are entirely decoupled from one another.

What are channels?

Channels are used to organize messages into different topics. They are flexible building blocks that are used to represent 1:1 communication, a whole company group chat, sports match scores or an interactive whiteboard in an e-learning application.

Files

The following files are used:

basketballPublisher.js imitates a server publishing basketball scores.
basketballSubscriber.js creates a client subscribing to basketball scores.
basketballGame.js contains the basketball scores simulation logic.
footballPublisher.js imitates a server publishing football scores to two different football leagues.
footballSubscriber.js creates a client that can choose to subscribe to scores for each football league.
footballGame.js contains the football scores simulation logic.

The server and clients are authenticated using basic authentication and a demo API key.

Step 1: publish messages

The server does not need to subscribe to the scores, so it uses the REST interface to publish them.

In a real world scenario scores will be published as they happen by calling publish() as a point or goal is scored, or when a match finishes. To imitate a real world scenario, scores are published on a loop.

Copy the following function to L17 of basketballPublisher.js to publish the sports scores:

await basketballChannel.publish('scoreUpdate', payload);
Copy
Copied!

Step 2: subscribe to channels

The clients are subscribed in realtime to the scoreboard channels, so they use the realtime interface to receive updates. Subscribing to a channel registers a listener which is called each time a message is received.

Click the Subscribe button on the basketball scoreboard to subscribe a client to basketball scores.

The football scores are published using two different message names to differentiate between the green and blue leagues.

Add the following parameters to footballChannel.subscribe() on L22 of footballSubscriber.js:

footballLeague, (message)
Copy
Copied!

footballLeague ensures a listener is registered for the correct league when a client subscribes to it. In comparison, the basketball subscriber on L16 of basketballSubscriber.js subscribes to all events using basketballChannel.subscribe((message)) because there are no leagues it needs to differentiate between.

L22 of footballSubscriber.js should now look like the following:

footballChannel.subscribe(footballLeague, (message) => {
Copy
Copied!

Use the football Subscribe buttons to choose which league, or leagues, each client subscribes to.

Unsubscribe from a channel

Click the Unsubscribe button to unsubscribe a client from that sport. They stop receiving score updates for that sport once they are unsubscribed. This uses the unsubscribe() method.