Laravel Reverb Socket Tester

A modern frontend application for testing Laravel Reverb WebSocket connections. With a Swagger-like interface, you can easily test your WebSocket connections, view real-time logs, and manage channel subscriptions.

Features

• ✅ Real-time Connection Testing - Connect to your Laravel Reverb server
• ✅ Detailed Logging System - Monitor all connection, channel, and event activities
• ✅ Channel Management - Subscribe to public, private, and presence channels
• ✅ Event Listeners - Listen to different events and receive real-time data
• ✅ Dark/Light Theme - Choose your preferred theme
• ✅ Responsive Design - Mobile and desktop compatible
• ✅ TypeScript Support - Type-safe development

Installation

Requirements

• Node.js 18+
• npm or yarn

Steps

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open http://localhost:3000 in your browser

Usage

1. Establishing Connection

• Host: Your Laravel Reverb server address (e.g., localhost)
• Port: WebSocket port (default: 6001)
• App Key: Your Laravel application's Pusher key
• Cluster: Reverb cluster name
• Force TLS: Force HTTPS connection

2. Channel Subscriptions

• Public Channel: channel-name
• Private Channel: private-channel-name
• Presence Channel: presence-channel-name

3. Event Listening

You can listen to events on subscribed channels:

• Custom events (e.g., message.sent, user.online)
• System events (e.g., pusher:member_added)

Laravel Reverb Configuration

Configure these settings in your .env file:

BROADCAST_DRIVER=reverb
REVERB_APP_ID=app-id
REVERB_APP_KEY=app-key
REVERB_APP_SECRET=app-secret
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

Technical Details

Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• WebSocket: Pusher.js (Laravel Reverb compatible)
• UI Components: Custom Radix-inspired components

Project Structure

src/
├── components/         # UI components
├── hooks/             # React hooks
├── types/             # TypeScript type definitions
├── lib/               # Utility functions
└── App.tsx           # Main application

Build

To build for production:

npm run build

Build files will be generated in the dist/ folder.

Development

Linting

npm run lint

Type Checking

TypeScript is automatically checked during the build process.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License