LatteStream®

Quick Start

Getting Started

Building Custom SDKs

SDKs & Libraries

JavaScript/TypeScript

Node.js / Bun / Deno

Python

In Development

Go

In Development

PHP

In Development

API Reference

WebSocket API

REST API

Webhooks

Authentication

Examples & Tutorials

Real-world examples and step-by-step tutorials for building with LatteStream

Learn LatteStream through practical examples. Each example includes complete source code, explanations, and deployment guides to help you build production-ready real-time applications.

Getting Started Examples

Perfect for beginners or trying out LatteStream features:

Hello World

The simplest possible LatteStream integration. Connect, subscribe, and receive messages in under 10 lines of code.

What you'll learn:

  • Basic connection setup
  • Channel subscription
  • Event handling
  • Server-side event triggering

Technologies: Vanilla JavaScript, Node.js

Real-time Counter

Build a live counter that updates across all connected clients in real-time.

What you'll learn:

  • State synchronization
  • Event-driven updates
  • Error handling
  • Connection state management

Technologies: HTML, JavaScript, Express.js

Chat & Messaging

Real-time messaging is a classic use case for WebSocket technology:

Simple Chat Room

A complete chat application with user presence, message history, and typing indicators.

What you'll learn:

  • Presence channels
  • User authentication
  • Message broadcasting
  • Typing indicators
  • Online user lists

Technologies: React, Node.js, PostgreSQL

Private Messaging

Secure one-on-one messaging with channel authorization and message encryption.

What you'll learn:

  • Private channels
  • Channel authorization
  • User-to-user messaging
  • Message persistence
  • Security best practices

Technologies: Vue.js, Express.js, MongoDB

Team Chat with Channels

Slack-style team communication with multiple channels, threads, and file sharing.

What you'll learn:

  • Multi-channel management
  • Message threading
  • File upload integration
  • Channel permissions
  • Advanced UI patterns

Technologies: Next.js, Fastify, Redis, S3

Live Dashboards

Build real-time dashboards and monitoring interfaces:

Analytics Dashboard

Live analytics dashboard with real-time charts, metrics, and data visualization.

What you'll learn:

  • Real-time data streaming
  • Chart.js integration
  • Performance optimization
  • Data aggregation
  • Responsive design

Technologies: React, Chart.js, Express.js, InfluxDB

Server Monitoring

Monitor server metrics, logs, and alerts in real-time with a beautiful web interface.

What you'll learn:

  • System metrics streaming
  • Log tailing
  • Alert notifications
  • Historical data
  • Multiple server management

Technologies: Vue.js, Node.js, Prometheus

IoT Device Dashboard

Monitor and control IoT devices with real-time sensor data and remote commands.

What you'll learn:

  • Device data streaming
  • Command/control patterns
  • Device status tracking
  • Data visualization
  • Mobile-responsive design

Technologies: Angular, NestJS, MQTT Bridge

Interactive Applications

Build engaging real-time interactive experiences:

Collaborative Whiteboard

Multi-user drawing application with real-time cursor tracking and shape collaboration.

What you'll learn:

  • Canvas synchronization
  • Cursor tracking
  • Conflict resolution
  • Performance optimization
  • Undo/redo systems

Technologies: React, Canvas API, Node.js

Live Polling

Real-time polls and surveys with live results and audience engagement features.

What you'll learn:

  • Vote aggregation
  • Result visualization
  • Audience engagement
  • Real-time updates
  • Mobile optimization

Technologies: Svelte, Express.js, PostgreSQL

Multiplayer Game

Simple multiplayer game with real-time state synchronization and player interactions.

What you'll learn:

  • Game state management
  • Player synchronization
  • Lag compensation
  • Cheat prevention
  • Game lobby system

Technologies: Phaser.js, TypeScript, Redis

Notifications & Alerts

Implement real-time notification systems:

Push Notifications

Web push notifications integrated with LatteStream for reliable real-time alerts.

What you'll learn:

  • Web Push API integration
  • Notification strategies
  • Fallback mechanisms
  • User preferences
  • Cross-platform delivery

Technologies: Service Workers, Express.js, Firebase

Activity Feed

Facebook-style activity feed with real-time updates, likes, and comments.

What you'll learn:

  • Feed algorithms
  • Real-time interactions
  • Infinite scrolling
  • Caching strategies
  • Social features

Technologies: React, GraphQL, PostgreSQL

Framework Integrations

Learn how to integrate LatteStream with popular frameworks:

React Integration

Complete React integration with hooks, context, and state management patterns.

What you'll learn:

  • Custom React hooks
  • Context providers
  • State management
  • Component patterns
  • Testing strategies

Technologies: React 18, TypeScript, Zustand

Vue.js Integration

