BLE Chat

Este sistema funciona mediante la comunicación con la placa Archi, a la cual nos conectamos utilizando su sistema de Bluetooth integrado. Desde el sistema, es posible conectar o desconectar el dispositivo, así como enviar y recibir información. Toda la actividad se visualiza a través de una consola en pantalla, donde se muestran los datos recibidos y enviados en tiempo real. Visualizar interfaz en funcionamiento

Pantalla en funcionamiento

Funciones principales

Conexión con la placa y el servidor

• En esta funcion realizamos la conexion mediante Bluetooth a través de la funcion del navegador. Una vez encontrado el dispositivo BLE, se establece la conexión con el servidor, permitiendo enviar y recibir información. Además, incluye la opción de procesar la respuesta y una salida para los errores.

async function connectBLE() {
    const nameFilter = document.getElementById('deviceName').value;
    try {
        log('Buscando dispositivo BLE...');
        bleDevice = await navigator.bluetooth.requestDevice({
            filters: [{ name: nameFilter }],
            optionalServices: [SERVICE_UUID]
        });
        const server = await bleDevice.gatt.connect();
        const service = await server.getPrimaryService(SERVICE_UUID);

        txCharacteristic = await service.getCharacteristic(TX_UUID);
        rxCharacteristic = await service.getCharacteristic(RX_UUID);
        await txCharacteristic.startNotifications();
    
        txCharacteristic.addEventListener('characteristicvaluechanged', handleNotifications);

        log('✅ Conectado a ' + bleDevice.name);
        document.getElementById('sendBtn').disabled = false;
        document.getElementById('disconnectBtn').disabled = false;
        document.getElementById('connectBtn').disabled = true;
    } catch (error) {
        log('❌ Error: ' + error);
    }    
}

Desconexion con la placa y el servidor

• En esta funcion realizamos la desconexión del dispositivo, enviando el dato al servidor para procesar la desconexion.

async function disconnectBLE() {
    if (bleDevice && bleDevice.gatt.connected) {
        await bleDevice.gatt.disconnect();
        log('🔌 Desconectado');
        document.getElementById('sendBtn').disabled = true;
        document.getElementById('disconnectBtn').disabled = true;
        document.getElementById('connectBtn').disabled = false;
    }
}

Envío y procesamiento de información

• Aquí se procesa y valida el texto para la comunicación con el servidor, enviando el mensaje tanto al servidor como a la consola de la interfaz

async function sendMessage() {
    const msg = document.getElementById('message').value;
    if (!msg || !rxCharacteristic) return;
    await rxCharacteristic.writeValue(new TextEncoder().encode(msg));
    log('📤 Enviado: ' + msg);
    document.getElementById('message').value = '';    
}

Recepcion de datos del servidor o placa

• Aquí se procesan los mensajes recibidos y se envían a la función encargada de mostrarlos en la consola.

function handleNotifications(event) {
    const value = new TextDecoder().decode(event.target.value);
    log('📥 Recibido: ' + value);
}

Vista de mensaje en la consola

• En esta parte se simula una consola donde se muestran los mensajes de conexión, desconexión, envío y recepción.

function log(msg) {
    const line = document.createElement('div');
    line.textContent = msg;
    line.className = "msg"
    if (logLineCount % 2 === 0) {
        line.style.backgroundColor = 'rgb(187 144 211 / 25%)';
    } else {
        line.style.backgroundColor = 'rgb(163 195 217 / 25%)';
    }
    logArea.appendChild(line);
    logArea.scrollTop = logArea.scrollHeight;
    logLineCount++;
}

Conexión a funciones

• En esta parte del código se asocian los botones con las funciones correspondientes.

document.getElementById('connectBtn').addEventListener('click', connectBLE);
document.getElementById('sendBtn').addEventListener('click', sendMessage);
document.getElementById('disconnectBtn').addEventListener('click', disconnectBLE);