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

# WebSockets dans le navigateur

> Utilisez des tokens éphémères pour les clients WebSocket navigateur et mobiles sans exposer vos clés API

N'embarquez jamais une clé API Gradium dans du code navigateur ou mobile.
Les bundles navigateur peuvent être inspectés, et toute personne qui
extrait la clé peut dépenser les crédits de votre compte.

À la place, votre serveur doit échanger sa clé API contre un token Gradium
éphémère à usage unique, puis transmettre ce token au client authentifié.
Le client se connecte à l'endpoint WebSocket avec `?token=...`.

## Déroulement

```mermaid theme={null}
sequenceDiagram
  participant Browser
  participant AppServer as Your server
  participant Gradium

  Browser->>AppServer: Request voice session
  AppServer->>Gradium: GET /api/api-keys/token with x-api-key
  Gradium-->>AppServer: { token, expires_at }
  AppServer-->>Browser: { token, expires_at }
  Browser->>Gradium: WebSocket connect with ?token=...
  Gradium-->>Browser: WebSocket open, token verified and consumed
  Browser->>Gradium: setup
  Gradium-->>Browser: ready
  Browser->>Gradium: text/audio chunks
  Gradium-->>Browser: audio/text/step events
  Browser->>Gradium: end_of_stream
  Gradium-->>Browser: end_of_stream or close
```

## Générer un token

Générez le token depuis du code serveur de confiance :

```bash theme={null}
curl -L https://api.gradium.ai/api/api-keys/token \
  -H "x-api-key: $GRADIUM_API_KEY"
```

La réponse contient le token et son horodatage d'expiration :

```json theme={null}
{
  "token": "temporary_token",
  "expires_at": "2026-05-23T12:00:00Z"
}
```

La durée de vie exacte est fixée par le serveur. Lisez `expires_at` et
créez un nouveau token pour chaque nouvelle connexion WebSocket. Un token
est consommé dès sa vérification : ne le réutilisez donc pas pour les
reconnexions.

## Exemple côté serveur

```js theme={null}
import express from "express";

const app = express();

app.post("/gradium-token", async (req, res) => {
  // Check your own user session before issuing a token.
  const response = await fetch("https://api.gradium.ai/api/api-keys/token", {
    headers: {"x-api-key": process.env.GRADIUM_API_KEY},
  });

  if (!response.ok) {
    res.status(502).json({error: "Could not create Gradium token"});
    return;
  }

  res.json(await response.json());
});

app.listen(3000);
```

## Exemple TTS dans le navigateur

```js theme={null}
async function createGradiumSocket() {
  const tokenResponse = await fetch("/gradium-token", {method: "POST"});
  if (!tokenResponse.ok) throw new Error("Could not get Gradium token");

  const {token} = await tokenResponse.json();
  const url = new URL("wss://api.gradium.ai/api/speech/tts");
  url.searchParams.set("token", token);

  return new WebSocket(url);
}

const ws = await createGradiumSocket();

ws.addEventListener("open", () => {
  ws.send(JSON.stringify({
    type: "setup",
    voice_id: "YTpq7expH9539ERJ",
    output_format: "pcm",
  }));
  ws.send(JSON.stringify({type: "text", text: "Hello from the browser."}));
  ws.send(JSON.stringify({type: "end_of_stream"}));
});

ws.addEventListener("message", (event) => {
  const msg = JSON.parse(event.data);
  if (msg.type === "audio") {
    const audioBytes = Uint8Array.from(atob(msg.audio), (c) => c.charCodeAt(0));
    console.log("audio chunk", audioBytes.byteLength);
  }
});
```

## Remarques sur le STT dans le navigateur

Pour le streaming depuis le micro :

* Utilisez `AudioWorklet` ou `MediaStreamTrackProcessor` pour capturer
  l'audio.
* Convertissez l'audio en PCM mono 16 bits.
* Définissez `input_format` sur la fréquence d'échantillonnage réellement
  envoyée, par exemple `pcm_16000`, `pcm_24000` ou `pcm_48000`.
* Envoyez de petits fragments, d'environ 80 à 100 ms, pour réduire la
  latence.

Consultez [Du micro du navigateur au STT](/fr/guides/recipes/browser-microphone-stt)
pour un squelette complet.

## Checklist de sécurité

* Conservez `GRADIUM_API_KEY` uniquement sur votre serveur.
* Authentifiez l'utilisateur avant d'émettre un token.
* Émettez un token par connexion WebSocket.
* Ne journalisez pas les tokens dans vos outils d'analytics ni dans la
  console du navigateur.
* En cas de reconnexion, demandez un nouveau token à votre serveur avant
  d'ouvrir le socket suivant.

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Cycle de vie du WebSocket" icon="diagram-project" href="/fr/guides/websocket-lifecycle">
    Setup, ready, entrée, flush, fin, multiplexage et erreurs.
  </Card>

  <Card title="Du micro du navigateur au STT" icon="microphone" href="/fr/guides/recipes/browser-microphone-stt">
    Capturez l'audio du micro et envoyez-le en flux à Gradium.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.