如何在 Laravel 中使用 Server-Sent Events 构建实时通知-JavaScript中文网-JavaScript教程资源分享门户

什么是 Server-Sent Events

Server-Sent Events（SSE）是一种服务器推送技术，它可以实现服务器向客户端主动推送数据。与 WebSocket 不同，SSE 不需要建立双向通信通道，而是通过 HTTP 协议的长连接，将数据推送给客户端。SSE 可以被用于实现实时通知、实时聊天、实时数据更新等场景。

在 Laravel 中使用 Server-Sent Events

Laravel 是一种流行的 PHP Web 开发框架，它提供了一些功能强大的工具和库，可以帮助我们更方便地实现 SSE 功能。

安装依赖

首先，我们需要安装一个 SSE 的 PHP 库，可以使用 composer 进行安装。

composer require php-ai/php-sse

创建路由

在 Laravel 中，我们可以使用路由来处理 SSE 的请求。首先，我们需要在 routes/web.php 文件中定义一个 SSE 路由：

Route::get('/sse', 'SSEController@stream');

创建控制器

接下来，我们需要创建一个控制器，用于处理 SSE 请求。在 Laravel 中，我们可以使用 Symfony\Component\HttpFoundation\StreamedResponse 类来构建 SSE 响应。在控制器中，我们可以使用 stream 方法来处理 SSE 请求：

// javascriptcn.com 代码示例
use Symfony\Component\HttpFoundation\StreamedResponse;
use PHPAI\SSE\SSE;

class SSEController extends Controller
{
    public function stream()
    {
        $sse = new SSE();

        // 设置 SSE 的回调函数
        $sse->addEventListener('message', function () {
            return 'Hello, world!';
        });

        // 设置 SSE 的响应头
        $response = new StreamedResponse();
        $response->headers->set('Content-Type', 'text/event-stream');
        $response->headers->set('Cache-Control', 'no-cache');
        $response->headers->set('Connection', 'keep-alive');

        // 发送 SSE 数据
        $response->setCallback(function () use ($sse) {
            $sse->start();
        });

        return $response;
    }
}

在上面的代码中，我们首先创建了一个 SSE 对象，并设置了它的回调函数。回调函数返回的数据将会被作为 SSE 的数据发送给客户端。

接着，我们创建了一个 StreamedResponse 对象，并设置了它的响应头。Content-Type 必须设置为 text/event-stream，Cache-Control 和 Connection 也需要设置正确。

最后，我们使用 setCallback 方法来发送 SSE 数据。在回调函数中，我们调用 start 方法来启动 SSE。

客户端实现

在客户端，我们可以使用 JavaScript 来接收 SSE 数据。可以使用 EventSource 对象来接收 SSE 数据。下面是一个简单的示例：

const source = new EventSource('/sse');

source.addEventListener('message', function (event) {
    console.log(event.data);
});

在上面的代码中，我们创建了一个 EventSource 对象，并指定了 SSE 的请求地址。使用 addEventListener 方法来监听 message 事件，当 SSE 有数据到达时，就会触发该事件，并将数据传递给回调函数。

完整示例

下面是一个完整的 SSE 示例代码：

// javascriptcn.com 代码示例
use Symfony\Component\HttpFoundation\StreamedResponse;
use PHPAI\SSE\SSE;

class SSEController extends Controller
{
    public function stream()
    {
        $sse = new SSE();

        // 设置 SSE 的回调函数
        $sse->addEventListener('message', function () {
            return 'Hello, world!';
        });

        // 设置 SSE 的响应头
        $response = new StreamedResponse();
        $response->headers->set('Content-Type', 'text/event-stream');
        $response->headers->set('Cache-Control', 'no-cache');
        $response->headers->set('Connection', 'keep-alive');

        // 发送 SSE 数据
        $response->setCallback(function () use ($sse) {
            $sse->start();
        });

        return $response;
    }
}

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
    <title>SSE Demo</title>
</head>
<body>
    <script>
        const source = new EventSource('/sse');

        source.addEventListener('message', function (event) {
            console.log(event.data);
        });
    </script>
</body>
</html>

总结

本文介绍了如何在 Laravel 中使用 Server-Sent Events 构建实时通知功能。通过使用 Symfony\Component\HttpFoundation\StreamedResponse 类和 PHPAI\SSE\SSE 库，我们可以轻松地实现 SSE 功能。SSE 可以被用于实现实时通知、实时聊天、实时数据更新等场景。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65654d66d2f5e1655de90751