Vue.js integration with composables, reactive state, and Pinia store integration.

What you'll learn:

  • Vue composables
  • Reactive state
  • Pinia integration
  • Component communication
  • Performance optimization

Technologies: Vue 3, TypeScript, Pinia

Angular Integration

Angular service integration with RxJS observables and dependency injection.

What you'll learn:

  • Angular services
  • RxJS observables
  • Dependency injection
  • Component communication
  • Testing with Jasmine

Technologies: Angular 15+, RxJS, TypeScript

Next.js SSR

Server-side rendering considerations and hybrid client-server real-time apps.

What you'll learn:

  • SSR compatibility
  • Hydration patterns
  • API route integration
  • Performance optimization
  • SEO considerations

Technologies: Next.js 13+, React Server Components

Enterprise Examples

Production-ready examples for enterprise applications:

Multi-tenant SaaS

Build a multi-tenant SaaS application with isolated real-time features per tenant.

What you'll learn:

  • Tenant isolation
  • Scaling strategies
  • Security patterns
  • Billing integration
  • Admin dashboards

Technologies: React, Node.js, PostgreSQL, Stripe

Customer Support Chat

Enterprise customer support system with agent assignment, chat history, and file sharing.

What you'll learn:

  • Agent routing
  • Chat queues
  • File handling
  • Chat transcripts
  • Integration APIs

Technologies: React, Express.js, MongoDB, AWS S3

Trading Dashboard

Financial trading dashboard with real-time market data, charts, and order execution.

What you'll learn:

  • High-frequency data
  • Performance optimization
  • Data visualization
  • Order management
  • Risk monitoring

Technologies: React, WebAssembly, Node.js, Redis

Advanced Patterns

Explore advanced LatteStream patterns and techniques:

Message Queuing

Implement reliable message delivery with queuing, persistence, and retry mechanisms.

What you'll learn:

  • Message persistence
  • Delivery guarantees
  • Retry strategies
  • Dead letter queues
  • Performance tuning

Technologies: Node.js, Redis, PostgreSQL

Binary Protocol

High-performance binary message protocol for low-latency applications.

What you'll learn:

  • Binary serialization
  • Protocol design
  • Performance optimization
  • WebAssembly integration
  • Compression techniques

Technologies: WebAssembly, Rust, TypeScript

Microservices Integration

Integrate LatteStream with microservices architecture and event-driven patterns.

What you'll learn:

  • Event sourcing
  • Service communication
  • API gateways
  • Container orchestration
  • Monitoring strategies

Technologies: Docker, Kubernetes, gRPC, NATS

Mobile & Cross-Platform

Examples for mobile and cross-platform applications:

React Native App

Mobile chat application with LatteStream real-time messaging.

What you'll learn:

  • Mobile WebSocket handling
  • Background app states
  • Push notification integration
  • Offline support
  • Performance optimization

Technologies: React Native, Expo, TypeScript

Electron Desktop App

Desktop application with real-time features and native OS integration.

What you'll learn:

  • Desktop WebSocket patterns
  • Native integrations
  • Auto-updates
  • Tray notifications
  • Cross-platform deployment

Technologies: Electron, React, TypeScript

Development Tools

Examples for developer tooling and debugging:

Debug Console

Build a real-time debug console for monitoring LatteStream connections and events.

What you'll learn:

  • Connection monitoring
  • Event logging
  • Performance metrics
  • Debug visualization
  • Development tools

Technologies: React, Node.js, WebSocket Inspector

Load Testing

Test LatteStream applications under load with automated testing tools.

What you'll learn:

  • Load testing strategies
  • Performance metrics
  • Bottleneck identification
  • Scaling preparation
  • Monitoring integration

Technologies: Artillery, K6, Grafana

Getting Started

  1. Choose an example that matches your use case
  2. Follow the step-by-step guide in each example
  3. Clone the source code from our GitHub repository
  4. Deploy and customize for your specific needs

Prerequisites

Most examples assume basic knowledge of:

  • JavaScript/TypeScript
  • HTML/CSS
  • Node.js
  • Git version control
  • Command line basics

Running Examples

Each example includes:

  • Complete source code with comments
  • Step-by-step instructions for setup
  • Environment configuration guides
  • Deployment instructions for various platforms
  • Troubleshooting section for common issues
# General pattern for running examples
git clone https://github.com/lattestream/examples
cd examples/[example-name]
npm install
cp .env.example .env
# Edit .env with your LatteStream credentials
npm run dev

Contributing Examples

Have a great LatteStream example? We'd love to include it!

  1. Fork the examples repository
  2. Create your example following our template
  3. Test thoroughly with clear documentation
  4. Submit a pull request

Contribution Guidelines →

Need Help?

Ready to start building? Pick an example above or start with our Getting Started guide.