向服务端发送事件问候
如果您曾经需要在网上应用中实现实时功能，您可能已经熟悉使用WebSocket的复杂性或长时间轮询的资源密集型性质。
最近，我发现这两种方法都不是可行的选项，那时我发现了 服务器端发送事件（SSE），它不仅设置超级简单，而且还能在大幅缩短使用WebSocket所需的时间内实现实时通信，在本文中，我们将使用这项技术创建实时通知。
SSE是如何工作的？
SSE允许服务器在没有客户端不断轮询新信息的情况下，向网页发送实时更新。
流程很简单，客户端与服务器建立连接，然后服务器会在发生更新时，通过该连接向客户端发送更新，这些更新以“事件”的形式发送，包括一条消息和一个可选的事件名。
客户端可以相应地响应这些事件，例如显示通知或更新页面。
只有在您的用例需要从服务器到客户端的单向通信时，SSE才是WebSocket的好替代品。
让我们在Laravel项目中使用它
以下是今天我们将要构建的预览
安装
我将使用 Laravel-Wave 包来实现SSE。
让我们先创建一个新的Laravel应用
composer create-project laravel/laravel laravel-sse
对于服务器端配置，我们只需要拉取软件包
composer require qruto/laravel-wave
对于客户端配置，我们需要安装 Laravel Echo 以及软件包自带的适配器
npm install --save-dev laravel-echo laravel-wave
我还会为这个演示安装 sweetalert2
npm install --save-dev sweetalert2
广播通知
确保配置 Laravel 以广播事件，[相关文档](https://laravel.net.cn/docs/10.x/broadcasting#broadcast-service-provider)。让我们创建一个新的 Laravel 事件
php artisan make:event RealTimeNotification
我们需要对这个事件做一些修改
- 确保它实现了
ShouldBroadcast接口。 - 确保它返回
Channel而不是PrivateChannel。
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class RealTimeNotification implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*/
public function __construct(
public string $message,
) {}
/**
* Get the channels the event should broadcast on.
*
* @return array<int, \Illuminate\Broadcasting\Channel>
*/
public function broadcastOn(): array
{
return [
new Channel('events'),
];
}
}
现在我们需要配置 Laravel Echo 以监听这个新创建的事件。
在您的 bootstrap.js 中添加以下代码
import Swal from 'sweetalert2';
import Echo from 'laravel-echo';
import { WaveConnector } from 'laravel-wave';
window.Echo = new Echo({ broadcaster: WaveConnector });
window.Echo.channel('events')
.listen('RealTimeNotification', (e) => {
Swal.fire({
position: 'top',
icon: 'success',
title: e.message,
showConfirmButton: false,
});
});
现在让我们运行 Vite 开发服务器
npm run dev
信不信由你，这就是接收实时通知所需的全部！
测试通知
首先，在我们的 web.php 中添加一个路由
Route::view('real-time-notifications', 'sse');
在我们的 resources/views/see.blade.php 中添加以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Real Time Notifications</title>
</head>
<body>
@vite('resources/js/app.js')
</body>
</html>
现在我们只需调发 RealTimeNotification 事件
开始 tinker
php artisan tinker
调发事件
event(new \App\Events\RealTimeNotification("Hello World!"))
你应该会看到像上面预览中那样的弹出提示！
结论
服务器发送事件（SSE）设置简单且使用方便，但它们可能不适合每个项目，因为它们是单向的。
现在您已经了解它们，是时候决定选择简单的 SSE，它有一定的限制，还是选择多功能但复杂的 WebSockets，它可以用于所有用例。
Encryption, Caruso, RickyMaciel 点赞了这篇文章
