JS SDK

Data Engine's live data feeds can be accessed through the Relayer using the official JS SDK.

Overview

The general process to set-up and other do's & don'ts while connecting to the relayer remain the same as discussed in the WebSockets section.

You can connect to the Relayer using the JS-SDK across 2 platforms - the browser (web) & node.js (server-side). The SDK allows you to seamlessly use it across both the codebases without any changes and do so with full-type safety by TypeScript Support.

Install

Using Package Managers

The SDK is available to install in your applications using your favorite package manager. It is currently published on NPM. This is the easiest way to install the SDK if you're using a modern web framework like Next.js, React or Astro. Or if you're using any runtime like Node.js, Bun etc.

npm

npm i @yggdrasil-protocol/relayer-sdk

yarn

yarn add @yggdrasil-protocol/relayer-sdk

pnpm

pnpm add @yggdrasil-protocol/relayer-sdk

Using CDN

The SDK can also be installed in your project even when you're not using a package manager. To add the SDK to your frontend you can use a popular CDN to deliver the minified SDK on the edge.

unpkg

<script src="https://unpkg.com/@yggdrasil-protocol/relayer-sdk"></script>

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/@yggdrasil-protocol/relayer-sdk"></script>

Quick Start

1. Set-Up

Firstly, set-up your imports and initialize the SDK with the appropriate feedIDs.

index.ts

// or 
// this would be available in the global space if using through cdn

2. Consume Events

Then, add event listeners to receive the relevant events related to the connection you've just set-up.

index.ts

// to receive data feeds
ws.addListener("data", (e) => {
  console.log(e);
});

// to receive connection related info messages
ws.addListener("info", (e) => {
  console.info(e);
});

The SDK supports the following events for which you can add relevant event listeners -

1. data : Receives the data events for all the data feeds that you've initially subscribed to in the form of Price Response.
2. info : Receives the connection related info messages like Subscription Response among others.
3. open : Event is initiated whenever the Relayer connection is started.

4. close : Event is initiated whenever the Relayer connection is closed.

3. Connect

Now, that you've set-up everything. We can start the connection with an appropriate deadline and fetch the data feeds.

index.ts

// close the conn after 10s
setTimeout(() => {
  ws.close();
}, 10000);

// start the conn
ws.connect();

Live Example

Web

Node.js

https://codesandbox.io/p/devbox/relayer-js-sdk-node-js-example-2hlgg4?embed=1&file=/index.js