Tutorials

Websockets Scaffold

Intro

Websockets make possible an entirely new generation of apps which depend on real-time data. RVNBOX SDK has websockets built in. Our new scaffold enables you to bootstrap a Ravencoin React app with RVNBOX and websockets integration in under a minute. Accelerate your workflow with RVNBOX Scaffolds.


@porlybe created Donate Function, which shows the power of websockets and let's you bootstrap your next great app. It's powered by RVNBOX and lets you display logos and QR codes for donations.

Websocket scaffold homepage

When a donation is made a modal appears showing the amount.

devRVN donation

devMSFT donation


Scaffold

We created a scaffold from Donate RVN to quickly let you bootstrap a React app w/ RVNBOX and websockets with no further setup. First run the new command and pass in the --scaffold websockets flag.

rvnbox new donateRVN --scaffold websockets

websocket scaffold

Next cd into donateRVN, install the deps and start the app.

cd donateRVN
npm install
npm start

Edit src/donation.js to add donation addresses, locations and logos. You can add new logos to src/assets/.


Leveraging RVNBOX

Donate RVN shows very practical ways to leverage RVNBOX when creating an app. It demonstrates unit and address conversion, calling REST and listening on a websocket.

Unit Conversion

RVNBOX can convert whole RVN units to satoshis as well as converting satoshis to bits and back to whole units. The scaffold converts satoshis to whole RVN.

const value = RVNBOX.RavenCoin.toRavencoin(curr.satoshi)

Address Conversion

RVNBOX has methods for converting different Address Types.

const isLegacyAddress = RVNBOX.Address.isLegacyAddress(address)

REST

RVNBOX SDK has REST integration bundled. The scaffold calls Address.details to get back utxo for an address.

RVNBOX.Address.details(addr).then(
  result => {
    result.forEach(r => {
      Object.keys(donations).forEach(p => {
        if (p === r.legacyAddress)
          donations[p].balance = (r.unconfirmedBalance + r.balance).toFixed(8)
      })
    })
    this.setState({
      donations,
    })
  },
  err => {
    console.log(err)
  }
)

Socket

The Socket class lets you quickly get real-time blockchain data. First create an instance and then call listen. Here's how the scaffold updates the UI after new tx data comes in.

const socket = new RVNBOX.Socket()
socket.listen('transactions', this.handleNewTx)

Summary

RVNBOX SDK has websockets built in which enables real-time data in Ravencoin apps. Our websocket scaffold lets you bootstrap a Ravencoin React app with RVNBOX and websockets integration in under a minute.

Share on...