IA3X State - Demo & Ejemplos de Integración

Prueba interactiva + ejemplos de cómo integrar desde Frontend y Backend

← Volver
Demo Interactivo
Backend (REST API)
Frontend (SDK JS)
API Tester

1. Conectar (WebSocket)

Desconectado

2. Set Key

3. Get Key

4. Observe Key

Event Log

Integración Backend (Server-to-Server)

Desde cualquier backend (PHP, Node.js, Python, etc.) puedes usar la API REST con el token de tu app. No necesitas WebSockets — los cambios hechos por API se propagan automáticamente a los clientes suscritos.

cURL

# Definir token
TOKEN="tu_token_aqui"
BASE="https://firebase.ia3x.com"

# SET - Guardar un valor
curl -X POST "$BASE/api/state/set" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"key":"hospital1/turnos/caja3","value":{"ticket":"A-102","estado":"llamando","caja":"3"}}'

# GET - Leer un valor
curl "$BASE/api/state/get?key=hospital1/turnos/caja3" \
  -H "Authorization: Bearer $TOKEN"

# LIST - Listar llaves por prefijo
curl "$BASE/api/state/list?prefix=hospital1/turnos/&limit=50" \
  -H "Authorization: Bearer $TOKEN"

# DELETE - Eliminar una llave
curl -X DELETE "$BASE/api/state/delete?key=hospital1/turnos/caja3" \
  -H "Authorization: Bearer $TOKEN"

PHP (Backend)

<?php
// Configuración
$baseUrl = 'https://firebase.ia3x.com';
$token   = 'tu_token_aqui';

/**
 * SET - Guardar un valor
 */
function ia3xSet($key, $value) {
    global $baseUrl, $token;
    $ch = curl_init("$baseUrl/api/state/set");
    curl_setopt_array($ch, [
        CURLOPT_POST           => true,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER     => [
            "Authorization: Bearer $token",
            'Content-Type: application/json',
        ],
        CURLOPT_POSTFIELDS => json_encode([
            'key'   => $key,
            'value' => $value,
        ]),
    ]);
    $resp = curl_exec($ch);
    curl_close($ch);
    return json_decode($resp, true);
}

/**
 * GET - Leer un valor
 */
function ia3xGet($key) {
    global $baseUrl, $token;
    $ch = curl_init("$baseUrl/api/state/get?key=" . urlencode($key));
    curl_setopt_array($ch, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER     => ["Authorization: Bearer $token"],
    ]);
    $resp = curl_exec($ch);
    curl_close($ch);
    $data = json_decode($resp, true);
    return $data['value'] ?? null;
}

/**
 * LIST - Listar llaves por prefijo
 */
function ia3xList($prefix = '', $limit = 100) {
    global $baseUrl, $token;
    $url = "$baseUrl/api/state/list?prefix=" . urlencode($prefix) . "&limit=$limit";
    $ch = curl_init($url);
    curl_setopt_array($ch, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER     => ["Authorization: Bearer $token"],
    ]);
    $resp = curl_exec($ch);
    curl_close($ch);
    $data = json_decode($resp, true);
    return $data['items'] ?? [];
}

/**
 * DELETE - Eliminar una llave
 */
function ia3xDelete($key) {
    global $baseUrl, $token;
    $ch = curl_init("$baseUrl/api/state/delete?key=" . urlencode($key));
    curl_setopt_array($ch, [
        CURLOPT_CUSTOMREQUEST  => 'DELETE',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_HTTPHEADER     => ["Authorization: Bearer $token"],
    ]);
    $resp = curl_exec($ch);
    curl_close($ch);
    return json_decode($resp, true);
}

// ── Ejemplo de uso ──

// Tu backend procesa un turno y lo publica:
ia3xSet('hospital1/turnos/caja3', [
    'ticket' => 'A-102',
    'estado' => 'llamando',
    'caja'   => '3',
    'hora'   => date('H:i:s'),
]);
// → Los clientes frontend suscritos reciben el cambio en tiempo real

// Leer el valor actual:
$turno = ia3xGet('hospital1/turnos/caja3');
echo $turno['ticket']; // "A-102"

// Listar todos los turnos:
$turnos = ia3xList('hospital1/turnos/');
foreach ($turnos as $t) {
    echo $t['key'] . ' → ' . json_encode($t['value']);
}

Node.js (Backend)

// Configuración
const BASE_URL = 'https://firebase.ia3x.com';
const TOKEN    = 'tu_token_aqui';

const headers = {
    'Authorization': `Bearer ${TOKEN}`,
    'Content-Type':  'application/json',
};

