CBWIRE
v4.x
v4.x
  • Introduction
  • How It Works
  • Getting Started
  • Configuration
  • Release History
    • What's New With 4.0
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Resources
  • Upgrading from CBWIRE 3.x
  • Upgrading from CBWIRE 2.x
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Data Binding
    • Actions
    • Events
    • Nesting Components
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Features
    • Single-file Components
    • Alpine.js
    • Lazy Loading
    • Form Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Directives
    • wire:click
    • wire:confirm
    • wire:dirty
    • wire:ignore
    • wire:init
    • wire:key
    • wire:loading
    • wire:model
    • wire:navigate
    • wire:offline
    • wire:poll
    • wire:stream
    • wire:submit
    • wire:transition
  • Advanced
    • Troubleshooting
Powered by GitBook
On this page
  • Example: Real-time Subscriber Count
  • Timing Control
  • Background Throttling
  • Viewport Throttling

Was this helpful?

Export as PDF
  1. Template Directives

wire:poll

Polling is a straightforward yet effective technique used in web applications to continuously request updates from the server at regular intervals. This method is essential for keeping page content fresh without the complexity of technologies like WebSockets.

In CBWIRE, implementing polling is as simple as adding wire:poll to an element in your component.

Example: Real-time Subscriber Count

Here’s an example of a Subscriber Count component that dynamically updates the user's subscriber count:

component extends="cbwire.models.Component" {

    data = {
        "count": 0
    };

    function refreshSubscribers() {
        // Simulate fetching subscriber count
        data.count = querySubscriberCount();
    }

    function renderIt() {
        return template( "wires.subscriberCount" );
    }
}

In your subscriberCount view file (wires/subscriberCount.cfm):

<div wire:poll="refreshSubscribers">
    Subscribers: #count#
</div>

Normally, the subscriber count would only update upon page refresh. However, with wire:poll, the refreshSubscribers() method is called every 2.5 seconds, ensuring the count is always up-to-date.

Timing Control

Polling can be resource-intensive, particularly with many users. To manage this, CBWIRE allows you to control the polling interval:

<!-- Poll every 15 seconds -->
<div wire:poll.15s>

<!-- Poll every 15000 milliseconds -->
<div wire:poll.15000ms>

Background Throttling

CBWIRE intelligently throttles polling when the webpage is in the background. This reduces server load significantly. However, if continuous polling is necessary, you can use the .keep-alive modifier:

<div wire:poll.keep-alive>

This ensures polling continues even when the tab is not active.

Viewport Throttling

To optimize performance further, you can use the .visible modifier, which makes CBWIRE poll only when the element is visible on the user’s screen:

<div wire:poll.visible>

This is useful for content lower on a page, as it starts polling only when scrolled into view and stops when it's no longer visible.

Previouswire:offlineNextwire:stream

Last updated 11 months ago

Was this helpful?