> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metar.ws/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser

> A minimal client for internal dashboards. Proxy the stream through your backend for public-facing products.

The native `WebSocket` API needs the key on the query string, since browsers can't set custom headers on a WebSocket upgrade request.

```html theme={null}
<script>
  const ws = new WebSocket(
      "wss://stream.metar.ws/v1/ws?key=mts_live_YOUR_KEY",
    );
  ws.onmessage = (ev) => {
      const msg = JSON.parse(ev.data);
      if (msg.type === "ack") {
            ws.send(JSON.stringify({ action: "subscribe", channels: ["sandbox.demo"] }));
      } else if (msg.type === "publication") {
            console.log(msg.data.station, msg.data.temp_c + "degC");
      }
  };
</script>
```

<Warning>
  Anything shipped to a browser exposes your API key to whoever opens DevTools. Use browser connections for internal dashboards and demos; for public-facing products, proxy the stream through your backend instead.
</Warning>

<CardGroup cols={3}>
  <Card title="Python" icon="python" href="/examples/python">
    The same client using websockets
  </Card>

  <Card title="Node.js" icon="node-js" href="/examples/nodejs">
    The same client using ws
  </Card>

  <Card title="Go" icon="code" href="/examples/go">
    The same client using gorilla/websocket
  </Card>
</CardGroup>

<Card title="Next: Best Practices" icon="list-check" href="/best-practices">
  A checklist of practical tips gathered from across this reference.
</Card>