Virtual Waiting Room

This example demonstrates how to implement a virtual waiting room using Edge Cloud Apps Function to control access to a specific page on your website. This is particularly useful when you anticipate high traffic surges, such as during E-commerce promotions, product launches, or concert ticket sales. The virtual waiting room helps manage user access and prevents sudden traffic spikes from overloading your origin server.

This example simulates a “Team” page on a pet shop website and sets up a virtual waiting room for it. The waiting room allows a maximum of one concurrent visitor (with a 15-second direct access window upon successful entry) and a queue size of two. For simplified single-machine testing, “Client IP + User Agent” is used as a unique client identifier.

Code Example

import { waitingRoomSingle } from "./wslib-waiting-room-single"

async function handleRequest(request) {
    const headers = request.headers
    const url = new URL(request.url)
    const clientID = headers.get("cdn-src-ip") + headers.get("user-agent") // Decided by the client to identify the access terminal
    if (!clientID) {
        return fetch(request)                           // Without terminal identifier, waiting room logic cannot be applied
    }
    const roomID = url.hostname                         // Decided by the client to determine which URL scope shares a waiting room
    const args = {
        connectedTimeout: 15,                           // The duration after which data inserted into the connection pool is automatically deleted
        connectedMax: 1,                                // The maximum number of allowed connected clients
        waitingTimeout: 30,                             // The duration after which data inserted into the waiting pool is automatically deleted
        waitingMax: 2,                                  // The maximum number of allowed waiting clients
        waitingPageMaxRefreshInterval: 3,               // The maximum interval for refreshing the waiting page
        generateWaitingPage: null,                      // Customizable code to generate a waiting page; if not provided, the default page will be used
        generateBusyPage: null,                         // Customizable code to generate a busy page; if not provided, the default page will be used
    }

    const resp = await waitingRoomSingle(request, roomID, clientID, args)
    // For testing convenience, disable browser caching
    resp.headers.delete('ETag')
    resp.headers.delete('Last-Modified')
    return resp
}
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request))
})

Note

• The virtual waiting room functionality provided by Edge Cloud Apps Functions leverages Edge KV for storing and managing client state. Edge KV maintains two essential data pools: the “connected pool” and the “waiting pool,” which store information about clients connected to the target page and those waiting in the queue, respectively. The function identifies clients using information such as “Client IP + User Agent” and stores this information in Edge KV along with the access timestamp as a key-value pair. Upon client access, the function examines the client’s Cookie to determine if they are a new visitor or already in the waiting queue. Utilizing key-value, automatic expiration mechanism, and sorting capabilities, the function effectively implements client queuing, timeout control, and concurrent access limitations, ensuring smooth operation of the virtual waiting room. Based on predefined rules, the function directs users to either the target page or the waiting page.
• You can adjust the waiting room parameters, such as the maximum number of concurrent visitors, waiting time, and waiting page refresh interval, to suit your specific requirements.
• To enhance user experience, you can also customize the generateWaitingPage and generateBusyPage to display personalized waiting and busy pages respectively.