For most frontend developers, frameworks and bundlers are integral to their workflow. They introduce many benefits including keeping projects organised, and making sure they are modular and easy to work with across an entire team. React and webpack are probably the most widely used combination for web development, but there any many more out there and it is an ever growing list.

At Chirp we aim to make integrating data-over-sound into your apps as seamless as possible, that's why as of v3.0.2 we have made the WebAssembly SDK compatible with JS bundlers and published to npm.

This post will show you how to create a simple React component which can send and receive messages, similar to the messenger example at messenger.chirp.io.

First of all,  install the Chirp SDK and add to your dependencies :

npm install chirpsdk --save

Next we create a file which will contain the reusable messenger component. In it we import the SDK, and initialise the components state. We will store the received messages and some other state flags.

import { Chirp } from 'chirpsdk'

class Messenger extends React.Component {

  constructor(props) {
    super(props)
    this.sdk = null
    this.state = {
      started: false,
      received: 'Awaiting messages..',
      disabled: false
    }
  }
  

Then we will create an asynchronous function to initialise the Chirp SDK, so that we can use the handy async/await syntax. Upon initialisation of the SDK, we pass in the callback functions which are called when the SDK changes state, ie. sending or receiving data. Once the data is received, we convert the data to an ASCII string to display the message.

We also set the disabled flag when sending/receiving data to avoid collisions - single channel Chirp protocols cannot send data simultaneously though we do offer multichannel capable configs also.

If the length of the received data is 0, that means the data could not be decoded, so we display a relevant message to the user.

  toAscii(payload) {
    let str = ''
    for (let i = 0; i < payload.length; i++) {
      str += String.fromCharCode(payload[i])
    }
    return str
  }

  async startSDK() {
    this.sdk = await Chirp({
      key: 'APP_KEY',
      onSending: data => { 
        this.setState({ disabled: true }) 
      },
      onSent: data => { 
        this.setState({ disabled: false }) 
      },
      onReceiving: () => {
        this.setState({
          received: '...',
          disabled: true
        })
      },
      onReceived: data => {
        if (data.length > 0) {
          this.setState({
            received: this.toAscii(data),
            disabled: false
          })
        } else {
          this.setState({
            received: `I didn't hear that. Try turning the volume up?`,
            disabled: false
          })
        }
      }
    })
    this.setState({ started: true })
  }
  

Now the brains of the component have been added, all that is left to do is render the component visually.

  render() {
    return (
      <div>
        <h1>Chirp Messenger</h1>
        {this.state.started ? (
          <input
            type="text"
            id="message_input"
            placeholder="Enter message"
          />
          {this.state.disabled ? (
            <button disabled>SEND</button>
          ) : (
            <button 
              onclick={() => {
                const input = document.getElementById('message_input')
                this.sdk.send(input.value)
              }}
            >SEND</button>
          )
          <div class="received-message">
            {<p>{this.state.received}</p>}
          </div>
        ) : (
          <button 
            onclick={() => {
              this.startSDK()
            }}
          >START</button>
        )
      </div>
    )
  }
}

And the React component is complete, ready to be dropped in to any part of your code!

Although this example uses Chirp to send text messages, Chirp SDKs are much more versatile and can send many different data types. In fact the SDKs accept an array of bytes leaving the developer free to encode data as they wish, whether it is numerical, binary or even encrypted data.

For further documentation on the WebAssembly SDK and other platforms including iOS, Android, and Python, you can visit developers.chirp.io. If you have issues or find bugs when using the SDK, please post them on Stack Overflow with the chirp tag. A member of the team or the Chirp community will be able to help.

Chirp is distributed with a generous free plan for developers and start up businesses, so you can start using data-over-sound in your own projects right away!

joe@chirp.io