Add Upstash waiting room example

edgio-docs · Jan 9, 2024 · 802c694 · 802c694
1 parent d9aab4b
commit 802c694
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 93 deletions.
diff --git a/examples/v7-edge-functions/edgio.config.js b/examples/v7-edge-functions/edgio.config.js
@@ -1,6 +1,8 @@
 // This file was automatically added by edgio init.
 // You should commit this file to source control.
 // Learn more about this file at https://docs.edg.io/guides/edgio_config
+require('dotenv').config();
+
 module.exports = {
   connector: '@edgio/next',
 

diff --git a/examples/v7-edge-functions/functions/database/upstash/index.js b/examples/v7-edge-functions/functions/database/upstash/index.js
@@ -4,6 +4,7 @@ import {
   setCookieToResponse,
 } from '../../../utils/cookies';
 import { setEnvFromContext } from '../../../utils/polyfills/process.env';
+import '../../../utils/polyfills/URL';
 import waitingPage from './waiting-room-capacity.html';
 import landingPage from './waiting-room-landing.html';
 
@@ -59,7 +60,13 @@ function generateId(len = 10) {
  * Handle the default response.
  */
 async function getDefaultResponse(request, userId) {
-  const response = new Response(landingPage);
+  const response = new Response(
+    landingPage({
+      domain: getDomainFromRequest(request),
+      maxUsers: TOTAL_ACTIVE_USERS,
+      sessionDuration: SESSION_DURATION_SECONDS,
+    })
+  );
   response.headers.set('content-type', 'text/html;charset=UTF-8');
 
   const cookies = getCookiesFromRequest(request);
@@ -126,7 +133,12 @@ async function setExpiryRecord(key, value, seconds) {
  * Response for the waiting room.
  */
 async function getWaitingRoomResponse() {
-  const response = new Response(waitingPage);
+  const response = new Response(waitingPage());
   response.headers.set('content-type', 'text/html;charset=UTF-8');
   return response;
 }
+
+function getDomainFromRequest(request) {
+  const url = new URL(request.url);
+  return url.origin;
+}
diff --git a/examples/v7-edge-functions/functions/database/upstash/waiting-room-capacity.html.js b/examples/v7-edge-functions/functions/database/upstash/waiting-room-capacity.html.js
@@ -1,4 +1,4 @@
-const template = `
+const template = () => `
 <!DOCTYPE html>
 <html lang="en">
 

diff --git a/examples/v7-edge-functions/functions/database/upstash/waiting-room-landing.html.js b/examples/v7-edge-functions/functions/database/upstash/waiting-room-landing.html.js
@@ -1,4 +1,4 @@
-const template = `
+const template = ({ domain, maxUsers, sessionDuration }) => `
 <!DOCTYPE html>
 <html lang="en">
 
@@ -103,11 +103,18 @@ const template = `
     <div class='container'>
         <h1>Welcome to the Waiting Room Demo</h1>
         <p>
-            This demo showcases an effective way to manage website traffic during high-volume periods. When the site is at full capacity, visitors are temporarily placed in a waiting room, ensuring a smooth user experience.
+            This demo showcases an effective way to manage website traffic during high-volume periods.
+            When the site is at full capacity, visitors are temporarily placed in a waiting room, ensuring a smooth user experience.
+        </p>
+        <p>
+          This is configured for a maximum of ${maxUsers} active sessions, with each session lasting ${sessionDuration} seconds.
+        </p>
+        <p>
+          Experience this firsthand by opening <a href="${domain}/example/upstash-database">this link</a> in multiple incognito/private browser sessions. 
+          Once the site is at full capacity (2 active sessions), you will be placed in a waiting room until a spot opens up.
         </p>
-        <p>Experience this firsthand by opening <a href="/example/upstash-database">this link</a> in multiple browser sessions. Once the site is at full capacity (2 active sessions), you will be placed in a waiting room until a spot opens up.</p>
         <p>Optionally, issue the <pre>curl</pre> command below to make multiple requests:</p>
-        <div class="code-block">curl https://edgio-community-examples-v7-edge-functions-live.edgio.link/example/upstash-database</div>
+        <div class="code-block">curl ${domain}/example/upstash-database</div>
         <button class="copy-btn" onclick="copyCodeToClipboard()">Copy Code</button>
         <p>Dive into the code to see how it works.</p>
         <p><a href="https://github.com/edgio-docs/edgio-v7-edge-functions-example" target="_blank">View the demo code on GitHub</a></p>