---
title: Leaderboard Demo for Fanout
summary: null
url: https://www.fastly.com/documentation/solutions/demos/fanout-leaderboard-demo
---

## Leaderboard Demo for Fastly Fanout

This application demonstrates the use of [Fastly Fanout](https://docs.fastly.com/products/fanout)
to maintain a leaderboard and update it across devices in real time.

A live instance of this demo can be found at [leaderboard-demo.edgecompute.app](https://leaderboard-demo.edgecompute.app/).

To enable realtime updates, [Fastly Fanout](https://docs.fastly.com/products/fanout) is positioned as a
[GRIP (Generic Realtime Intermediary Protocol)](https://pushpin.org/docs/protocols/grip/) proxy. Responses for streaming
requests are held open by Fanout. Then, as updates become ready, the backend application publishes these updates through
Fanout to all connected clients. For details on this mechanism, see [How it works](https://www.fastly.com/documentation/solutions/demos/fanout-leaderboard-demo#how-it-works) below.

Try:

- Open the app URL <https://leaderboard-demo.edgecompute.app/> in two or more browser windows at the same time.

- Try clicking the `+1` buttons next to each score. See that these score changes propagate to all connected devices.

## How it works

Implementing Server-Sent Events support for an application has typically meant that the origin server must hold and
maintain all of these connections.

With Fastly Fanout and [GRIP (Generic Realtime Intermediary Protocol)](https://pushpin.org/docs/protocols/grip/),
Fastly Compute holds all of these long-lived connections for you at the edge, so that your origin can focus on business logic.

The `/boards/:boardId/` endpoint of the backend application checks the `Accept` header of an incoming
request for `text/event-stream`, and conditionally serves a stream of updates in real time, over
[Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events).
This works by using [Fastly Fanout](https://docs.fastly.com/products/fanout), a [GRIP (Generic Realtime Intermediary
Protocol)](https://pushpin.org/docs/protocols/grip/) proxy implementation. Responses for streaming requests are held
open by Fanout. Then, as updates become ready, the backend application publishes these updates through Fanout to all
connected clients.

Be sure to check out [the source code on GitHub](https://github.com/fastly/fanout-leaderboard-demo).

## Fastly Fanout at the Edge

This streaming example illustrates one of the ways Fastly Fanout can be used. With Fastly Fanout, it's easy to add long-polling,
SSE, and WebSocket support to your service, because Fastly Compute holds these long-lived connections for you at the edge, letting
your origin do what it does best: the business logic.

When your Compute service receives a long-polling, SSE, or WebSocket connection, your origin can have Fastly Fanout
hold the connection and subscribe that connection to named channels. Then, at any later time, your origin (or any application
that you authorize) can "publish" data, by channel, using an HTTP API endpoint.