Address comments

Author: minggangw

demo/web/javascript/README.md

@@ -20,8 +20,9 @@ node runtime.mjs
 #               also http://localhost:9001/capability/subscribe/<name>  (SSE)
 ```
 
-`runtime.mjs` exposes a tiny `/add_two_ints` service + 1 Hz
-`/web_demo_tick` publisher so every panel has live data.
+`runtime.mjs` exposes a tiny `/add_two_ints` service and the shared
+`/web_demo_chatter` talker/listener topic (publish from one panel,
+receive in the others).
 
 **Shell 2 — static-file server (hosts `index.html` + maps `/sdk/*` to
 the in-repo [`web/`](../../../web/) folder so the page can `import`
@@ -46,7 +47,7 @@ Open <http://localhost:8080/> in any modern browser. Runtime in shell
   const reply = await ros.call('/add_two_ints', { a: '2n', b: '40n' });
   console.log(reply.sum); // '42n'
 
-  await ros.subscribe('/web_demo_tick', (msg) => render(msg.data));
+  await ros.subscribe('/web_demo_chatter', (msg) => render(msg.data));
   await ros.publish('/web_demo_chatter', { data: 'hi' });
 </script>
 ```
@@ -71,12 +72,12 @@ so `subscribe` is reachable over HTTP as a `text/event-stream` — useful for
 clients that can't hold a WebSocket open:
 
 ```bash
-curl -N http://localhost:9001/capability/subscribe/web_demo_tick
+curl -N http://localhost:9001/capability/subscribe/web_demo_chatter
 # event: ready
-# data: {"capability":"/web_demo_tick","subId":"sse"}
+# data: {"capability":"/web_demo_chatter","subId":"sse"}
 #
 # event: message
-# data: {"data":"tick 0 @ 2026-06-12T…"}
+# data: {"data":"hi from curl"}
 # …one `message` event per published sample, until you ^C
 ```
 
@@ -85,7 +86,7 @@ Browser apps should still prefer the WebSocket transport for `subscribe`
 curl / AI-agent / server-side persona.
 
 The page also has a **native `EventSource` panel** (section 6) that
-subscribes to `/web_demo_tick` over the same SSE endpoint — no SDK, no
+subscribes to `/web_demo_chatter` over the same SSE endpoint — no SDK, no
 WebSocket, just the browser primitive over plain HTTP. Because the page
 (`:8080`) and the HTTP transport (`:9001`) are different origins, the
 demo's `runtime.mjs` enables CORS (`new HttpTransport({ sse: true, cors:
@@ -94,10 +95,10 @@ pass your site's origin instead of `true`.
 
 ### Pair it with the stock publisher example
 
-The EventSource panel's topic box defaults to `/web_demo_tick`, but the
-runtime also exposes `/topic` so you can feed the demo from your own
-node instead of the built-in tick loop. In a third shell, run the
-standard publisher example:
+The EventSource panel's topic box defaults to `/web_demo_chatter` (the
+shared demo topic), but the runtime also exposes `/topic` so you can
+feed the demo from your own node. In a third shell, run the standard
+publisher example:
 
 ```bash
 source /opt/ros/<distro>/setup.bash
@@ -124,12 +125,11 @@ web runtime against your own publishers.
 ## Without the bundled `runtime.mjs`
 
 `runtime.mjs` bundles the rclnodejs/web runtime and the demo's sample
-ROS 2 nodes (the `/add_two_ints` service + the `/web_demo_tick`
-publisher) into one process so the demo runs out of the box. In a
-real project you already have those ROS 2 nodes running elsewhere,
-so you only need the runtime. **Replace shell 1's `node runtime.mjs`
-with the CLI** — shell 2 (`node static.mjs`) and the browser code are
-unchanged:
+ROS 2 nodes (the `/add_two_ints` service) into one process so the demo
+runs out of the box. In a real project you already have those ROS 2
+nodes running elsewhere, so you only need the runtime. **Replace shell
+1's `node runtime.mjs` with the CLI** — shell 2 (`node static.mjs`) and
+the browser code are unchanged:
 
 ```bash
 # shell 1 (instead of `node runtime.mjs`); the `-p rclnodejs` tells npx
@@ -138,7 +138,7 @@ npx -p rclnodejs rclnodejs-web web.json
 
 # the publisher / service the demo expects:
 ros2 run demo_nodes_cpp add_two_ints_server
-# (and a publisher of std_msgs/String on /web_demo_tick from any source)
+# (and a publisher of std_msgs/String on /web_demo_chatter from any source)
 ```
 
 > Note: this demo enables the SSE subscribe endpoint programmatically in

demo/web/javascript/index.html

@@ -193,7 +193,7 @@ <h2>1. Service call — <code>/add_two_ints</code></h2>
 console.log(reply.sum); <span class="com">// '42n'</span></pre>
     </div>
 
-    <h2>2. Topic subscription — <code>/web_demo_tick</code></h2>
+    <h2>2. Topic subscription — <code>/web_demo_chatter</code></h2>
     <div class="panel">
       <div class="controls">
         <div class="row">
@@ -208,8 +208,9 @@ <h2>2. Topic subscription — <code>/web_demo_tick</code></h2>
 
 <span class="kw">const</span> ros = <span class="kw">await</span> connect(<span class="str">'ws://localhost:9000/capability'</span>);
 
-<span class="com">// The server publishes /web_demo_tick once a second.</span>
-<span class="kw">const</span> sub = <span class="kw">await</span> ros.<span class="kw">subscribe</span>(<span class="str">'/web_demo_tick'</span>, (msg) =&gt; {
+<span class="com">// /web_demo_chatter is the shared demo topic — anything panel 3</span>
+<span class="com">// (or curl) publishes to it lands here, since it's the same topic.</span>
+<span class="kw">const</span> sub = <span class="kw">await</span> ros.<span class="kw">subscribe</span>(<span class="str">'/web_demo_chatter'</span>, (msg) =&gt; {
   console.log(<span class="str">'recv:'</span>, msg.data);
 });
 
@@ -295,12 +296,12 @@ <h2>5. Same capability, no SDK — just <code>curl</code></h2>
 
 <span class="com"># subscribe over SSE — streams text/event-stream until you ^C</span>
 <span class="com"># (-N disables curl's buffering so events print as they arrive)</span>
-curl -N http://localhost:9001/capability/subscribe/web_demo_tick
+curl -N http://localhost:9001/capability/subscribe/web_demo_chatter
 <span class="com"># event: ready</span>
-<span class="com"># data: {"capability":"/web_demo_tick","subId":"sse"}</span>
+<span class="com"># data: {"capability":"/web_demo_chatter","subId":"sse"}</span>
 <span class="com">#</span>
 <span class="com"># event: message</span>
-<span class="com"># data: {"data":"tick 0 @ 2026-06-12T…"}</span>
+<span class="com"># data: {"data":"hi from curl"}</span>
 <span class="com"># …one `message` event per published sample…</span>
 
 <span class="com"># allow-list rejection — returns 404 + structured error body</span>
@@ -322,22 +323,19 @@ <h2>
       section 2 is still the better fit.
     </p>
     <p style="font-size: 0.9em; color: #555">
-      The topic box defaults to <code>/web_demo_tick</code> (the demo's
-      built-in tick loop). It is also wired to <code>/topic</code> so you can
-      feed the demo from the stock publisher example instead — run
-      <code
-        >node ../../../example/topics/publisher/publisher-example.mjs</code
-      >
-      in another shell, set the box to <code>/topic</code>, and watch your own
-      node's messages stream in.
+      The topic box defaults to <code>/web_demo_chatter</code> — the same
+      topic panels 2 and 3 use, so a publish from panel 3 streams in here at
+      the same time it reaches the WebSocket subscriber. Point the box at
+      <code>/topic</code> instead to subscribe to an external ROS 2 publisher
+      (see the README's <em>publisher example</em> pairing).
     </p>
     <div class="panel">
       <div class="controls">
         <div class="row">
           <input
             id="sseTopic"
             type="text"
-            value="/web_demo_tick"
+            value="/web_demo_chatter"
             spellcheck="false"
             aria-label="topic to subscribe to"
           />
@@ -349,9 +347,9 @@ <h2>
       <pre
         class="code"
       ><span class="com">// No import — EventSource is built into every browser.</span>
-<span class="com">// Swap the topic for '/topic' to pair with publisher-example.mjs.</span>
+<span class="com">// '/web_demo_chatter' is the shared demo topic; use '/topic' to pair with publisher-example.mjs.</span>
 <span class="kw">const</span> es = <span class="kw">new</span> EventSource(
-  <span class="str">'http://localhost:9001/capability/subscribe/web_demo_tick'</span>,
+  <span class="str">'http://localhost:9001/capability/subscribe/web_demo_chatter'</span>,
 );
 
 es.addEventListener(<span class="str">'ready'</span>, (e) =&gt;
@@ -472,7 +470,7 @@ <h2>
         subBtn.onclick = async () => {
           if (!ros) return;
           try {
-            tickSub = await ros.subscribe('/web_demo_tick', (msg) =>
+            tickSub = await ros.subscribe('/web_demo_chatter', (msg) =>
               log('tickLog', msg.data)
             );
             subBtn.disabled = true;
@@ -537,7 +535,7 @@ <h2>
         sseBtn.onclick = () => {
           closeEs();
           // Accept '/topic' or 'topic'; the URL path carries the bare name.
-          const name = (sseTopic.value || '/web_demo_tick')
+          const name = (sseTopic.value || '/web_demo_chatter')
             .trim()
             .replace(/^\//, '');
           const url = `${ENDPOINTS.http}/capability/subscribe/${encodeURIComponent(

demo/web/javascript/runtime.mjs

@@ -38,7 +38,7 @@ function displayHost(host) {
 // Render the registry as a small human-readable table:
 //   call       /add_two_ints       example_interfaces/srv/AddTwoInts
 //   publish    /web_demo_chatter   std_msgs/msg/String
-//   subscribe  /web_demo_tick      std_msgs/msg/String
+//   subscribe  /web_demo_chatter   std_msgs/msg/String
 function formatCapabilities(caps) {
   const rows = [];
   for (const verb of ['call', 'publish', 'subscribe']) {
@@ -69,17 +69,6 @@ node.createService(
   }
 );
 
-// A real ROS 2 publisher producing a tick once a second so the
-// browser's subscribe() has something to receive without the user
-// having to publish first.
-const tickPub = node.createPublisher('std_msgs/msg/String', '/web_demo_tick');
-let counter = 0;
-setInterval(() => {
-  tickPub.publish({
-    data: `tick ${counter++} @ ${new Date().toISOString()}`,
-  });
-}, 1000);
-
 rclnodejs.spin(node);
 
 // ---- Layer 2 + 3: capability runtime over WebSocket *and* HTTP -------
@@ -116,10 +105,12 @@ runtime.expose({
   call: { '/add_two_ints': 'example_interfaces/srv/AddTwoInts' },
   publish: { '/web_demo_chatter': 'std_msgs/msg/String' },
   subscribe: {
-    '/web_demo_tick': 'std_msgs/msg/String',
+    // Shared talker/listener topic: panels 2 (WebSocket), 3 (round-trip),
+    // and 6 (SSE) all use it — so a browser publish is visible across
+    // every subscriber at once.
     '/web_demo_chatter': 'std_msgs/msg/String',
     // Pairs with the stock publisher example so developers can feed the
-    // demo from their own node instead of the built-in tick loop:
+    // demo from their own node:
     //   node ../../../example/topics/publisher/publisher-example.mjs
     // then subscribe to `/topic` from the browser / curl / EventSource.
     '/topic': 'std_msgs/msg/String',

demo/web/javascript/web.json

@@ -15,8 +15,8 @@
       "/web_demo_chatter": "std_msgs/msg/String"
     },
     "subscribe": {
-      "/web_demo_tick": "std_msgs/msg/String",
-      "/web_demo_chatter": "std_msgs/msg/String"
+      "/web_demo_chatter": "std_msgs/msg/String",
+      "/topic": "std_msgs/msg/String"
     }
   }
 }