WebSocket in Laravel - A Complete Guide

Apr 29, 2025, 2:30 PM

WebSocket in Laravel - A Complete Guide

Let me show you how to install WebSockets for enabling real-time communication in your Laravel application.

🔄 Why Use WebSockets?

Forbid data exchange with high frequency and low latency.
Improved functionality when compared to AJAX polling.
Minimized HTTP requests by maintaining an active connection.
Ideal for chat applications, notifications, and online gaming.

⚡ WebSocket vs HTTP

Feature	WebSocket	HTTP
Connection Type	Persistent	Request/Response
Latency	Low	High
Data Transfer	Full Duplex	Half Duplex

⚙️ How WebSockets Work

WebSocket handshake request is sent by a client.
The connection is established by the server and therefore the request is accepted.
Exchanging data occurs in real-time without the need for repeating HTTP requests.

🛠️ WebSocket Implementation in Laravel

1️⃣ Install Laravel WebSockets

composer require beyondcode/laravel-websockets

2️⃣ Publish the Configuration

Once this is done, you can make use of such commands within the terminal.

3️⃣ Generate WebSocket Event

php artisan make:event MessageSent

4️⃣ Override The Advertised Event

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageSent implements ShouldBroadcast
{
    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return ['chat-channel'];
    }
}

5️⃣ Initiate WebSocket Server

php artisan websockets:serve

🛠️ Frontend WebSocket Integration

Now, let's integrate **Laravel Echo** and **Pusher** to receive real-time updates.

1️⃣ Install Laravel Echo & Pusher

npm install --save laravel-echo pusher-js

2️⃣ Configure Pusher in Laravel

Update your `.env` file with your Pusher credentials:

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=mt1

3️⃣ Setup Laravel Echo in JavaScript

Include this JavaScript code in your frontend:

<!-- Include Pusher and Laravel Echo -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher-js/7.0.3/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.11.1/dist/echo.iife.min.js"></script>

<script>
    // Configure Pusher
    window.Pusher = Pusher;

    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: 'your_app_key',  // Replace with your actual Pusher key
        cluster: 'mt1',
        forceTLS: true
    });

    // Listen for messages in the "chat-channel"
    window.Echo.channel('chat-channel')
        .listen('MessageSent', (data) => {
            console.log("New message received:", data.message);
            
            // Select the chat box container
            let chatBox = document.getElementById("chat-box");

            if (chatBox) {
                let newMessage = document.createElement("p");
                newMessage.classList.add("p-2", "bg-gray-200", "rounded-lg", "mt-2");
                newMessage.innerText = data.message;
                chatBox.appendChild(newMessage);
            } else {
                console.error("Chat box not found!");
            }
        });
</script>

4️⃣ Display Real-Time Messages

Add a chatbox to display messages dynamically:

📢 Live Messages

📊 Benefits & Risks

✅ Benefits

Broadcast in real-time without delays
Reduced server load with persistent connection
Less bandwidth consumption.

❌ Risks

Tough security measures required, and not all applications can use it.
Problems with proxies and firewalls.

🎯 Summary

WebSockets is a powerful communication tool that operates seamlessly within Laravel's ecosystems. Integrate these steps into your Laravel projects for updates, chats, and notifications.