feat: SSE implementation

[shafin-deriv]

This pull request includes significant updates to the Champion Trader application, focusing on improving real-time data streaming by transitioning from WebSocket to Server-Sent Events (SSE). The changes also enhance documentation, project structure, and testing configurations.

Real-time Data Streaming Enhancements:

• README.md: Updated to reflect the transition from WebSocket to SSE for real-time data streaming, including detailed explanations of SSE benefits and usage examples.
• src/config/api.ts: Added SSE configuration to the API config to support the new streaming method. [1] [2] [3] [4]
• rsbuild.config.ts: Included environment variables for SSE paths to ensure proper configuration.

Documentation Improvements:

• llms.txt: Updated to include information about the new SSE services and their advantages over WebSocket. [1] [2] [3]
• STRUCTURE.md: Revised to provide a comprehensive overview of the project structure, highlighting the new SSE services and their integration.

Testing Enhancements:

• src/App.test.tsx: Mocked EventSource for testing SSE functionalities, ensuring tests can simulate SSE behavior.

These changes collectively improve the application's performance, maintainability, and developer experience by leveraging more efficient streaming technologies and enhancing the project's documentation and testing setup.

Summary by Sourcery

Implement Server-Sent Events (SSE) for real-time market and contract data streaming, replacing the existing WebSocket implementation.

New Features:

• Introduce SSE services for efficient real-time data streaming, including automatic reconnection, error handling, and type-safe messaging.

Tests:

• Add unit tests for SSE services and hooks, covering connection management, error handling, and data updates.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request migrates the Champion Trader application from WebSockets to Server-Sent Events (SSE) for real-time data streaming. It includes updates to the project structure, documentation, testing, and configuration to support the new SSE implementation.

Sequence diagram for SSE market data streaming

sequenceDiagram
    participant UI as UI Component
    participant Hook as useMarketSSE
    participant Store as SSE Store
    participant Service as MarketSSEService
    participant Server as SSE Server

    UI->>Hook: Initialize with instrumentId
    Hook->>Store: initializeMarketService()
    Store->>Service: new MarketSSEService()
    Hook->>Store: subscribeToInstrumentPrice()
    Store->>Service: subscribeToPrice(instrumentId)
    Service->>Server: Connect SSE(action=instrument_price)
    Server-->>Service: Connection Established
    Server-->>Service: Price Update Event
    Service->>Store: Update Price State
    Store-->>Hook: New Price Available
    Hook-->>UI: Render Updated Price

    Note over Service,Server: Automatic reconnection on failure

    UI->>Hook: Component Unmount
    Hook->>Store: unsubscribeFromInstrumentPrice()
    Store->>Service: unsubscribeFromPrice()
    Service->>Server: Close Connection

Loading

Class diagram for the SSE service hierarchy

classDiagram
    class SSEService {
        <<abstract>>
        #eventSource: EventSource
        #messageHandlers: Map
        #errorHandlers: Set
        #reconnectCount: number
        #options: SSEOptions
        #isConnecting: boolean
        +connect(): void
        +disconnect(): void
        #reconnect(): void
        +on(action, handler): void
        +off(action, handler): void
        +onError(handler): void
        +offError(handler): void
        #abstract handleMessage(message): void
        #abstract getEndpoint(): string
    }

    class PublicSSEService {
        +constructor(options)
        #getEndpoint(): string
        #handleMessage(message): void
    }

    class ProtectedSSEService {
        -authToken: string
        +constructor(authToken, options)
        #getEndpoint(): string
        #handleMessage(message): void
        +updateAuthToken(token): void
    }

    class MarketSSEService {
        -subscriptions: Set
        +subscribeToPrice(instrumentId): void
        +unsubscribeFromPrice(instrumentId): void
    }

    class ContractSSEService {
        -activeContracts: Map
        +requestPrice(params): void
        +cancelPrice(params): void
    }

    SSEService <|-- PublicSSEService
    SSEService <|-- ProtectedSSEService
    PublicSSEService <|-- MarketSSEService
    ProtectedSSEService <|-- ContractSSEService

Loading

File-Level Changes

Change	Details	Files
Implements SSE services for market and contract price streaming.	Introduces base SSE service with reconnection logic and error handling. Creates public and protected SSE service implementations. Implements market and contract SSE services. Adds interfaces and types for SSE messages. Adds documentation for the SSE services.	src/services/api/sse/contract/service.ts src/services/api/sse/base/service.ts src/services/api/sse/market/service.ts src/services/api/sse/base/public.ts src/services/api/sse/base/protected.ts src/services/api/sse/base/types.ts src/services/api/sse/README.md
Adds React hooks for consuming SSE streams.	Creates useMarketSSE hook for subscribing to market price updates. Creates useContractSSE hook for requesting contract price updates. Exports all hooks from index.ts. Adds documentation for the SSE hooks.	src/hooks/sse/useContractSSE.ts src/hooks/sse/useMarketSSE.ts src/hooks/sse/index.ts src/hooks/sse/README.md
Updates Zustand store to manage SSE connections and data.	Adds SSE connection state, price data, and error information to the store. Adds actions for initializing SSE services, subscribing to market prices, and requesting contract prices. Adds tests for the SSE store. Updates documentation for the SSE store.	src/stores/sseStore.ts src/stores/__tests__/sseStore.test.ts src/stores/README.md
Updates API configuration to include SSE endpoints.	Adds SSE configuration to the API config. Includes base URL, public path, and protected path for SSE endpoints.	src/config/api.ts
Updates documentation to reflect the transition from WebSocket to SSE.	Updates README to explain SSE benefits and usage. Revises STRUCTURE.md to highlight the new SSE services and their integration. Updates llms.txt to include information about the new SSE services.	README.md STRUCTURE.md llms.txt
Adds tests for SSE services and hooks.	Mocks EventSource for testing SSE functionalities. Adds tests for the contract SSE service. Adds tests for the market SSE service. Adds tests for the base SSE service.	src/App.test.tsx src/services/api/sse/__tests__/contract.test.ts src/services/api/sse/__tests__/market.test.ts src/services/api/sse/__tests__/base.test.ts
Includes environment variables for SSE paths.	Includes environment variables for SSE paths to ensure proper configuration.	rsbuild.config.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

OpenSSF Scorecard

Package	Version	Score	Details

Scanned Manifest Files

[sourcery-ai]

Hey @shafin-deriv - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider creating a shared types module for common interfaces between WebSocket and SSE implementations to reduce duplication and maintain consistency.
• Please add a clear deprecation timeline for the WebSocket implementation to ensure a smooth transition and avoid maintaining parallel systems longer than necessary.

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟡 Testing: 4 issues found
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[cloudflare-workers-and-pages]

Deploying champion-trader with    Cloudflare Pages

Latest commit:	f73bf67
Status:	✅  Deploy successful!
Preview URL:	https://fc9a3506.champion-trader.pages.dev
Branch Preview URL:	https://shafin-championtrader-feat-s.champion-trader.pages.dev

View logs