Javascript communication between a React component and a js library

Question

I have been working on a Bluetooth based KaiOS mobile application in which the user interfaces have developed using React.js and I had created a simple javascript class to manage the Bluetooth based operations such as scanning, connect/disconnect, data transfer, etc. I have been trying to send data or object to the react component from the Blemanager.js class when the devices are scanned.

The following code has been used to check for a device with a particular address and if found, resolve the promise so that the object has been sent to the React component. Now, I do want to send the scanned devices object to the react component and check the notified device object is the required one, and stop scanning. How this can be achieved in Javascript.

I am an iOS developer and with respect to iOS, I am looking for a delegation or observable pattern.

startLeScan = () => {
    return new Promise((resolve, reject) => {
      navigator.mozBluetooth.defaultAdapter.startLeScan([])
      .then(function(handlerLE) {
        handlerLE.ondevicefound = function(eventLE) {
          if (eventLE.device.address === "ed:ec:90:87:5d:86") {
            navigator.mozBluetooth.defaultAdapter.stopLeScan(eventLE.target);
            console.log('FOUND:', 'Address:', eventLE.device.address, 'Name:', eventLE.device.name, 'Type:', eventLE.device.type);

            resolve({"eventLE":eventLE})
          }
        }
      })
      .catch(function(e) {
        console.log(e);
        reject({error: e })
      });
    })
  }

score 1 · Answer 1 · answered Oct 19 '20 at 12:22

1

I would refer to this documentation on the Bluetooth spec including good examples on how to use it.

https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web

There is a characteristics object onto which you can attach event handlers. These can in turn fire your class methods as pleased.

Also there is an onDisconnected method that can also fire your methods.

answered Oct 19 '20 at 12:22

Phil

307
3
12

Thanks, I will go through this. – sree_iphonedev Oct 19 '20 at 13:52

score 1 · Answer 2 · answered Oct 19 '20 at 12:30

1

Assuming you use redux in your application, communication between a utility class and component class can be done by passing down the store object to the utility class.

create a utility class, non-component.

import { bindActionCreators } from 'redux';
import { setBluetoothAddresses } from './some-action-file';

class BluetoothUtility {
  constructor(store) {
    this.actions = bindActionCreators(
      { setBluetoothAddresses },
      store.dispatch
    )
  }

  startLeScan = () => {
     // on promise done => call this.actions.setBluetoothAddresses with resolved value
  }
}

let instance;
export const initBluetoothUtility = (store) => {
  if (!instance) {
    instance = new BluetoothUtility(store);
  }
}

in root component, where you use redux provider

class App {
   componentDidMount() {
     initBluetoothUtility(store);
   }
}

then in the component you can use the value from redux store

answered Oct 19 '20 at 12:30

kirecligol

848
7
12

Thanks for the help. Actually, I am very new to web technologies and React.js. I think your suggestion is the right way to implement such things. Definitely, I will have a look at the redux part. I haven't used it yet in the project, but I heard about it. Could you please suggest a good tutorial to learn redux for a beginner in React.js? Thanks a lot. – sree_iphonedev Oct 19 '20 at 13:52
here is a course by Dan Abramov https://egghead.io/courses/getting-started-with-redux – kirecligol Oct 19 '20 at 15:44
Hi, I had been gone through various tutorials and in which the examples were shown as communication between react components. I couldn't find a tutorial in which an explanation for communication between react and non react component. If you have any, could you please share? I have seen various terms like react middleware, react thunks,... Is it required to implement my need? – sree_iphonedev Oct 28 '20 at 17:57

Javascript communication between a React component and a js library

2 Answers2