使用 Laravel 和 WebSockets 构建实时应用程序

本文我们将探讨如何使用 Laravel 和 WebSockets 创建实时应用程序。我们将整合 Laravel Echo 和 Laravel WebSockets，实现服务器与客户端之间的实时通信。在整个教程中，我们将演示广播事件、状态频道和私人消息等基本功能。最后，你将掌握使用 Laravel 构建强大的交互式实时应用程序的知识和工具。

前提条件

要跟上本教程，你必须对 PHP、Laravel 和 JavaScript 有基本的了解。确保在系统中安装了 Laravel 及其依赖项。

设置项目

首先，创建一个新的 Laravel 项目。打开终端，运行以下命令：

composer create-project --prefer-dist laravel/laravel realtime-app-tutorial

此命令将创建一个名为“realtime-app-tutorial”的新 Laravel 项目。

安装 Laravel WebSockets

Laravel WebSockets 提供了构建实时应用程序所需的基础设施。通过在终端中运行以下命令来安装 Laravel WebSockets：

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate

配置 Laravel WebSockets

打开 config/websockets.php 文件配置 Laravel WebSockets。更新 apps 数组，加入你的应用 URL 和其他应用配置。

广播事件

Laravel WebSockets 可以向连接的客户端广播事件。让我们创建一个事件并广播它。在终端运行以下命令：

php artisan make:event NewMessage

打开生成的NewMessage事件文件，修改broadcastOn方法如下：

public function broadcastOn()
{
    return new Channel('messages');
}

在此示例中，事件在messages通道上广播。

广播事件监听器

创建事件监听器来处理广播事件。在终端中运行以下命令：

php artisan make:listener NewMessageListener --event=NewMessage

打开生成的NewMessageListener文件，修改handle方法如下：

public function handle(NewMessage $event)
{
    broadcast(new NewMessageNotification($event->message))->toOthers();
}

在本例中，NewMessageListener 会向其他已连接的客户端广播 NewMessageNotification。

创建在线状态通道

在线状态通道允许你跟踪已连接的用户及其在线状态。修改 routes/channels.php 文件如下：

use App\Models\User;

Broadcast::channel('messages', function ($user) {
    return ['id' => $user->id, 'name' => $user->name];
});

在此示例中，我们定义了一个名为的状态通道messages，并为每个连接的用户提供用户信息。

实施私人信息传送

私人信息传送允许用户进行私人通信。让我们创建一个私人信息传递功能。在终端中运行以下命令：

php artisan make:channel PrivateChat

打开生成的PrivateChat通道文件，修改broadcastOn方法如下：

public function broadcastOn()
{
    return new PrivateChannel('private-chat.'.$this->receiverId);
}

在此示例中，私人信息在特定于接收者的频道上广播。

广播私信

若要广播私信，修改NewMessageListener如下：

public function handle(NewMessage $event)
{
    $receiverId = $event->receiverId;
    $message = $event->message;
    
    broadcast(new NewPrivateMessageNotification($message))->toOthers();
    broadcast(new NewPrivateMessageNotification($message))->toOthersOn("private-chat.{$receiverId}");
}

在本例中，NewMessageListener 会向其他已连接的客户端和特定接收器广播 NewPrivateMessageNotification。

前端实现

要在前端使用实时功能，请安装 Laravel Echo 和 Socket.IO 库。在终端运行以下命令：

npm install laravel-echo socket.io-client

通过创建一个名为的新文件resources/js/bootstrap.js并添加以下代码来配置 Laravel Echo：

import Echo from 'laravel-echo';

window.io = require('socket.io-client');
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
});

在应用程序中加入 bootstrap.js 文件，方法是在 resources/js/app.js 文件中添加以下一行：

require('./bootstrap');

使用实时事件：在 JavaScript 文件中，订阅事件通道并监听实时事件。

例如：

window.Echo.channel('messages')
    .listen('NewMessageNotification', (event) => {
        console.log('New message:', event.message);
    });
    
window.Echo.private('private-chat.' + receiverId)
    .listen('NewPrivateMessageNotification', (event) => {
        console.log('New private message:', event.message);
    });

在本例中，我们监听消息通道上的 NewMessageNotification 事件和私人聊天通道上的 NewPrivateMessageNotification 事件。

以上就是如何使用 Laravel 和 WebSockets 创建实时应用程序。我们介绍了 Laravel Echo 和 Laravel WebSockets 的集成，演示了广播事件、状态通道和私人消息等基本功能。有了这些知识，你现在就可以构建交互式实时应用程序，提供无缝的用户体验。Laravel 的强大工具和 WebSockets 的实时功能让开发实时应用程序变得前所未有的简单。