Laravel development: How to implement WebSockets communication using Laravel Echo and Pusher?

Laravel is a popular PHP framework that is highly scalable and efficient. It provides many powerful tools and libraries so that developers can quickly build high-quality web applications. Among them, Laravel Echo and Pusher are two very important tools through which WebSockets communication can be easily implemented. This article will detail how to use these two tools in Laravel applications.

1. What are WebSockets?

WebSockets is a two-way communication protocol that can achieve higher real-time and faster data transmission. Compared with traditional HTTP requests, WebSockets can maintain the state of the connection and transfer data between the client and server even if there is no request or response. WebSockets can provide better user experience and higher application performance, and can be used in a variety of real-time application scenarios, such as chat applications, games, etc.

2. Introduction to Laravel Echo and Pusher

Laravel Echo is an event broadcast framework that provides a simple, consistent API to let you connect real-time communication channels on the client side . Echo relies on Pusher, and Redis can be used as an alternative when Pusher is unavailable. Pusher is a real-time WebSockets service that helps you easily add real-time functionality to your application. Pusher is a hosted solution that allows you to offload all WebSockets management tasks to a third-party service for better performance. Focus on the business logic of the application.

3. Configuring Laravel Echo and Pusher

In the Laravel project, you first need to install Echo and Pusher. You can use the composer command to install:

composer require pusher/pusher-php-server pusher/pusher-http-laravel beyondcode/laravel-websockets
npm install --save laravel-echo pusher-js

Installation After completion, you need to configure Pusher related information in the .env file:

PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster

Then in the config/broadcasting.php file, configure Broadcaster as pusher:

'default' => env('BROADCAST_DRIVER', 'pusher'),

'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'encrypted' => true,
        ],
    ],
],

4. Use Pusher Laravel WebSockets runs websocket server

Pusher has an open source library Laravel WebSockets that allows you to run a WebSockets server on your own server, thereby saving costs and improving performance and flexibility. The specific operations are as follows:

1. Install the database tables and data required to run Laravel WebSockets

   php artisan websocket:install

2. Fill the configuration required for Laravel WebSockets

   php artisan websocket:publish

3. Create a listener (in EventServiceProvider)

protected $listen = [
    'AppEventsExampleEvent' => [
        'AppListenersExampleListener',
    ],
];

4. Handle events

   <?php
   
   namespace AppEvents;
   
   use IlluminateBroadcastingInteractsWithSockets;
   use IlluminateFoundationEventsDispatchable;
   use IlluminateQueueSerializesModels;
   
   class ExampleEvent
   {
    use Dispatchable, InteractsWithSockets, SerializesModels;
   
    public $data;
   
    public function __construct($data)
    {
        $this->data = $data;
    }
   
    public function broadcastOn()
    {
        return ['test_channel'];
    }
   
    public function broadcastAs()
    {
        return 'example-event';
    }
   }

Then, you can use The following code pushes events:

use AppEventsExampleEvent;
use IlluminateSupportFacadesEvent;

Event::dispatch(new ExampleEvent(‘Example payload’, ‘Another example payload’));

5. How to use Laravel Echo and Pusher on the front end

Using Laravel Echo and Pusher on the front end is very simple, the following is a basic example:

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

let pusher = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
})
let echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    auth: {
        headers: {
            ‘Authorization’: ‘Bearer {access_token}’,
        },
    },
})

Through the above method, we can use Laravel Echo and Pusher to implement WebSockets communication in Laravel applications.

Summary

Laravel Echo and Pusher provide a very convenient and fast WebSockets solution, allowing us to quickly build high-performance, real-time Web applications. This article introduces in detail how to configure Laravel Echo and Pusher, and use Pusher's Laravel WebSockets to build a WebSockets server locally. At the same time, use Laravel Echo and Pusher to connect to the WebSockets server on the front end to achieve real-time communication capabilities.

The above is the detailed content of Laravel development: How to implement WebSockets communication using Laravel Echo and Pusher?. For more information, please follow other related articles on the PHP Chinese website!