<pacem-hub-proxy> connects your page to a SignalR hub: the server pushes, the page reacts. Live feeds, chats, progress bars of server jobs.
Its <pacem-hub-listener> children each handle one kind of message.
<pacem-hub-proxy id="hub" url="/lobby">
<pacem-hub-listener method="log" on-receive="#feed.model = [$event.detail[1]].concat(#feed.model)"></pacem-hub-listener>
</pacem-hub-proxy>
Connect. url is the hub's endpoint; the proxy connects as soon as it's up (loading the SignalR client on first use),
and connected tells you how it's going. accesstoken authenticates, when the hub needs it.
Listen. A <pacem-hub-listener method="…"> inside the proxy fires receive for each message the server sends with that name:
$event.detail is the array of the message's arguments.
Talk back. #hub.send('method', arg1, arg2…) calls a hub method and doesn't wait; #hub.invoke(…) returns a promise of the server's answer.
<pacem-button on-click="#hub.send('post', 'Ada', #message.value)">post</pacem-button>
Streams. stream="true" (plus arguments) subscribes to a server stream: receive per item, then complete (or error).
Treat what the server pushes as data: render it with
<pacem-text>, never by concatenating it into HTML. Another client's message is somebody else's input.
send and invoke throw while not connected: guard the buttons with disabled="{{ !#hub.connected }}".
send('post', …) goes to the server; the demo hub answers you alone with receive, and tells everyone else on the live feed above.
The demo hub streams the seconds elapsed (up to 30): a progress bar follows each item, complete closes it.
Think of an export or an import reporting its progress.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.