三月份(2024年)Laravel Reverb 正式发布。现在,我们将在此教程中通过一个小示例介绍它。
什么是 Laravel Reverb
Laravel Reverb 是一个针对 Laravel 应用的官方 WebSocket 服务器。它基本上允许您在应用中运行 WebSocket 服务器。Laravel 团队于2024年2月的 Laracon EU 上宣布了它,我必须说,Joe Dixon 在舞台展示的例子让我印象深刻。
安装 Reverb
安装 Reverb 对于我们来说很简单。在我们安装 Laravel 11 应用的 广播 选项时,它是一个可选安装项。运行 php artisan install:broadcasting
命令后,系统会提示我们是否要使用 Reverb 作为广播。此命令将创建必要的广播配置文件。它还会创建一个频道路由文件。
除此之外,它还会将 echo
添加到我们的 Vite 设置中,并生成需要的环境变量。
设置我们的 Livewire 组件
为了方便本教程,我们将使用 Livewire 来玩转 Reverb。我们将使用 composer require livewire/livewire
命令安装 Livewire。
需要一个 Livewire 组件来提供所需的功能,我们可以使用 Artisan 命令 php artisan make:livewire MessagesComponent
来生成它。这将生成一个组件类和相应的 blade 文件。
在组件文件中,我们应该创建一个消息变量和一个动作来捕获输入的消息,目前,稍后我们将在该动作中分发事件。
class MessageComponent extends Component
{
public $message = "";
public function submitMessage(){
dd($this->message);
}
public function render()
{
return view('livewire.message-component');
}
}
目前,我们只会打印消息并退出。在我们的blade文件中,我们应该提供输入和按钮来执行动作。
<div>
<input wire:model='message' type="text">
<button wire:click='submitMessage'>Submit</button>
</div>
创建事件
一旦我们准备好了基本设置,我们就应该使用php artisan make:event MessageEvent
来创建我们的事件。这将为我们的事件生成一个带有指定名称的事件。我们需要根据需要调整事件,首先让它实现ShouldBroadcast
或ShouldBroadcastNow
。在本教程中,我们将使用ShouldBroadcastNow
,因为我们希望立即广播事件,不会使用队列来处理。
我们还需要一个公共属性’theMessage’,并在BroadcastOn函数中将通道从PrivateChannel
更改为普通的Channel
。
以下是我们的事件应该看起来像什么
class MessageEvent implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public string $theMessage;
/**
* Create a new event instance.
*/
public function __construct($incomingMessage)
{
//
$this->theMessage = $incomingMessage;
}
/**
* Get the channels the event should broadcast on.
*
* @return array<int, \Illuminate\Broadcasting\Channel>
*/
public function broadcastOn(): array
{
return [
new Channel('our-channel'),
];
}
}
整合所有部分
现在我们已经设置了我们的Livewire组件并创建了我们的事件,是时候将它整合在一起了。
为了存储所有消息,在这个教程中,我们将在我们的组件中用一个数组。在实际生活中,你应该将消息存储在数据库中,这样即使刷新也不会丢失。但在这个教程中,我们使用数组来测试回音功能。因此,我们将创建一个名为conversation
的公共属性,它是一个数组。
在我们的submitMessage函数中,我们将使用输入的消息分发事件。由于我们在事件中做了调整,它将在所需的通道上分发,并将消息作为其数据。
现在我们需要监听该事件。我们将创建一个名为listenForMessage
的函数,它接受数据。在这个函数中,我们将把事件的数据对象中的消息添加到我们的conversation数组中。为了在our-channel
通道上监听事件,我们使用echo
。我们将使用Livewire属性来这样做,基本上我们必须告诉它监听使用’On’的our-channel
通道上的’MessageEvent’使用’Echo’。这导致了以下属性#[On('echo:our-channel,MessageEvent')]
。
在这些调整之后,我们的Livewire组件应该看起来像这样。
class MessageComponent extends Component
{
public $message = "";
public $conversation = [];
public function submitMessage(){
MessageEvent::dispatch($this->message);
}
#[On('echo:our-channel,MessageEvent')]
public function listenForMessage($data){
$this->conversation[] = $data['theMessage'];
}
public function render()
{
return view('livewire.message-component');
}
}
你会注意到我们还在使用listenForMessage
函数来存储我们发送的消息。这简化了代码并使其看起来更好。
运行 reverber 服务器并测试
现在是时候启动我们的reverb服务器并开始发送消息了。你可以使用php artisan reverb:start
启动reverb服务器,你可以在后面加上--debug
来查看reverb为我们处理的消息。
就这样,现在我们可以从应用的一个实例中实时发送消息,并立即在所有已连接的实例上看到我们发送的消息,包括我们的对话框数组。
结论
使用reverb,我们能在Laravel应用中运行自己的WebSocket服务器。对于我们开发者来说,通过几条命令就可以轻松实现。在Vulpo(https://vulpo.be)为我们在这里和内部项目中工作的一些建议。
现在就试试吧!愉快的编码吧!✌️