Skip to content

Commit bb55a2d

Browse files
GregHolmesGregHolmes
committed
Add pub-sub history rewind example
1 parent 5652ad8 commit bb55a2d

28 files changed

+5489
-0
lines changed

‎examples/package.json

+4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636
"pub-sub-occupancy/javascript",
3737
"pub-sub-presence/react",
3838
"pub-sub-presence/javascript",
39+
"pub-sub-rewind/react",
40+
"pub-sub-rewind/javascript",
3941
"spaces-avatar-stack/react",
4042
"spaces-avatar-stack/javascript",
4143
"spaces-component-locking/react",
@@ -76,6 +78,8 @@
7678
"pub-sub-occupancy-react": "yarn workspace pub-sub-occupancy-react dev",
7779
"pub-sub-presence-javascript": "yarn workspace pub-sub-presence-javascript dev",
7880
"pub-sub-presence-react": "yarn workspace pub-sub-presence-react dev",
81+
"pub-sub-rewind-javascript": "yarn workspace pub-sub-rewind-javascript dev",
82+
"pub-sub-rewind-react": "yarn workspace pub-sub-rewind-react dev",
7983
"spaces-avatar-stack-javascript": "yarn workspace spaces-avatar-stack-javascript dev",
8084
"spaces-avatar-stack-react": "yarn workspace spaces-avatar-stack-react dev",
8185
"spaces-component-locking-javascript": "yarn workspace spaces-component-locking-javascript dev",

‎examples/pub-sub-rewind/javascript/.env.example

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_PUBLIC_ABLY_KEY=

