Web bluetooth device sending and receiving issue

Question

I'm trying to implement data sending with web bluetooth. My aim is sending data to other non-particular bluetooth device. According to documentation, I set acceptAllDevices as true to search all devices not particular ones. I set primaryServiceUUID as random value. I can pair bluetooth devices but cannot send data.

This is what I have done.

import React, { useEffect, useState } from "react";
import { Button, Col, Container, Row } from "reactstrap";
import "./App.css";
import Swal from 'sweetalert2';
import {NotificationContainer, NotificationManager} from 'react-notifications';
let bluetoothDevice, bluetoothServer, sendCharacteristic, receiveCharacteristic;

const primaryServiceUuid = '12345678-1234-5678-1234-56789abcdef0';
const receiveCharUuid = '12345678-1234-5678-1234-56789abcdef1';
const sendCharUuid = '12345678-1234-5678-1234-56789abcdef3';


const App = () => {

  const [isEnabled, setIsEnabled] = useState(true);

  useEffect(() => {
    navigator.bluetooth.getAvailability().then(available => {
      if (available) {
        NotificationManager.success('Success to access Bluetooth');
        setIsEnabled(true);
      }
      else {
        Swal.fire({
          title: 'Sorry, Your device is not Bluetoothable.',
          icon: 'error',
          confirmButtonColor: 'rgb(200, 35, 51)'
        });
        setIsEnabled(false);
      }
    });
  }, []);
  
  const hexToRgb = (hex) => {
    const r = parseInt(hex.substring(1, 3), 16);
    const g = parseInt(hex.substring(3, 5), 16);
    const b = parseInt(hex.substring(5, 7), 16);
    return [r, g, b];
  };

  const onClickConnect = async () => {
    bluetoothDevice = null;
    bluetoothServer = null;
    bluetoothDevice = await navigator.bluetooth.requestDevice({
      // filters: [...] <- Prefer filters to save energy & show relevant devices.
      acceptAllDevices: true
    })
    console.log('bluetooth Device is: ', bluetoothDevice);
    if(!bluetoothDevice) {
      return NotificationManager.error('Whoops. Failed to access to Bluetooth. Try again.');
    }
    NotificationManager.success('Success to pair Bluetooth Device');
    document.getElementById('connected').innerHTML = 'connected';
    
    const bluetoothServer = await bluetoothDevice.gatt.connect();
        
    const service = await bluetoothServer.getPrimaryService(primaryServiceUuid);
    console.log('bluetooth service is: ', service);
    if(!service) {
      return NotificationManager.error('Whoops. Failed to access to Bluetooth. Try again.');
    }
    receiveCharacteristic = await service.getCharacteristic(receiveCharUuid);
    sendCharacteristic = await service.getCharacteristic(sendCharUuid);
    console.log('recv:', receiveCharacteristic, ', send',sendCharacteristic)
    bluetoothDevice.ongattserverdisconnnected = disconnect;
  }

  const listen = () => {
    receiveCharacteristic
    .addEventListener('characteristicvaluechanged', 
      (evt) => {
        const value = evt.target.value.getInt16(0, true);
        document.getElementById('receiveValue').innerText = value;
      });
  
    receiveCharacteristic.startNotifications();
  }

  const disconnect = () => {
    bluetoothDevice = null;
    bluetoothServer = null;
    receiveCharacteristic = null;
    sendCharacteristic = null;
    document.getElementById('connected').innerHTML = 'disconnected';
  }  

  const onClickDisconnect = () => {
    if (!bluetoothDevice) {
      return;
    }
    if (bluetoothDevice.gatt.connected) {
      bluetoothDevice.gatt.disconnect();
      disconnect();
      NotificationManager.success('Disconnected.');
    } else {
      NotificationManager.warning('Alredy disconnected');
    }
  }

  const onClickSend = () => {
    const colourPicker = document.getElementById('colourPicker');
    const data = new Uint8Array([1, ...hexToRgb(colourPicker.value)]);
    sendCharacteristic.writeValue(data);
  }

  const onClickReceive = () => {
    return listen();
  }

  return (
    <div className="App">
      <Container>
        <Row className="d-flex justify-content-around">
          <input type="color" id="colourPicker"></input>
          <div id="connected" className="text-white">disconnected</div>
          <span id="receiveValue" className="text-white"></span>
        </Row>
        <Row className="d-flex justify-content-around">
          <Col xs={6} md={3} lg={2} className="text-center my-3">
            <Button className="w-75" color="primary" onClick={onClickConnect} disabled={!isEnabled}>Connect</Button>
          </Col>

          <Col xs={6} md={3} lg={2} className="text-center my-3">
            <Button className="w-75" color="success" disabled={!isEnabled}>Recieve</Button>
          </Col>

          <Col xs={6} md={3} lg={2} className="text-center my-3">
            <Button className="w-75" color="info" disabled={!isEnabled}>Send</Button>
          </Col>

          <Col xs={6} md={3} lg={2} className="text-center my-3">
            <Button className="w-75" color="danger" onClick={onClickDisconnect} disabled={!isEnabled}>Disconnect</Button>
          </Col>
        </Row>
        <NotificationContainer/>
      </Container>
    </div>
  );
};

export default App;

Here is my issue.

What can I set for primaryServiceUuid? And also for readCharacteristic and receiveCharacteristic

Answer 1

Your application must know the UUID of the service it wants to use. acceptAllDevices and the other non-UUID based filtering methods allow you to match devices which don't advertise that service, but permission to access the service in that case is based on its presence in the optionalServices parameter.