PubNub Debug Console

A comprehensive debugging tool for PubNub real-time messaging features.

Features

✅ Pub/Sub Debugging

• Real-time Message Testing

  • Send messages to channels (Publish, Signal, Fire)
  • Subscribe to channels with live updates
  • Message format validation (JSON, text)
  • Message size testing (up to 32KB limit)
  • Custom message types support

• Connection Monitoring

  • Connection status indicators
  • Reconnection handling
  • Network latency measurement
  • Error logging and debugging

• Channel Management

  • Subscribe/unsubscribe to multiple channels
  • Real-time channel monitoring
  • Channel-specific message filtering

• Message Feed

  • Live message stream
  • Message filtering by channel and type
  • Message export functionality
  • Detailed message metadata display

✅ Presence Debugging

• User Tracking

  • Real-time user join/leave events
  • Occupancy count monitoring
  • User state management
  • Channel-specific presence rules

• Presence Events

  • Live presence event stream
  • State change notifications
  • Timeout detection
  • Multi-channel presence monitoring

• User State Management

  • Set user state on channels
  • Retrieve user state
  • State change tracking
  • JSON state format support

✅ History/Persistence Debugging

• Message Storage

  • Fetch historical messages
  • Pagination support
  • Time range filtering
  • Message count queries

• Storage Management

  • Retention policy testing
  • Message deletion
  • Storage limits validation
  • Cross-channel history

✅ Message Actions Debugging

• Reactions System

  • Add/remove reactions
  • Reaction type management
  • User-specific reactions
  • Reaction analytics

• Custom Actions

  • Custom action types
  • Action metadata
  • Action history
  • Action filtering

✅ App Context Debugging

• User Management

  • Create/update user profiles
  • User metadata management
  • User search and filtering
  • User relationships

• Channel Management

  • Channel metadata
  • Channel descriptions
  • Channel custom fields
  • Channel membership

• Membership Management

  • User-channel relationships
  • Membership permissions
  • Bulk membership operations

✅ Files Debugging

• File Operations

  • Upload files (up to 5MB)
  • Download files
  • File metadata
  • File sharing across channels

• File Management

  • File listing
  • File deletion
  • File URL generation
  • File encryption support

✅ Push Notifications Debugging

• Notification Testing

  • Send push notifications
  • Platform-specific testing (iOS/Android/Windows)
  • Notification payload validation
  • Delivery confirmation

• Device Management

  • Device token management
  • Platform registration
  • Notification preferences

✅ Channel Groups Debugging

• Group Management

  • Create/manage channel groups
  • Add/remove channels from groups
  • Group subscription management
  • Wildcard subscriptions

• Multi-channel Operations

  • Bulk operations
  • Group-based messaging
  • Group presence monitoring

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• PubNub account with API keys

Installation

1. Clone the repository:

git clone <repository-url>
cd pubnub-debug-console

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:3000

Configuration

1. Get your PubNub keys from the PubNub Admin Portal
2. Enter your keys in the Configuration panel:
   • Publish Key (starts with pub-c-)
   • Subscribe Key (starts with sub-c-)
   • User ID (unique identifier for this debug session)

Usage

1. Configuration

• Enter your PubNub publish and subscribe keys
• Set a unique User ID for this debug session
• Monitor connection status

2. Channel Management

• Subscribe to channels you want to monitor
• View all subscribed channels
• Unsubscribe from channels when done

3. Message Composer

• Publish: Send regular messages with history storage
• Signal: Send lightweight messages (64 chars max, no history)
• Fire: Send messages without history storage
• Support for both text and JSON message formats

4. Message Feed

• View real-time messages from subscribed channels
• Filter messages by channel or type
• Export messages to JSON file
• Clear message history

5. Presence Monitor

• View real-time presence events (join, leave, timeout, state-change)
• Monitor occupancy counts per channel
• Filter presence events by channel and action type
• Refresh current presence status

6. User State Manager

• Set user state on multiple channels
• Retrieve current user state
• JSON format state management
• Multi-channel state operations

7. History Browser

• Fetch historical messages from Message Persistence
• Search and filter historical messages
• Delete messages from history (requires secret key)
• Export history to JSON file
• Time range filtering with timetokens

8. Message Actions Manager

• Add reactions to messages (👍, ❤️, etc.)
• Create custom message actions
• Remove message actions
• Fetch and display action history
• Export actions to JSON file

9. App Context Manager

• Manage user metadata (name, email, profile, custom data)
• Manage channel metadata (name, description, custom data)
• Manage user-channel memberships
• Export context data to JSON file

10. Files Manager

• Upload files up to 5MB
• Download files from channels
• List files in channels
• Delete files
• Drag & drop file upload

11. Push Notifications Manager

• Send push notifications to iOS, Android, Windows
• Platform-specific payload configuration
• Custom notification data
• Multi-channel notification sending

12. Channel Groups Manager

• Create and manage channel groups
• Add/remove channels from groups
• Subscribe/unsubscribe to groups
• List channels in groups

Message Types

• Message: Regular publish/subscribe messages with full history support
• Signal: Lightweight messages for real-time notifications (64 character limit)
• Fire: Messages sent without storing in history

Features Overview

Feature	Status	Description
Pub/Sub	✅ Complete	Real-time messaging with all message types
Presence	✅ Complete	User online/offline tracking and state management
History	✅ Complete	Message persistence and retrieval
Actions	✅ Complete	Message reactions and metadata
App Context	✅ Complete	User/channel metadata management
Files	✅ Complete	File sharing (up to 5MB)
Push	✅ Complete	Mobile push notifications
Channel Groups	✅ Complete	Multi-channel subscriptions

Development

Project Structure

src/
├── components/          # React components
│   ├── ConfigurationPanel.tsx
│   ├── MessageComposer.tsx
│   ├── ChannelManager.tsx
│   └── MessageFeed.tsx
├── stores/             # Zustand state management
│   └── pubnubStore.ts
├── App.tsx             # Main application component
└── main.tsx            # Application entry point

Tech Stack

• Frontend: React 18 + TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• PubNub SDK: JavaScript SDK v10.1.0
• Build Tool: Vite

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and questions:

• Create an issue in this repository
• Contact PubNub support at [email protected]
• Visit PubNub Documentation