Laravel 11 中的广播与实时事件：Pusher、Laravel Echo 和 WebSockets

实时功能是现代 Web 应用程序的一项关键功能。它允许即时通信和更新，增强了用户体验和参与度。Laravel 11 凭借其强大的广播功能，使实时功能的实现变得简单而高效。这篇博文将深入探讨 Laravel 11 中的广播和实时事件，重点是 Pusher、Laravel Echo 和 WebSockets。

什么是 Laravel 中的广播？

Laravel 中的广播是指将事件从服务器端应用程序实时传输到客户端应用程序的行为。Laravel 可以很方便地通过 WebSocket 连接 “广播 “这些事件。这对于构建实时通知、实时更新、聊天应用程序等功能特别有用。

关键部件

• Pusher：一种托管服务，可简化向网络和移动应用程序添加实时数据和功能的过程。它提供通过 WebSockets 发送实时更新的 API。

• Laravel Echo：一个 JavaScript 库，可以轻松订阅频道并监听 Laravel 广播的事件。它为与 WebSockets 交互提供了一个极具表现力的 API。

• WebSockets：一种通过单个 TCP 连接提供全双工通信通道的通信协议。它是需要实时更新的应用程序的理想选择。

在 Laravel 11 中设置广播

步骤 1: 安装 Laravel

首先，确保已安装 Laravel 11。你可以使用 Composer 创建一个新的 Laravel 项目：

composer create-project --prefer-dist laravel/laravel blog
cd blog

步骤 2：配置广播

打开 .env 文件，配置广播驱动程序。本例中我们将使用 Pusher：

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

接下来，安装 Pusher PHP SDK：

composer require pusher/pusher-php-server

步骤 3：安装 Laravel Echo 和 Pusher JS

Laravel Echo 和 Pusher JS 库是客户端实时更新所必需的。使用 npm 安装它们：

npm install --save laravel-echo pusher-js

步骤 4: 配置 Laravel Echo

创建一个新的 JavaScript 文件，通常是 resources/js/bootstrap.js，然后配置 Laravel Echo：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

确保在 .env 文件和 webpack.mix.js 或 vite.config.js 中定义了这些环境变量：

mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()
   .version()
   .options({
       processCssUrls: false
   });

mix.browserSync('your-local-dev-url.test');
mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
});

步骤 5：定义广播事件

创建一个要广播的事件。例如，NewMessage 事件：

php artisan make:event NewMessage

编辑生成的事件类 (app/Events/NewMessage.php) 以实现 ShouldBroadcast：

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $message;
    public function __construct($message)
    {
        $this->message = $message;
    }
    public function broadcastOn()
    {
        return new Channel('chat');
    }
}

步骤 6：广播事件

在应用程序中触发事件。例如，在控制器方法中：

use App\Events\NewMessage;

public function sendMessage(Request $request)
{
    $message = $request->input('message');
    event(new NewMessage($message));
    return response()->json(['status' => 'Message sent!']);
}

步骤 7：在前台监听事件

在前台 JavaScript 文件中，监听广播事件：

Echo . channel ( 'chat' ) 
    . listen ( 'NewMessage' , ( e ) => { 
        console.log ( e.message ) ; 
    });

步骤 8：运行应用程序

编译 JavaScript 并运行应用程序：

npm run dev
php artisan serve

现在，您的应用程序已设置好使用 Laravel Echo、Pusher 和 WebSockets 广播和接收实时事件。当有新消息发送时，它将实时广播给聊天频道上的所有客户端。

结论

Laravel 11 中的广播和实时事件是一项强大的功能，可以大大增强网络应用程序的交互性和响应速度。利用 Pusher、Laravel Echo 和 WebSockets，你可以轻松实现实时功能，如实时通知、聊天系统等。