// SET
async function ia3xSet(key, value) {
    const res = await fetch(`${BASE_URL}/api/state/set`, {
        method: 'POST',
        headers,
        body: JSON.stringify({ key, value }),
    });
    return res.json();
}

// GET
async function ia3xGet(key) {
    const res = await fetch(
        `${BASE_URL}/api/state/get?key=${encodeURIComponent(key)}`,
        { headers }
    );
    const data = await res.json();
    return data.value;
}

// LIST
async function ia3xList(prefix = '', limit = 100) {
    const res = await fetch(
        `${BASE_URL}/api/state/list?prefix=${encodeURIComponent(prefix)}&limit=${limit}`,
        { headers }
    );
    const data = await res.json();
    return data.items || [];
}

// DELETE
async function ia3xDelete(key) {
    const res = await fetch(
        `${BASE_URL}/api/state/delete?key=${encodeURIComponent(key)}`,
        { method: 'DELETE', headers }
    );
    return res.json();
}

// ── Ejemplo de uso ──

await ia3xSet('dashboard/ventas', {
    total: 15420.50,
    transacciones: 87,
    ultimaVenta: new Date().toISOString(),
});

const ventas = await ia3xGet('dashboard/ventas');
console.log(ventas.total); // 15420.50

Python (Backend)

import requests

BASE_URL = "https://firebase.ia3x.com"
TOKEN    = "tu_token_aqui"
HEADERS  = {"Authorization": f"Bearer {TOKEN}"}

def ia3x_set(key, value):
    r = requests.post(f"{BASE_URL}/api/state/set",
        json={"key": key, "value": value}, headers=HEADERS)
    return r.json()

def ia3x_get(key):
    r = requests.get(f"{BASE_URL}/api/state/get",
        params={"key": key}, headers=HEADERS)
    return r.json()["value"]

# Ejemplo
ia3x_set("alertas/sistema", {"nivel": "warning", "msg": "CPU al 90%"})
alerta = ia3x_get("alertas/sistema")
print(alerta["msg"])  # "CPU al 90%"

Flujo Backend → Frontend en Tiempo Real

1. Tu backend (PHP, Node, Python) hace POST /api/state/set con un valor
2. La API guarda el valor en MySQL
3. La API notifica al servidor WebSocket internamente
4. El servidor WebSocket envía state_changed a todos los clientes suscritos a esa llave
5. El frontend recibe el cambio instantáneamente vía observe()

No necesitas WebSockets en tu backend — la API REST se encarga de propagar los cambios automáticamente.

Integración Frontend (SDK JavaScript)

Paso 1: Incluir el SDK

<!-- Agregar antes de tu script -->
<script src="https://firebase.ia3x.com/sdk/ia3x-state.js"></script>

Paso 2: Conectar y usar

const client = new IA3XState({
    baseUrl: "https://firebase.ia3x.com",
    token:   "TU_TOKEN_AQUI",
    onConnect:    (d) => console.log("Conectado:", d.app.name),
    onDisconnect: ()  => console.log("Desconectado"),
    onError:      (e) => console.error("Error:", e.message),
});

// Conectar (inicia WebSocket + autenticación)
await client.connect();

// Guardar un valor
await client.set("hospital1/turnos/caja3", {
    ticket: "A-102",
    estado: "llamando",
});

// Leer un valor
const data = await client.get("hospital1/turnos/caja3");
console.log(data.ticket); // "A-102"

// Observar cambios en tiempo real
const unsub = client.observe("hospital1/turnos/caja3", (valor) => {
    console.log("Cambio detectado:", valor);
    // Actualizar tu UI aquí
});

// Dejar de observar
unsub(); // o client.unsubscribe("hospital1/turnos/caja3")

// Desconectar
client.disconnect();

Ejemplo Completo: Pantalla de Turnos

<!-- pantalla-turnos.html -->
<div id="turno-actual">Esperando...</div>

<script src="https://firebase.ia3x.com/sdk/ia3x-state.js"></script>
<script>
(async () => {
    const client = new IA3XState({
        baseUrl: "https://firebase.ia3x.com",
        token: "TOKEN_DE_PANTALLA",
    });
    await client.connect();

    client.observe("hospital1/turnos/caja3", (turno) => {
        if (!turno) return;
        document.getElementById("turno-actual").innerHTML = `
            <h1>Ticket: ${turno.ticket}</h1>
            <h2>Caja: ${turno.caja}</h2>
            <p>Estado: ${turno.estado}</p>
        `;
    });
})();
</script>

API Tester (REST directo)

Prueba la API REST directamente desde el navegador, sin WebSockets. Simula lo que haría tu backend.

Request

Response