Skip to content

Browser Client

eric edited this page Jun 12, 2026 · 1 revision

Browser Client

The full client (Factory, producers, consumers — including auth, durable subscriptions, ACK, topics, and groups) runs in the browser. A pre-built bundle ships with the package:

The bundle exposes a global window.mq with Factory, Producer, and Consumer:

<script src="web/client/tyo-mq-client.js"></script>
<script>
  const factory = new mq.Factory({
      host: 'mq.example.com', port: 17352, protocol: 'https',
      auth: { realm: 'acme', role: 'consumer', key: 'acme-psk' }
  });

  factory.createConsumer('browser-dashboard').then((consumer) => {
      consumer.subscribe('weather-station', 'temperature', (data) => {
          render(data);
      });
  });
</script>

A pre-constructed mq.factory (no options) is also provided for quick same-origin experiments. In module bundlers, require('tyo-mq') works like Node.

Rebuilding the bundle

npm run browserify     # web/web.js → web/client/tyo-mq-client.js

Server-side CORS

The stock server.js enables permissive CORS. For an embedded server, pass socket.io CORS options:

new Server({ cors: { origin: 'https://app.example.com', methods: ['GET', 'POST'] } });

Auth in the browser

Browser clients authenticate exactly like Node clients — token or realm/role/pre-shared key in the auth option. For multi-tenant web apps, the consumer pre-shared key model fits well: ship the realm key to your frontend session, no per-user broker tokens needed (Roles and Connection Authorization).

The web manager

The manager UI (Manager Tools) is itself a browser app using this bundle plus the Web Crypto API to sign management commands locally — proof that full signed-command administration works from a page.

Notes

  • WebSocket transport is negotiated by socket.io; the server's allowEIO3: true (stock entry point) keeps older browser clients compatible.
  • Large messages chunk transparently in both directions, same as Node.

Clone this wiki locally