CINXE.COM
Laravel Reverb
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Laravel Reverb</title> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <meta name="msapplication-TileColor" content="#111111"> <link rel="preconnect" href="https://fonts.bunny.net" /> <link rel="stylesheet" href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap"/> <meta name="theme-color" content="#111111"> <meta property="og:site_name" content="Laravel Reverb"> <meta property="og:locale" content="en_US"> <meta property="og:title" content="Laravel Reverb - Real-time WebSocket"> <meta property="og:description" content="Laravel Reverb brings real-time WebSocket communication to Laravel applications."> <meta property="og:image" content="https://reverb.laravel.com/socialcard.png"> <meta property="og:image:height" content="562"> <meta property="og:image:width" content="1000"> <meta property="og:image:type" content="image/png"> <meta name="twitter:site" content="@laravelphp"> <meta name="twitter:creator" content="@laravelphp"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Laravel Reverb - Real-time WebSocket"> <meta name="twitter:description" content="Laravel Reverb brings real-time WebSocket communication to Laravel applications."> <meta name="twitter:image" content="https://reverb.laravel.com/socialcard.png"> <meta name="twitter:image:height" content="562"> <meta name="twitter:image:width" content="1000"> <link rel="preload" as="style" href="https://reverb.laravel.com/build/assets/app-4RbfVd1L.css" /><link rel="stylesheet" href="https://reverb.laravel.com/build/assets/app-4RbfVd1L.css" data-navigate-track="reload" /><!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> </head> <body class="h-dvh font-sans antialiased text-white bg-black bg-top bg-no-repeat bg-cover"> <div class="relative overflow-x-clip"> <div class="absolute inset-0 -z-10 lg:flex lg:items-center"> <img src="/images/hero-background.png" class="mt-16 aspect-[14/8] w-full max-w-none md:mt-0" aria-hidden="true" /> </div> <header class="max-w-7xl lg:px-10 lg:py-40 xl:py-40 relative p-8 pt-24 mx-auto"> <div class="lg:grid-cols-2 grid grid-cols-1 gap-10"> <div> <h1 class="bg-gradient-to-b from-white to-[#FF9C65] bg-clip-text text-6xl font-semibold text-transparent sm:text-7xl md:text-[102px]/[102px]"> Laravel <br class="lg:inline hidden">Reverb </h1> <div class="max-w-lg mt-10"> <p class="text-lg">Reverb is a first-party WebSocket server for Laravel applications, bringing real-time communication between client and server directly to your fingertips. Open source and an Artisan command away - with love from the Laravel team.</p> <a href="https://github.com/laravel/reverb" class="mt-8 tracking-wide text-sm bg-green-400 inline-block rounded leading-none font-bold px-2 py-1 text-green-950">AVAILABLE NOW ON GITHUB</a> <div class="mt-4 flex items-center gap-x-4"> <a href="#features" class="inline-flex rounded-xl bg-orange-900/60 px-6 py-2 font-semibold text-gray-300 hover:text-white hover:bg-orange-900 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[#BD92F5] focus-visible:ring-offset-2 focus-visible:ring-offset-black"> See The Features </a> <a href="https://laravel.com/docs/reverb" class="inline-flex rounded-xl bg-orange-900/60 px-6 py-2 font-semibold text-gray-300 hover:text-white hover:bg-orange-900 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[#BD92F5] focus-visible:ring-offset-2 focus-visible:ring-offset-black"> Read The Docs </a> </div> </div> </div> <div class="flex flex-col justify-center"> <figure class="bg-black/80 backdrop-blur-lg drop-shadow-lg relative flex w-full mt-5 overflow-hidden rounded-lg pointer-events-none select-none"> <img src="/images/card-hero.png" alt="reverb example: connection established" class="opacity-70 grayscale object-cover object-left w-full h-full max-w-full max-h-full" /> </figure> <div wire:snapshot="{"data":[],"memo":{"id":"nUvJ7AAvFEZ2qBpylD4O","name":"reactor","path":"\/","method":"GET","children":[],"scripts":["3617246299-0"],"assets":[],"errors":[],"locale":"en"},"checksum":"b2e660647afeeb9732dcb2d153cf1246dbaaca2cf241b91f7597bce488e9aa78"}" wire:effects="{"scripts":{"3617246299-0":"<script>\n Alpine.data('reactor', () => {\n return {\n reactions: {\n hearts: { emoji: '\u2764\ufe0f', reactions: [] },\n fire: { emoji: '\ud83d\udd25', reactions: [] },\n rockets: { emoji: '\ud83d\ude80', reactions: [] },\n blownMinds: { emoji: '\ud83e\udd2f', reactions: [] },\n },\n\n init() {\n Echo.channel('cache-reactor')\n .listen('UserReacted', (e) => this.react(e.id, e.type))\n },\n\n sendReaction(id, type) {\n $wire.react(type);\n\n this.react(id, type);\n },\n\n react(id, type) {\n this.reactions[type].reactions.push(id);\n\n setTimeout(() => {\n this.reactions[type].reactions.splice(this.reactions[type].reactions.indexOf(id), 1)\n }, 1000);\n },\n\n randomId(min, max) {\n const range = max - min + 1;\n\n let randomValue;\n\n do {\n const buffer = new Uint32Array(1);\n window.crypto.getRandomValues(buffer);\n randomValue = buffer[0] % range;\n } while (randomValue + min > max);\n\n return randomValue + min;\n }\n }\n })\n<\/script>\n "}}" wire:id="nUvJ7AAvFEZ2qBpylD4O" class="-mt-10 flex justify-end z-10 px-4" x-data="reactor" wire:ignore> <div class="inline-flex justify-center gap-x-2 rounded-full border-orange-100/30 border p-2 bg-black/80"> <template x-for="(reaction, index) in reactions" :key="index"> <button class="reaction-button relative transition inline-flex items-center justify-center w-12 h-12 text-3xl p-1 rounded-full hover:bg-white/30 hover:cursor-pointer" x-on:click="sendReaction(randomId(1, 999999999999999), index)"> <span class="flex" x-text="reaction.emoji"></span> <div class="reactions absolute bottom-0"> <template x-for="value in reaction.reactions" :key="value"> <span x-text="reaction.emoji"></span> </template> </div> </button> </template> </div> </div> </div> </div> </header> </div> <section id="features" class="max-w-7xl lg:px-10 scroll-m-8 lg:grid-cols-5 grid grid-cols-1 gap-8 px-6 mx-auto"> <div class="lg:col-span-3 card" style="background-image:url(/images/card-bg.png)"> <div class="max-w-md p-8 mx-auto text-center"> <h2 class="card-title">Blazing Fast</h2> <p class="card-text mt-6">Reverb is fine-tuned for speed. A single server can support thousands of connections, piping data without the delay and inefficiency of HTTP polling.</p> </div> <img src="/images/card-blazing-fast.png" alt="chart example of reverb working" class="mt-4 mx-16 mb-16" /> </div> <div class="lg:col-span-2 card" style="background-image:url(/images/card-bg.png)"> <div class="max-w-md p-8 mx-auto text-center"> <h2 class="card-title">Seamless Integration</h2> <p class="card-text mt-6">Develop with Laravel's <a href="https://laravel.com/docs/broadcasting" class="underline">broadcasting capabilities</a>. <br>Deploy with Reverb's first-party <a href="https://forge.laravel.com" class="underline">Forge</a> integration. <br>Monitor with baked in support for <a href="https://pulse.laravel.com" class="underline">Pulse</a>.</p> </div> <div class="h-full flex justify-end pl-8"> <img src="/images/card-integration.svg" alt="chart example of reverb working" /> </div> </div> <div class="lg:col-span-2 card" style="background-image:url(/images/card-bg.png)"> <div class="max-w-md p-8 mx-auto text-center"> <h2 class="card-title">Built for Scale</h2> <p class="card-text mt-6">Infinitely increase capacity by utilizing Reverb's built-in support for horizontal scaling using Redis, allowing you to manage connections and channels across multiple servers.</p> </div> <figure class="relative flex items-center justify-center pb-6"> <img src="/images/card-scale.png?2" alt=""> </figure> </div> <div class="lg:col-span-3 card" style="background-image:url(/images/card-bg.png)"> <div class="max-w-md p-8 mx-auto text-center"> <h2 class="card-title">Pusher Protocol</h2> <p class="card-text mt-6">Reverb utilizes the Pusher protocol for WebSockets, making it immediately compatible with Laravel broadcasting and <a href="https://laravel.com/docs/broadcasting" class="underline">Laravel Echo</a>.</p> </div> <figure class="flex items-center justify-center px-16 pt-20"> <img src="/images/card-performance.png" alt=""> </figure> </div> </section> <footer class="md:mt-16 relative mt-8"> <div class="-z-10 overflow-x-clip absolute inset-0 flex items-center"> <img src="/images/footer-bg.png" class="ml-[50%] w-full min-w-[1000px] max-w-none -translate-x-1/2 md:min-w-[auto]" aria-hidden="true" /> </div> <div class="max-w-7xl md:pb-40 lg:px-10 lg:pb-64 md:justify-between flex flex-wrap items-end justify-center px-6 py-24 mx-auto"> <a href="/" tabindex="-1" class="whitespace-nowrap hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-600/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black text-2xl transition rounded"> <span class="font-semibold">Laravel</span> <span>Reverb</span> </a> <p class="md:text-right text-sm leading-snug text-center"> <br class="md:hidden">Copyright © 2025 <a href="https://laravel.com?ref=reverb" class="hover:underline">Laravel Holdings Inc.</a> </p> </div> </footer> <link rel="modulepreload" href="https://reverb.laravel.com/build/assets/app-XVEY9YPP.js" /><script type="module" src="https://reverb.laravel.com/build/assets/app-XVEY9YPP.js" data-navigate-track="reload"></script><script src="/livewire/livewire.min.js?id=44144c23" data-csrf="0rfNqKDoejMZikE5bfAaKHdlkbUku2jhiUJf668z" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>