Real-Time Features

Briz has two real-time features: polling and Server Sent Events (SSE). Polling can be easily accessed through the data-polling attribute, and SSE through the data-sse attribute. Developers are free to place these attributes on any element, as long as they are not combined, as this can create ambiguity. Developers don’t need to write JavaScript to access these real-time features; the attributes mentioned above are sufficient. This feature also requires data-swap to modify the DOM in real-time.

Polling

To create a poll, developers can use data-polling="url" on any element within the body. Once defined, polling will automatically fetch data from the server every 5 seconds. Too long? You can also use data-refresh="time" to set the interval time. The time can only be specified in seconds (s), for example data-refresh="3s". Polling will run from the moment the element it’s based on is loaded until the element is removed from the DOM.

Example

Client

<div data-polling="/getPrice" data-refresh="0.5s"></div>

<!-- this data-swap will be swapped with response from server -->
<div data-swap="price">
  ...Price List
</div>

Server Response

<div data-swap="price">
  <p>META - $20</p>
</div>

Result

<div data-polling="/getPrice" data-refresh="0.5s"></div>

<!-- element updated -->
<div data-swap="price">
  <p>META - $20</p>
</div>

Note that polling only supports the “GET” request method.

Server Sent Events (SSE)

Similar to polling, an SSE connection can be created with just the data-sse="url" attribute, but it must have a custom event from the server that can be achieved from the data-event="eventName" attribute. Both must be defined, freely on any element. SSE is often preferred because it is resource-efficient compared to polling. because it only pushes when there is new data, while polling always fetches data every few seconds even if there is no new data. SSE also automatically reconnects when there is an error. It will run from the beginning of the element it is riding on loaded in the DOM, until the element is removed from the DOM. It also requires data-swap to update data in the DOM in real time.

Example

Client

<div data-sse="/getProduct" data-event="updatePrice, updateStock"></div>

<!-- this data-swap will be swapped with response from server -->
<div data-swap="result">
  ...Product List
</div>

Server Response

<div data-swap="result">
  <p>Soap - $6</p>
  <p>Stock - 677</p>
</div>

Result

<div data-sse="/getProduct" data-event="updatePrice, updateStock"></div>

<!-- this data-swap will be swapped with response from server -->
<div data-swap="result">
  <p>Soap - $6</p>
  <p>Stock - 677</p>
</div>

data-event can receive multiple events at once. Simply separate them with a ”,” symbol. For example: data-event="updateSome, updateclark".