On some occasions, data can be made instantly available at fast intervals. The data can change so fast that the user of a conventional app won’t have the realtime update, even if they constantly refresh a page or click the reload button.

Daily bank transactions, bitcoin transactions, stock, large sales — these are all possible situations where you might encounter issues with fast data availability. Issues, which no businesses would want to encounter in their daily activities. The problem is simply in the management and delivery of the data when it’s needed.

The best way forward is to provide this information as soon as it is made available. This is achievable with realtime updates with any of the following forms:

• Realtime Database: Databases that store live data. Data stored in such databases are pushed to connected clients as soon as writes are made.
• Pub Sub: This is the most common pattern. Publishing realtime events when data is available and subscribing to it via a client to make updates.
• RPC: This is a less common pattern which entails handling realtime updates using the request/response pattern we usually see on the web (Express.js for example).

deepstreamHub is a realtime platform that provides these three core options as a service. Which means you can either use Realtime Datastore, Pub Sub, or RPCs by just creating an account and simply connecting with an app URL. You could also combine two or three of them depending on your needs but it’s important to bear in mind they are independent on each other.

What we are building

We are going to have a look at an integration example of deepstreamHub and CanvasJS chart plugin that simulates live updates and displays them on the chart. We are going to simulate fast sales at intervals between 2 to 6 seconds. At each of these intervals, we would generate 100 random sale prices and watch the updates come in.

The Data Provider

deepstream server to custom sever communication

deepstream lives everywhere — your browser, mobile and server. We will make use of the RPC feature to request a large dataset, then we can handle realtime updates using the live datastore.

A simple example with Node (using the JS SDK):

• First, you need to install the deepstream JavaScript SDK via NPM:

npm install --save deepstream.io-client-js

• You can use the SDK to log into the deepstreamHub server using an APP URL. This URL is provided on your dashboard after creating a deepstreamHub account.
• Once logged in, you can use the authenticated information to communicate with the server. We are using the RPC’s provide method to handle incoming request from the client. Once a request is made, we send a payload of existing dataset.
• The dataset is a historical Bitcoin price in May 2017 and has the following structure:

• The structure shows the reason for the utility formatData method which takes in the dataset, iterates over them and creates an array structure that we can feed to the client.
• Lastly, we update a price live record at intervals with random data.

The Client

deepstream server to client communication

We have a historical dataset provider and we are setting records at intervals. This simulates (to some extent) constantly changing data. What we can do now is make the requests from the client and update the client with the realtime changing prices:

• We import the CanvasJS and deepstream libraries. Then, just like we did on the server, we create a connection to deepstream with the same App URL.
• The RPC’s make method is used to make requests that the matching provide method will handle. make takes a callback which receives the payload sent from the server.
• We use the received data to draw an area chart with the help of CanvasJS library.
• Finally, we listen to the record updates and update the chart’s data source with the incoming realtime prices.

Conclusion

deepstream is a 360deg realtime service. It covers all the common patterns we are used to while building realtime solutions. This means you do not have to use different services for different patterns. Click here to view more use cases.