> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dexpaprika.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start: Your First Stream

> Build your first real-time crypto price streaming application in 5 minutes

<Info>
  **See it in action:** Check out our [Live Streaming Dashboard](https://crypto-streaming-dashboard-v3.vercel.app/) to see real-time price updates across multiple chains before you build your own.
</Info>

## Tutorial overview

In this tutorial, you'll learn how to:

* Connect to the DexPaprika streaming API
* Receive real-time price updates
* Handle connection errors gracefully
* Build a simple price display

**Time to complete**: 5 minutes
**Prerequisites**: Basic JavaScript knowledge

***

## Step 1: Choose Your Asset

For this tutorial, we'll stream the price of Ethereum (WETH).

### Finding Token Addresses

Use the REST API to find token addresses:

1. **Search by name or symbol** using the [Search Endpoint](/api-reference/search/search-for-tokens-pools-and-dexes):

```bash theme={null}
curl "https://api.dexpaprika.com/search?query=WETH"
```

2. **Get network list** using the [Networks Endpoint](/api-reference/networks/get-a-list-of-available-blockchain-networks):

```bash theme={null}
curl "https://api.dexpaprika.com/networks"
```

### Common Token Addresses

Or use these verified addresses for popular tokens:

<Tabs>
  <Tab title="Ethereum">
    ```
    Chain: ethereum
    WETH: 0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2
    USDC: 0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48
    ```
  </Tab>

  <Tab title="Solana">
    ```
    Chain: solana
    SOL: So11111111111111111111111111111111111111112
    USDC: EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v
    ```
  </Tab>

  <Tab title="BSC">
    ```
    Chain: bsc
    BNB: 0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c
    USDT: 0x55d398326f99059ff775485246999027b3197955
    ```
  </Tab>
</Tabs>

***

## Step 2: Test with cURL

First, let's verify the stream works with a simple cURL command:

```bash theme={null}
curl -N "https://streaming.dexpaprika.com/stream?method=t_p&chain=ethereum&address=0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2&limit=3"
```

You should see output like:

```
data: {"a":"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2","c":"ethereum","p":"3997.5514026436525223","t":1761733397}
event: t_p

data: {"a":"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2","c":"ethereum","p":"3998.1234567890123456","t":1761733398}
event: t_p
```

<Tip>
  The `limit=3` parameter closes the stream after 3 events - perfect for testing!
</Tip>

***

## Step 3: JavaScript Implementation

Here's how to connect to the streaming API using JavaScript:

```javascript theme={null}
// Connect to streaming API
const url = new URL('https://streaming.dexpaprika.com/stream');
url.searchParams.set('method', 't_p');
url.searchParams.set('chain', 'ethereum');
url.searchParams.set('address', '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2');

const eventSource = new EventSource(url.toString());

// Handle price updates
eventSource.addEventListener('t_p', (event) => {
    const data = JSON.parse(event.data);
    const price = parseFloat(data.p);
    console.log(`WETH Price: $${price.toFixed(2)}`);
});

// Handle errors with reconnection
eventSource.onerror = () => {
    console.log('Connection lost, reconnecting...');
    eventSource.close();
    // Implement reconnection logic here
};
```

<Note>
  **🎯 Live Example:** See this code in action in our [Interactive Streaming Dashboard](https://crypto-streaming-dashboard-v3.vercel.app/) - watch 6 tokens stream live across Ethereum, Solana, and BSC with real-time updates, connection status, and latency monitoring.
</Note>

***

## Step 4: Customize Your Stream

### Stream Different Tokens

Modify the URL parameters to stream any token:

```javascript theme={null}
// Bitcoin on Ethereum
url.searchParams.set('chain', 'ethereum');
url.searchParams.set('address', '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599');

// SOL on Solana
url.searchParams.set('chain', 'solana');
url.searchParams.set('address', 'So11111111111111111111111111111111111111112');

// BNB on BSC
url.searchParams.set('chain', 'bsc');
url.searchParams.set('address', '0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c');
```

### Add Multiple Assets

To stream multiple assets, switch to the POST method:

<Expandable title="View implementation">
  ```javascript theme={null}
  async function streamMultipleAssets() {
      const assets = [
          { chain: 'ethereum', address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', method: 't_p' },
          { chain: 'solana', address: 'So11111111111111111111111111111111111111112', method: 't_p' }
      ];

      const response = await fetch('https://streaming.dexpaprika.com/stream', {
          method: 'POST',
          headers: {
              'Accept': 'text/event-stream',
              'Content-Type': 'application/json'
          },
          body: JSON.stringify(assets)
      });

      const reader = response.body.getReader();
      const decoder = new TextDecoder();

      while (true) {
          const { value, done } = await reader.read();
          if (done) break;

          const text = decoder.decode(value, { stream: true });
          // Parse SSE events from text
          console.log(text);
      }
  }
  ```
</Expandable>

***

## Understanding the Code

### Key Components

<AccordionGroup>
  <Accordion title="EventSource API">
    The `EventSource` API is the browser's built-in way to handle SSE:

    ```javascript theme={null}
    const eventSource = new EventSource(url);
    eventSource.addEventListener('t_p', handler);
    ```

    It automatically handles:

    * Persistent connections
    * Automatic reconnection
    * Event parsing
  </Accordion>

  <Accordion title="Error Handling">
    The `onerror` callback handles disconnections:

    ```javascript theme={null}
    eventSource.onerror = () => {
        // Implement exponential backoff
        const delay = baseDelay * Math.pow(2, attempts);
        setTimeout(reconnect, delay);
    };
    ```
  </Accordion>

  <Accordion title="Price Updates">
    Each event contains:

    ```javascript theme={null}
    {
        "a": "address",     // Token contract address
        "c": "chain",       // Blockchain network
        "p": "price",       // USD price as string
        "t": timestamp      // Unix timestamp
    }
    ```
  </Accordion>
</AccordionGroup>

***

## Implementation Notes

### Browser Support

* EventSource API works in all modern browsers
* For direct browser connections, you'll need to handle CORS (use a backend proxy)
* No issues when streaming from server-side (Node.js, Python, etc.)

### Best Practices

* Implement exponential backoff for reconnection
* Handle both connection errors and SSE error events
* Parse prices as floats to maintain precision
* Close connections properly on page unload

***

## See It Live

<Card title="🚀 Live Streaming Dashboard" icon="rocket" href="https://crypto-streaming-dashboard-v3.vercel.app/">
  **Experience the API in action!** Our interactive demo streams 6 cryptocurrencies in real-time across Ethereum, Solana, and BSC. Watch live price updates, connection status, latency metrics, and update statistics. Built with React and deployed on Vercel - perfect reference implementation showing POST /stream with multiple assets.

  **What you'll see:**

  * Real-time price updates every \~1 second
  * Multi-chain token streaming (ETH, SOL, BSC)
  * Live connection status and latency
  * Price change indicators and trends
  * Total updates and uptime metrics
</Card>

***

## Next Steps

Congratulations! You've built your first streaming application. Here's what to explore next:

<CardGroup cols={2}>
  <Card title="React Integration" icon="react" href="/streaming/guides/react-integration">
    Create reusable React components for streaming.
  </Card>

  <Card title="Stream Multiple Assets" icon="signal-stream" href="/streaming/streaming-post-multiple-assets">
    Learn POST /stream to efficiently track multiple tokens.
  </Card>

  <Card title="Portfolio Tracker" icon="wallet" href="/streaming/tutorials/portfolio-tracker">
    Track your entire portfolio value in real-time.
  </Card>

  <Card title="Production Best Practices" icon="shield-check" href="/streaming/guides/production">
    Learn error handling, monitoring, and scaling.
  </Card>
</CardGroup>

***

## Get Help

<CardGroup cols={2}>
  <Card title="Join Discord" icon="discord" href="https://discord.gg/DhJge5TUGM">
    Get help from our community.
  </Card>

  <Card title="API Reference" icon="book" href="/streaming/streaming-token-prices">
    Read the complete API documentation.
  </Card>
</CardGroup>