如何在 Laravel 中使用 Server-Sent Events 实现实时通信
Server-Sent Events（SSE）是一种在 Web 应用程序中无需持久性连接的情况下进行实时通信的技术。它允许服务器端发送消息到浏览器端，通过标准的 HTTP 通道进行通信，而无需使用 WebSockets 或长轮询。
Laravel 是一个流行的 PHP Web 应用程序框架，它提供了许多工具和功能来帮助开发人员创建高效、可维护的 Web 应用程序。在 Laravel 中使用 SSE 可以实现实时数据更新、聊天应用程序、会议计时器等。
本文将介绍如何在 Laravel 应用程序中使用 SSE 实现实时通信。我们将展示如何在后端定义 SSE 路由、如何在前端订阅这些路由，以及如何将 SSE 集成到 Laravel 的事件系统中。
定义 SSE 路由
定义 SSE 路由是实现 SSE 的第一步。在 Laravel 中，我们可以使用 Laravel 的路由功能来定义 SSE 路由。
首先，在 routes/web.php 文件中定义 SSE 路由：
------------------ -------- -- -
--------- - --- ----------------------------------------------------------- -- -
----- ------ -
----- - ----------
---- ------ --- ------ ---- --- -------------
-----------
--------
---------
-
---
--------------------------------------- ---------------------
---------------------------------------- ------------
------------------------------------- --------------
------ ----------
---上面的代码定义了一个名为 /sse 的 SSE 路由。该路由使用 Laravel 的 StreamedResponse 类来发送 SSE 数据。在回调函数中，使用 PHP 的 sleep() 函数每秒发送一条消息，表示服务器的当前时间。
要设置 SSE 响应的 MIME 类型和其他标头，我们还设置了 StreamedResponse 对象的标头。这些标头是必需的，以便浏览器正确处理 SSE 响应。
一旦我们定义了 SSE 路由，我们可以在浏览器端使用 EventSource（或其他 SSE 客户端）订阅它。
订阅 SSE 路由
在浏览器端使用 EventSource 订阅 SSE 路由非常简单。只需要将 SSE 路由的 URL 通过 EventSource 对象传递给浏览器：
--- ------ - --- -------------------- ---------------------------------- -------- ------- - ------------------------ ---
上面的代码使用了 JavaScript 的 EventSource 对象来订阅 SSE 路由的 URL。一旦订阅成功，浏览器将开始接收 SSE 消息，并将其传递给消息处理函数。
在上述代码中，我们简单地打印了服务器发送的时间消息。您可以将消息传递给其他事件处理程序，例如更新 Web 应用程序的 DOM。
更进一步：将 SSE 集成到 Laravel 的事件系统中
现在我们已经为 Laravel 应用程序定义了 SSE 路由，并订阅了它们，但如何将 SSE 集成到 Laravel 的事件系统中？这将使我们能够在 Laravel 的事件处理程序中向客户端发送 SSE 消息，实现真正的实时通信。
Laravel 的事件系统是一个强大的工具，用于在应用程序中处理事件和调度任务。我们可以使用它来向 SSE 客户端发送消息。
首先，在 Laravel 中定义 SSE 事件：
--------- -----------
--- ------------------------------------------
--- ----------------------------------
----- -----------------
-
--- ------------- -----------------
--- ---- ------ --
------ ------
------ -------- ------------------ ------
-
----------- - ------
-
-在上述代码中，我们定义了一个名为 ServerTimeUpdated 的 SSE 事件。该事件包含一个名为 $time 的公共属性，表示服务器的当前时间。
然后我们创建一个新的 SSE 事件路由，在 routes/web.php 中定义：
------------------------- -------- -- -
--------- - --- ----------------------------------------------------------- -- -
------------ - --
----- ------ -
-------- - -------------
------- -- ---------
------ -- -
------ -- ----------
--
---- -- ---------------
---
---- ------ ----------------
-----------
--------
---------
-
---
--------------------------------------- ---------------------
---------------------------------------- ------------
------------------------------------- --------------
------ ----------
-----------------------注意，我们现在使用了一个带有名为 update 的自定义事件，而不是之前的服务器时间消息。
最后，我们可以将 SSE 事件与 Laravel 事件系统集成：
--------- --------------
--- -----------------------------
----- --------------------
-
------ -------- ------------------------ -------
-
--------- ---------------------- -
------- -- ---------
------ -- -
------ -- -------------
--
----
-
-上面的示例中，我们使用 Laravel 的事件类来创建 SSE 事件，并将其传递给 Laravel 的事件系统。
最后，我们需要创建 SSEEvent 类：
--------- -----------
--- ---------------------------------------------
--- -----------------------------------------------------
----- -------- ---------- ------------------
-
--- ---------------------
------ ---------
------ -------
------ ------
------ ----
------ -------- ------------------ --------- ----- ----- - ---
-
-------------- - ---------
------------ - -------------- -- ---------
----------- - ------------- -- ---
--------- - ----------- -- -----
-
------ -------- -------------- ------
-
------ -------------
-
------ -------- -------------- -----
-
------ -----------------
-
------ -------- ---------------- -----
-
-------- - ------------
-- --------------------- -
-------------- - ----------
-
------ ---------
-
-注意，我们的 SSEEvent 类实现了 Laravel 的 ShouldBroadcastNow 接口，并使用 Laravel 的广播系统将事件向 SSE 客户端进行广播。
结论
在本文中，我们介绍了如何在 Laravel 应用程序中使用 Server-Sent Events（SSE）实现实时通信。我们演示了如何定义 SSE 路由、如何在浏览器中订阅 SSE 路由，以及如何使用 Laravel 事件系统向 SSE 客户端发送消息。这是一个强大的技术，可用于许多实际用例，例如创建实时应用程序、聊天应用程序等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6717453ead1e889fe2209711