在现代 Web 应用程序中，实时通信已成为必不可少的功能。传统的轮询和 WebSocket 技术可以实现实时通信，但它们都有一些缺点。轮询会消耗大量的带宽和资源，而 WebSocket 只能在支持它的浏览器中使用。而 Server-sent Events（SSE）技术则提供了一种轻量级的实时通信解决方案。
本文将介绍如何在 Laravel 中使用 Server-sent Events 实现实时通信。我们将详细解释 SSE 技术的工作原理，并提供一个完整的 Laravel 示例应用程序，以便您可以快速开始使用 SSE。
SSE 技术的工作原理
SSE 技术允许 Web 应用程序使用 HTTP 协议实现实时通信。与传统的轮询技术不同，SSE 技术使用单向连接，从服务器向客户端发送数据。这种单向连接的好处是可以减少带宽和资源的使用，并且可以在不支持 WebSocket 的浏览器中使用。
SSE 技术的 HTTP 连接始终保持打开状态，直到连接被关闭。服务器可以使用该连接向客户端发送事件，这些事件可以是任何类型的数据，如 JSON、HTML 或纯文本。客户端使用 JavaScript 代码监听来自服务器的事件，并在接收到事件时执行相应的操作。
SSE 技术的优点包括：
- 轻量级：SSE 仅使用 HTTP 协议，不需要额外的协议或库。
- 简单易用：SSE 的 API 简单易用，只需要几行 JavaScript 代码即可实现实时通信。
- 跨浏览器支持：SSE 技术可以在所有现代浏览器中使用，包括不支持 WebSocket 的浏览器。
在 Laravel 中使用 SSE
现在我们来看看如何在 Laravel 中使用 SSE 技术实现实时通信。我们将创建一个简单的聊天应用程序，让用户可以实时发送和接收消息。
步骤 1：创建 Laravel 应用程序
首先，我们需要创建一个 Laravel 应用程序。可以使用 Composer 命令创建一个新的 Laravel 应用程序：
-------- -------------- ------------- --------------- --------
步骤 2：安装推送器包
我们将使用推送器包 pusher/pusher-php-server 来实现 SSE 技术。使用 Composer 命令安装该包：
-------- ------- ------------------------
步骤 3：创建 SSE 路由
我们需要创建一个 SSE 路由，以便客户端可以连接到服务器并接收实时事件。在 routes/web.php 文件中添加以下路由：
------------------ -------- -- -
------- - --- --------------
----------------------
-------------------------
---------------------
-
--------- -- --------------------------
----------- -- ----
-
--
--------------------- --------------------
---------------------- -----------
----- ------ -
----- - -------------------------- ---------- ----- ----- ----- -------- -- ----
-- -------------- -- ------------------------ -
---- ------ - - ---------------- - -------
-----------
--------
-
---------
-
---在上面的代码中，我们使用 Pusher 包创建了一个 Pusher 实例，并使用 SSE 协议向客户端发送事件。在 while 循环中，我们从 Pusher 实例中获取名为 chat 的频道中的最新事件，并将其发送到客户端。使用 sleep(1) 函数可以让循环每秒运行一次，以减少服务器资源的使用。
步骤 4：创建聊天界面
现在我们需要创建一个页面，以便用户可以发送和接收消息。在 resources/views/welcome.blade.php 文件中添加以下代码：
--------- -----
------
------
---------- ------------
------- -------------------------------------------------------
-------
------
------- ---------
---- ----------
---- --------------------
------
------ ----------- -------------
------ ------------- -------------
-------
------
--------
----- ------ - --- ---------- --------------------- ---- -
-------- --- ------------------------- ----
---------- ----
---
----- ------- - -------------------------
----------------------- -------------- -
----- -------- - ------------------------------------
------------------ -- ----- - ---- - -------
---
----- ---- - -------------------------------
------------------------------- --------------- -
-----------------------
----- ------- - -----------------------------------------
----- --- - --- -----------------
---------------- ---------
------------------------------------ -------------------------------------
------------------- - -----------------------------
---------------------------------------- - ---
---
---------
-------
-------在上面的代码中，我们使用 Pusher JavaScript 库订阅了名为 chat 的频道，并使用 channel.bind() 函数监听来自服务器的 message 事件。在事件处理程序中，我们将接收到的消息添加到页面中的 messages 元素中。
我们还创建了一个表单，以便用户可以发送消息。当用户提交表单时，我们使用 XMLHttpRequest 对象向服务器发送消息，并使用 encodeURIComponent() 函数对消息进行编码。
步骤 5：处理消息
现在我们需要创建一个路由，以便客户端可以向服务器发送消息。在 routes/web.php 文件中添加以下路由：
-------------------- -------- ------------------------ --------- -
------- - --- --------------
----------------------
-------------------------
---------------------
-
--------- -- --------------------------
----------- -- ----
-
--
------------------------ ---------- ----------------------------
------ -------------------------- -- ------------
---在上面的代码中，我们使用 Pusher 包创建了一个 Pusher 实例，并使用 trigger() 函数向名为 chat 的频道发送消息。我们还返回了一个 JSON 响应，以便客户端知道消息已成功发送。
步骤 6：配置 Pusher
最后，我们需要在 .env 文件中配置 Pusher 凭据。在 .env 文件中添加以下代码：
------------------------- --------------------------- --------------------------------- -----------------------------------
记得将 your-app-id、your-app-key、your-app-secret 和 your-app-cluster 替换为您的实际 Pusher 凭据。
现在，我们已经完成了 Laravel 中使用 SSE 技术实现实时通信的配置和开发。您可以运行应用程序并在浏览器中打开它，以开始使用 SSE 技术进行实时通信！
总结
在本文中，我们介绍了 SSE 技术的工作原理，并提供了一个完整的 Laravel 示例应用程序，以便您可以快速开始使用 SSE。SSE 技术提供了一种轻量级的实时通信解决方案，可以在所有现代浏览器中使用。我们希望本文能够帮助您了解 SSE 技术，并在您的应用程序中使用它来实现实时通信。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f7dda6d10417a22234231d