why deepstreamHub? compare us getting started feature roadmap faq
use cases pricing
developers
company
enterprise blog contact

Getting started with deepstreamHub is easy and takes less than ten minutes. However, if you have any questions, please get in touch.

This is a Preact guide that will take you through deepstreamHub's three core concepts: Records, Events and RPCs.

create-preact-app will assist you to scaffold a new Preact app easily, and we'll use the JavaScript client SDK to interact with deepstreamHub.

Create a free account and get your API key

Create a Preact App

Install create-preact-app globally, and use the tool to scaffold a new app:

# Install create-preact-app
npm install -g create-preact-app
# Scaffold new app
create-preact-app ds-preact

Connect to deepstreamHub and log in

Install the JS library to the ds-preact app you just created:

# With yarn
yarn add deepstream.io-client-js
# With npm
npm install deepstream.io-client-js --save

Get your app url from the dashboard, establish a connection to deepstreamHub, and login (we'll not configure any authentication, because there are no credentials required):

// ./src/App.js
import createDeepstream from 'deepstream.io-client-js';
import { h, render, Component } = 'preact';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    // Connect to deepstream
    this.ds = createDeepstream('<YOUR APP URL>');
    // Login
    this.client = this.ds.login();
  }  
}

export default App;

Records (realtime datastore)

Records are the documents in deepstreamHub’s realtime datastore. A record is identified by a unique id and can contain any kind of JSON data. Clients and backend processes can create, read, write, update and observe the entire record as well as paths within it. Any change is immediately synchronized amongst all connected subscribers.

Records can be arranged in lists and collections and can contain references to other records to allow for the modelling of relational data structures.

You can learn more about records in the records tutorial.

Creating a new record or retrieving an existent one works the same way:

var myRecord = ds.record.getRecord( 'test/johndoe' );

Values can be stored using the .set() method:

myRecord.set({
    firstname: 'John',
    lastname: 'Doe'
});

Let's set up two-way bindings with an input field - whenever a path within our record changes (e.g. firstname), we want to update the input. Whenever a user types, we want to update the record.

Two-way realtime bindings

First, we setup the record and subscribe for changes in the constructor:

// ./src/Record/Record.js
// . . .
class Record extends Component {
    constructor(props) {
        super(props);
        this.state = {
            firstname: '',
            lastname: ''
        };

        // Receive record from parent component
        // <Record record={this.client.record}></Record>
        this.record = this.props.record;
        // Bind handleChange method to the right 'this'
        this.handleChange = this.handleChange.bind(this);

        this.record.subscribe(value => {
            // Update state on input change
            this.setState({firstname: value.firstname});
            this.setState({lastname: value.lastname});
        });
    }
}

then we create the render method for the template which includes the input fields:

// . . .
class Record extends Component {
    // . . .
    render() {
        return(
            <div className="group realtimedb">
                <h2>Realtime Datastore</h2>
                <div className="input-group half left">
                    <label>Firstname</label>
                    <input type="text" value={this.state.firstname} onChange={this.handleChange} id="firstname"/>
                </div>
                <div className="input-group half">
                    <label>Lastname</label>
                    <input type="text" value={this.state.lastname} onChange={this.handleChange} id="lastname"/>
                </div>
            </div>
        );
    }
}

and finally, we add the handleChange method to sync the input fields state:

class Record extends Component {
    // . . .
    handleChange(e) {
        // Handle change and update state
        // based on the values change.
        if(e.target.id === 'firstname') {
            // When 'firstname' changes
            this.setState({firstname: e.target.value});
            this.record.set('firstname', e.target.value);
        } else if(e.target.id === 'lastname') {
            // When 'lastname' changes
            this.setState({lastname: e.target.value});
            this.record.set('lastname', e.target.value);
        }
    }
 //. . .
}

Events (publish-subscribe)

Events are deepstreamHub’s publish-subscribe mechanism. Clients and backend processes can subscribe to event-names (sometimes also called “topics” or “channels”) and receive messages published by other endpoints.

Events are non-persistent, one-off messages. For persistent data, please use records.

Publish-Subscribe

Clients and backend processes can receive events using .subscribe():

constructor() {
    // Receive event object from parent container, App.
    // <Event event={this.client.event}></Event>
    this.event = this.props.event;
    this.event.subscribe('event-data', data => {
        // Handle event
        this.setState({eventsReceived: [...this.state.eventsReceived, data]})
        this.setState({value: ''});
    }.bind(this));
}

... and publish events using .emit():

handleClick(e) {
    this.event.emit('event-data', this.state.value);
}

RPCs (request-response)

Remote Procedure Calls are deepstreamHub’s request-response mechanism. Clients and backend processes can register as “providers” for a given RPC, identified by a unique name. Other endpoints can request said RPC.

deepstreamHub will route requests to the right provider, load-balance between multiple providers for the same RPC, and handle data-serialisation and transport.

Request Response

You can make a request using .make():

handleClick(e) {
    // read the value from the input field
    // and convert it into a number
    var data = {
        a: parseFloat(this.state.a),
        b: parseFloat(this.state.b)
    };

    // Make a request for `multiply-number` with our data object
    // and wait for the response
    this.rpc.make('multiply-number', data, function( err, resp ){

        //display the response (or an error)
        this.setState({displayResponse: resp || err.toString()});
    }.bind(this));
}

and answer using .provide():

constructor() {
    // Receive rpc object from parent container, App
    // <RPC rpc={this.client.rpc}></RPC>
    this.rpc = this.props.rpc;
    this.rpc.provide( 'multiply-numbers', ( data, response ) => {
        response.send( data.a * data.b );
    });
}

Where to go next?

To learn how to use deepstreamHub with any other frontend frameworks, head over to the tutorial section. To learn how to use the JavaScript SDK with NodeJS rather than in a browser, head over to the getting started with NodeJS tutorial.

Live Demo