Stock Ticker multiplayer
Watch the price of Amazon.com Inc. (AMZN) change every two seconds. The timer writes it into signals in a custom scope per symbol, so the chart updates without rendering the page again.
Simulated market data updates every 2 seconds from a
$app->setInterval() timer. Prices drift randomly and history is tracked for each symbol.ROUTE scope on the dashboard, with
shareRender: true: one render per tick serves every viewer. Each detail page declares its signals in a custom scope per symbol, so each symbol updates independently.Idle when unwatched: the timer skips its work while
countClients() finds no open dashboard or detail page on any worker.Deep linking: each stock has its own URL (
/stock/{symbol}). Navigate directly to a ticker or click through from the dashboard.Signal-driven charts on detail pages. The timer writes the price history into the symbol's signals, and each write broadcasts to its viewers, so the chart updates without rendering the page again.
Apache ECharts draws the chart on detail pages. Datastar writes the history signals into the chart element's attributes, and the element redraws when they change.
One worker: this demo keeps the prices in PHP statics, which each worker holds on its own. See What stays per worker before you run it with
withWorkerNum().Signals
price
string custom scope Current formatted price for a stock symbol. Custom scope per symbol.
times
array custom scope Timestamp array for the price history chart.
prices
array custom scope Price array for the chart. Updated every 2 seconds by the server timer.
Views
stock_dashboard.html.twig
ROUTE-scoped dashboard with the price of all 8 stocks. One shared render per tick for all viewers.
stock_detail.html.twig
Per-symbol detail page with the ECharts chart. Rendered once; the signals carry every later price.
stock_not_found.html.twig
Fallback for unknown stock symbols.