[EDU-1691] - Add pub-sub rewind example

examples/package.json

@@ -36,6 +36,8 @@
     "pub-sub-occupancy/javascript",
     "pub-sub-presence/react",
     "pub-sub-presence/javascript",
+    "pub-sub-rewind/react",
+    "pub-sub-rewind/javascript",
     "spaces-avatar-stack/react",
     "spaces-avatar-stack/javascript",
     "spaces-component-locking/react",
@@ -76,6 +78,8 @@
     "pub-sub-occupancy-react": "yarn workspace pub-sub-occupancy-react dev",
     "pub-sub-presence-javascript": "yarn workspace pub-sub-presence-javascript dev",
     "pub-sub-presence-react": "yarn workspace pub-sub-presence-react dev",
+    "pub-sub-rewind-javascript": "yarn workspace pub-sub-rewind-javascript dev",
+    "pub-sub-rewind-react": "yarn workspace pub-sub-rewind-react dev",
     "spaces-avatar-stack-javascript": "yarn workspace spaces-avatar-stack-javascript dev",
     "spaces-avatar-stack-react": "yarn workspace spaces-avatar-stack-react dev",
     "spaces-component-locking-javascript": "yarn workspace spaces-component-locking-javascript dev",

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

@@ -0,0 +1 @@
+VITE_PUBLIC_ABLY_KEY=

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

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

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

@@ -0,0 +1,58 @@
+# Rewind channel option with Pub/Sub
+
+Rewind is a Pub/Sub channel option that enables users to retrieve a set number of historical messages published to an application.
+
+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.
+
+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.
+
+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.
+
+## Resources
+
+Use the following methods to specify where to start an attachment from when attaching to a channel in a pub/sub application:
+
+* [`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.
+* [`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.
+
+Find out more about [rewind](https://ably.com/docs/channels/options/rewind).
+
+## Getting started
+
+1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found:
+
+```sh
+git clone [email protected]:ably/docs.git
+```
+
+2. Change directory:
+
+```sh
+cd /examples/
+```
+
+3. Rename the environment file:
+
+```sh
+mv .env.example .env.local
+```
+
+4. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+
+5. Install dependencies:
+
+```sh
+yarn install
+```
+
+6. Run the server:
+
+```sh
+yarn run pub-sub-rewind-javascript
+```
+
+7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.
+
+## Open in CodeSandbox
+
+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

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+    <link rel="stylesheet" href="src/styles.css" />
+    <title>Pub/Sub rewind channel</title>
+  </head>
+  <body class="font-inter">
+    <div id="landing-page" class="min-h-screen flex items-center justify-center bg-gray-100">
+      <div class="bg-white p-8 rounded-lg shadow-lg w-96">
+        <h2 class="text-2xl mb-6 text-center">Live Football League Odds</h2>
+        <p>Watch real-time odds movement for today's Football League match.</p>
+        <div class="flex flex-col gap-4">
+          <button
+            id="pre-load-odds"
+            class="uk-btn uk-btn-primary uk-border-rounded-right whitespace-nowrap">Load Live Match Odds</button>
+        </div>
+      </div>
+    </div>
+    <div id="game" class="min-h-screen bg-gray-100 p-8" style="display: none;">
+      <div class="max-w-4xl mx-auto">
+        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
+          <div class="flex justify-between items-center text-2xl font-bold">
+            <span>
+              <span class="hidden sm:inline">Royal Knights</span>
+              <span class="sm:hidden">R K</span>
+            </span>
+            <span id="score" class="bg-gray-800 text-white px-4 py-2 rounded">0-0</span>
+            <span>
+              <span class="hidden sm:inline">North Rangers</span>
+              <span class="sm:hidden">N R</span>
+            </span>
+          </div>
+        </div>
+        <div class="grid grid-cols-3 gap-6 mb-8">
+          <div class="bg-white rounded-lg shadow p-4">
+            <h3 class="text-lg font-semibold mb-2">Home Win</h3>
+            <p id="current-home" class="text-3xl font-bold text-green-600">2.50</p>
+          </div>
+          <div class="bg-white rounded-lg shadow p-4">
+            <h3 class="text-lg font-semibold mb-2">Draw</h3>
+            <p id="current-draw" class="text-3xl font-bold text-blue-600">3.42</p>
+          </div>
+          <div class="bg-white rounded-lg shadow p-4">
+            <h3 class="text-lg font-semibold mb-2">Away Win</h3>
+            <p id="current-away" class="text-3xl font-bold text-red-600">2.87</p>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
+          <h2 class="text-xl font-bold mb-4">Next Goal</h2>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="bg-gray-50 p-4 rounded">
+              <h3 class="font-medium mb-2">Royal Knights</h3>
+              <p id="next-goal-home" class="text-2xl font-bold">1.99</p>
+            </div>
+            <div class="bg-gray-50 p-4 rounded">
+              <h3 class="font-medium mb-2">North Rangers</h3>
+              <p id="next-goal-away" class="text-2xl font-bold">1.91</p>
+            </div>
+            <div class="bg-gray-50 p-4 rounded">
+              <h3 class="font-medium mb-2">No Goal</h3>
+              <p id="next-goal-none" class="text-2xl font-bold">2.66</p>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow-lg p-6">
+          <h2 class="text-xl font-bold mb-4">Odds Movement History</h2>
+          <div id="history" class="space-y-4">
+            <div class="border-b pb-2">
+              <div class="flex justify-between text-sm text-gray-600">
+                <span>Home: 2.50</span>
+                <span>Draw: 3.42</span>
+                <span>Away: 2.87</span>
+                <span>11:38:06</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="src/script.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,11 @@
+{
+  "name": "pub-sub-rewind-javascript",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  }
+}

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

@@ -0,0 +1,7 @@
+import baseConfig from '../../postcss.config';
+
+const config = {
+  ...baseConfig,
+};
+
+export default config;