Background Task with handleInfo
A "live" dashboard that updates with the latest metrics periodically is another use case that shines with server events
handled asynchronously by handleInfo
.
Example Live Dashboard LiveView
dashboardLiveView.ts
/**
* A dashboard that automatically refreshes every second
*/
export const dashboardLiveView = createLiveView<
// Define LiveView Context / State
{ newOrders: number; salesAmount: number; rating: number },
// Define LiveView External Events
{} // No external events
// Define LiveView Internal Events
{ type: "tick" }
>({
mount: (socket) => {
if (socket.connected) {
// only start repeating if the socket is connected (i.e., websocket is connected)
socket.repeat(() => {
// send the tick event to `handleInfo` every second
socket.sendInfo({ type: "tick" });
}, 1000);
}
socket.assign(nextRandomData());
},
// on tick, update data
handleInfo: (_, socket) => socket.assign(fetchLatestData()),
// render the dashboard
render: (context) => {
const { newOrders, salesAmount, rating } = context;
return html`
<h1>Sales Dashboard</h1>
<hr />
<span>🥡 New Orders</span>
<h2>${newOrders}</h2>
<hr />
<span>💰 Sales Amount</span>
<h2>${salesAmount}</h2>
<hr />
<span>🌟 Rating</spa>
<h2>${rating}</h2>
`;
},
});
note
The fetchLatestData
method is not shown here because the implementation is not important. Just assume it
return the latest order, sales, and review data from a database, feed, API, etc.
How it works
- The LiveView renders a dashboard that refreshes every second with the latest order, sales, and review data.
mount
kicks off therepeat
function that sends atick
event tohandleInfo
every second.- The
handleInfo
method then fetches the data asynchronously and updates the context with the latest data. - When the latest data is successfully fetched, the
context
is updated, which causes therender
method to be called again, pushing the latest data to the client.
handleInfo
Use Cases
There are three main use cases for handleInfo
:
- Handling an asynchronous process initiated from a user event without blocking the UI
- Handling an asynchronous process initiated from a background process
- Handling a pub/sub message