Client Integration

Build custom integrations with the Matchstick Events stream.

For Developers

This guide is for developers building their own applications. Most users should just download the desktop app.

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();
}