---
title: Fastly Fanout for WebSockets at the edge
summary: null
url: https://www.fastly.com/documentation/solutions/demos/realtimeqa-websockets
---

## Using Fastly Fanout to handle WebSockets at the edge

[WebSocket](https://datatracker.ietf.org/doc/html/rfc6455) is a mechanism that allows browsers to keep an open data channel with
a server. This channel can be used to send and receive updates in real time, enhancing the user experience
with a sense of always-up-to-date freshness, and for multi-user applications, togetherness with other users.

This demo is a realtime-updating "question and answer" board for a live event, online or offline. Attendees at
an event join a room and may post questions. The organizer is able to reply to the questions or delete them. The changes
propagate immediately to all connected participants over WebSockets.

Try:

- Open the app URL <https://qa-websockets-demo.edgecompute.app/> in two or more browser windows at the same time. Or for
  more fun, give your friend the URL and join together.

- In each browser window, pick a name, and join a room. Any name can be used as a room. You can try `fastly`, `fastlyparty`,
  or `random`. Or pick any name you like, and you can create your own room. Just make sure everyone joins the same room.

- Post a question by typing into the box at the bottom. Moments later it shows up on everybody else's screen.

- Any questions you enter will begin with one upvote -- yours. But go ahead and upvote the questions that were entered by other users.
  Those upvotes will show up in everyone's screens.  And see questions with more votes move to the top.

- The person who created the room, or anyone who checked `join as host` on the entry screen, will see buttons to reply
  to questions. Submit an answer to a question. The answer shows up on everyone else's screen.

- If a host thinks a question is inappropriate, they can delete it. The question disappears from everyone's screen right away.

- If you're a host, you can tap the pencil next to the room name to edit the name and color theme of a room. Those changes
  are seen by other users too.

- Finally, you can change the way your own name is displayed. Tap the down arrow by your username up top, and enter a new name.
  Everyone will see those changes right away.

## How it works

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

With Fastly Fanout and the open [WebSocket-Over-HTTP Protocol](https://pushpin.org/docs/protocols/websocket-over-http/) standard,
Fastly Compute holds all of these WebSocket connections for you at the edge, so that your origin can focus on business logic.

Once the client application makes a WebSocket connection, the origin subscribes that connection to any number of
named "channels" (derived from the room name in the above example). Then, when the origin wishes to send data
over these connections, it does this by making its own HTTP requests to a publishing endpoint and referencing
that channel name.

The client may also send messages over that connection. Those messages arrive at the origin in the form of
HTTP POST requests.

In this example, the origin is also a Fastly Compute app, written in JavaScript.

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

## Fastly Fanout at the Edge

This WebSockets 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 Compute holds these long-lived connections for you at the edge, letting
your origin do what it does best: the business logic.

When your Fastly 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.