All documentation
Getting Started

Browser and React Client Snippet

A simple browser or React-style snippet showing how a frontend client would connect using a short-lived token.

JavaScript

Overview

Browser and React apps should not hold the project secret key. Instead: 1. Your backend creates a short-lived PulseGrid client token 2. The browser or React app receives that token 3. The app connects to the websocket using the token

Setup

Your backend should return a client token to the frontend after authenticating the user in your own system.

Code example

Browser and React Client Snippet 
const clientToken = "TOKEN_FROM_YOUR_BACKEND";
const projectId = "your-project-id";
const channelSlug = "demo-channel";

const socket = new WebSocket(
  `wss://www.altrancconnect.com/ws/channels/${projectId}/${channelSlug}/?token=${encodeURIComponent(clientToken)}`
);

socket.onopen = () => {
  console.log("Connected");
  socket.send(JSON.stringify({
    event: "message",
    data: { text: "Hello from browser" },
    meta: { source: "browser_client" },
  }));
};

socket.onmessage = (event) => {
  console.log(JSON.parse(event.data));
};

Notes

The browser should only receive short-lived client tokens, never the PulseGrid secret key. Production AltraNC Connect WebSocket connections use wss://www.altrancconnect.com/... .