Client Integration

Integrate the Events API into your application.

React

import { useEffect, useState } from 'react';

interface MarketEvent {
  eventType: string;
  issuer: string;
  filedAt: string;
  metadata?: Record<string, unknown>;
}

export function useEventStream() {
  const [events, setEvents] = useState<MarketEvent[]>([]);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    const source = new EventSource(
      'https://events.matchstick.trading/api/stream'
    );

    source.onopen = () => setConnected(true);

    source.onmessage = (e) => {
      const event = JSON.parse(e.data);
      setEvents((prev) => [event, ...prev].slice(0, 100));
    };

    source.onerror = () => setConnected(false);

    return () => source.close();
  }, []);

  return { events, connected };
}

// Usage
function EventFeed() {
  const { events, connected } = useEventStream();

  return (
    <div>
      <div>Status: {connected ? 'Connected' : 'Disconnected'}</div>
      {events.map((event, i) => (
        <div key={i}>
          {event.eventType}: {event.issuer}
        </div>
      ))}
    </div>
  );
}

Vue 3

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

interface MarketEvent {
  eventType: string;
  issuer: string;
  filedAt: string;
}

const events = ref<MarketEvent[]>([]);
const connected = ref(false);
let source: EventSource | null = null;

onMounted(() => {
  source = new EventSource('https://events.matchstick.trading/api/stream');
  source.onopen = () => (connected.value = true);
  source.onmessage = (e) => {
    events.value = [JSON.parse(e.data), ...events.value].slice(0, 100);
  };
  source.onerror = () => (connected.value = false);
});

onUnmounted(() => source?.close());
</script>

<template>
  <div>
    <div>Status: {{ connected ? 'Connected' : 'Disconnected' }}</div>
    <div v-for="(event, i) in events" :key="i">
      {{ event.eventType }}: {{ event.issuer }}
    </div>
  </div>
</template>

Node.js

import EventSource from 'eventsource';

const source = new EventSource(
  'https://events.matchstick.trading/api/stream'
);

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Event:', data.eventType, data.issuer);
};

source.onerror = (error) => {
  console.error('Connection error:', error);
};

// Graceful shutdown
process.on('SIGINT', () => {
  source.close();
  process.exit(0);
});

Python

import sseclient
import requests
import json

def stream_events():
    url = 'https://events.matchstick.trading/api/stream'
    response = requests.get(url, stream=True)
    client = sseclient.SSEClient(response)

    for event in client.events():
        if event.data:
            data = json.loads(event.data)
            print(f"Event: {data['eventType']} - {data['issuer']}")

if __name__ == '__main__':
    stream_events()

Reconnection

Always implement reconnection with exponential backoff:

function createConnection(onEvent: (data: any) => void) {
  let source: EventSource | null = null;
  let retryCount = 0;

  function connect() {
    source = new EventSource('/api/stream');

    source.onopen = () => {
      retryCount = 0;
    };

    source.onmessage = (e) => onEvent(JSON.parse(e.data));

    source.onerror = () => {
      source?.close();
      const delay = Math.min(1000 * 2 ** retryCount, 30000);
      setTimeout(connect, delay);
      retryCount++;
    };
  }

  connect();
  return () => source?.close();
}