‎examples/pub-sub-rewind/javascript/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎examples/pub-sub-rewind/javascript/README.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Rewind channel option with Pub/Sub
2+
3+
Rewind is a Pub/Sub channel option that enables users to retrieve a set number of historical messages published to an application.
4+
5+
Use rewind to retrieve a pre-determined number of messages that have been previously published to a channel when attached. Users can then start working in your application with context of what happened before they went joined, or came online. Uses include retrieving the history of odds on a football game before providing the last 2 minutes worth of contextual data in a realtime dashboard.
6+
7+
Rewind enables users to retrieve a set number of messages that have been previously published within an application. It enables provides users with context as to how the current state has been reached.
8+
9+
Rewind is a channel option which is implemented using [Ably Pub/Sub](https://ably.com/docs/products/channels). The Pub/Sub SDK provides a set of flexible APIs capable of building any realtime application. It is powered by Ably's reliable and scalable platform.
10+
11+
## Resources
12+
13+
Use the following methods to specify where to start an attachment from when attaching to a channel in a pub/sub application:
14+
15+
* [`channel.get()`](https://ably.com/docs/channels#create) - creates a new or retrieves an existing `channel`. Using the `rewind` channel option retrieves the set number of historical messages published to the channel when the channel is attached.
16+
* [`channel.subscribe()`](https://ably.com/docs/channels#subscribe) - subscribes to message events within a specific channel by registering a listener. Message events are emitted when a user publishes a message.
17+
18+
Find out more about [rewind](https://ably.com/docs/channels/options/rewind).
19+
20+
## Getting started
21+
22+
1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found:
23+
24+
```sh
25+
git clone [email protected]:ably/docs.git
26+
```
27+
28+
2. Change directory:
29+
30+
```sh
31+
cd /examples/
32+
```
33+
34+
3. Rename the environment file:
35+
36+
```sh
37+
mv .env.example .env.local
38+
```
39+
40+
4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
41+
42+
5. Install dependencies:
43+
44+
```sh
45+
yarn install
46+
```
47+
48+
6. Run the server:
49+
50+
```sh
51+
yarn run pub-sub-rewind-javascript
52+
```
53+
54+
7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.
55+
56+
## Open in CodeSandbox
57+
58+
In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.

‎examples/pub-sub-rewind/javascript/index.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
7+
<link rel="stylesheet" href="src/styles.css" />
8+
<title>Pub/Sub rewind channel</title>
9+
</head>
10+
<body class="font-inter">
11+
<div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100">
12+
<div class="bg-white p-8 rounded-lg shadow-lg w-96">
13+
<h2 class="text-2xl mb-6 text-center">Live Football League Odds</h2>
14+
<p>Watch real-time odds movement for today's Football League match.</p>
15+
<div class="flex flex-col gap-4">
16+
<button
17+
id="pre-load-odds"
18+
class="uk-btn uk-btn-primary uk-border-rounded-right whitespace-nowrap">Load Live Match Odds</button>
19+
</div>
20+
</div>
21+
</div>
22+
<div id="game" class="min-h-screen bg-gray-100 p-8" style="display: none;">
23+
<div class="max-w-4xl mx-auto">
24+
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
25+
<div class="flex justify-between items-center text-2xl font-bold">
26+
<span>
27+
<span class="hidden sm:inline">Royal Knights</span>
28+
<span class="sm:hidden">R K</span>
29+
</span>
30+
<span id="score" class="bg-gray-800 text-white px-4 py-2 rounded">0-0</span>
31+
<span>
32+
<span class="hidden sm:inline">North Rangers</span>
33+
<span class="sm:hidden">N R</span>
34+
</span>
35+
</div>
36+
</div>
37+
<div class="grid grid-cols-3 gap-6 mb-8">
38+
<div class="bg-white rounded-lg shadow p-4">
39+
<h3 class="text-lg font-semibold mb-2">Home Win</h3>
40+
<p id="current-home" class="text-3xl font-bold text-green-600">2.50</p>
41+
</div>
42+
<div class="bg-white rounded-lg shadow p-4">
43+
<h3 class="text-lg font-semibold mb-2">Draw</h3>
44+
<p id="current-draw" class="text-3xl font-bold text-blue-600">3.42</p>
45+
</div>
46+
<div class="bg-white rounded-lg shadow p-4">
47+
<h3 class="text-lg font-semibold mb-2">Away Win</h3>
48+
<p id="current-away" class="text-3xl font-bold text-red-600">2.87</p>
49+
</div>
50+
</div>
51+
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
52+
<h2 class="text-xl font-bold mb-4">Next Goal</h2>
53+
<div class="grid grid-cols-3 gap-4">
54+
<div class="bg-gray-50 p-4 rounded">
55+
<h3 class="font-medium mb-2">Royal Knights</h3>
56+
<p id="next-goal-home" class="text-2xl font-bold">1.99</p>
57+
</div>
58+
<div class="bg-gray-50 p-4 rounded">
59+
<h3 class="font-medium mb-2">North Rangers</h3>
60+
<p id="next-goal-away" class="text-2xl font-bold">1.91</p>
61+
</div>
62+
<div class="bg-gray-50 p-4 rounded">
63+
<h3 class="font-medium mb-2">No Goal</h3>
64+
<p id="next-goal-none" class="text-2xl font-bold">2.66</p>
65+
</div>
66+
</div>
67+
</div>
68+
<div class="bg-white rounded-lg shadow-lg p-6">
69+
<h2 class="text-xl font-bold mb-4">Odds Movement History</h2>
70+
<div id="history" class="space-y-4">
71+
<div class="border-b pb-2">
72+
<div class="flex justify-between text-sm text-gray-600">
73+
<span>Home: 2.50</span>
74+
<span>Draw: 3.42</span>
75+
<span>Away: 2.87</span>
76+
<span>11:38:06</span>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<script type="module" src="src/script.ts"></script>
84+
</body>
85+
</html>

‎examples/pub-sub-rewind/javascript/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "pub-sub-rewind-javascript",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
}
11+
}

‎examples/pub-sub-rewind/javascript/postcss.config.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import baseConfig from '../../postcss.config';
2+
3+
const config = {
4+
...baseConfig,
5+
};
6+
7+
export default config;

0 commit comments

Comments
 (0)