LogoLogo
  • Introduction
    • What is Graffle?
  • Graffle Management Dashboard
    • Dashboard
    • Company Switcher
    • Projects
      • Creating a New Project
      • Project Details
      • Project Indexers
        • Indexer Webhooks
        • Securing Indexer Webhooks
    • Webhook Logs
    • Company Management
      • Roles and Permissions
      • Inviting User
      • Changing Company Name
    • Profile
  • APIs
    • Event Search API
    • Flow API
    • Event Livestream
  • Open Source
    • Graffle Flow SDK
    • Local Event Indexer
Powered by GitBook
On this page
  1. APIs

Event Livestream

PreviousFlow APINextGraffle Flow SDK

Last updated 2 years ago

If you have livestreaming enabled on an indexer for one of your projects (check the 'Stream Enabled' box in project settings: ), you can stream events in real time to your frontend. This is best used when you want to show live events on your site, without polling the Event Search API or your own API.

Note: You can contact us on our discord for an API key.

To get started, install the livestream SDK by running:

npm install @graffle/flow-livestream-sdk  

Then configure the SDK with your project Id and API key, and whether this is a test net project.

const clientConfig = {
    projectId: '<your project id>',
    apiKey: '<your api key>'
  };

const streamSDK = new GraffleSDK(clientConfig);
// or `const streamSDK = new GraffleSDK(clientConfig, true);` for test net

Then, create a function to display/process events as they come in and pass this function to the SDK via the stream method.

const displayEvent = (message) => {
    console.log(message);
    //display/process the event here
  };

  useEffect(() => {
    streamSDK.stream(displayEvent);
  }, []);

To disconnect and stop receiving events, call the disconnect method

streamSDK.disconnect();

https://docs.graffle.io/graffle-docs/graffle-management-dashboard/projects/project-indexers