Playground

The Playground is a small app built on Thuum. It connects to both brokers over WebSockets and runs REST calls through its own server, exactly as the guides recommend. Pick an action, run it, and watch three things side by side:

• Code: the call you just made, ready to copy, as @thuum/client, plain browser JavaScript (Vanilla JS), Node.js and, for REST, curl. It is generated from your inputs.
• Live: the events delivered to this window, or the states it knows, updated by notifications.
• Wire log: every frame both WebSockets send and receive, and every REST request and response.

Things to try#

1. Publish and receive. Run Publish over WebSocket. The reply (pub:ok) carries the event's id and ts; the event itself comes back as a message because the Playground is subscribed to the sandbox. Switch the transport to REST and publish again: same delivery, different path.
2. Two windows. Use Open a second window, publish in one and watch the other. That is all a chat needs.
3. Fan-out to super topics. Publish on playground:{id}:alerts. It is delivered through the subscription to playground:{id}, with its exact topic. Then Subscribe to the sub-topic too: you still get each event once. See Topics.
4. History. Run History (REST only): the retained events of the sandbox and its sub-topics, newest first.
5. States. On the State Broker tab, Set a value, then Merge a patch that sets a member to null: that member is removed, and the version goes up by one. Read it over WebSocket (tell) and over REST (GET).
6. Echo and delete. Echo re-sends the current value to subscribers with the same version; Delete sends a change whose value and version are null.
7. Errors. Read a key that doesn't exist: tell:error with not_found over WebSocket, 404 over REST. Every error comes back on the same ref as the request.

How it is built#

The Playground follows the recommended architecture:

• Its App Key lives on its server only. The browser asks the Playground's token route for a short-lived token before opening each WebSocket. The code samples call it /apps/playground/token; in your app it is your own route (see Connect browsers securely).
• Its server shares one App Key with the other example apps, but every token it hands out is scoped to the playground Main Topic (P S R), and a REST call's token to the sandbox alone. A token from the token route can't touch any other data, whatever a visitor sends, even though the key itself can. That is least privilege without one key per component.
• REST calls run on its server, with a fresh token per call. The Wire log shows the request without the token.
• After a reconnect, each socket subscribes again to what it had: try it by stopping your network for a few seconds. See Build reliable clients.

Embed it#

The Playground can be embedded in any page with an iframe; every embed gets a new sandbox.

<iframe
	src="https://shout.thuum.dev/apps/playground/embed?tab=state&action=merge"
	title="Thuum Playground"
	style="width: 100%; height: 820px; border: 0"
></iframe>