如何在 Laravel 中使用 Server-Sent Events 实现实时通信

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

如何在 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


猜你喜欢

  • 使用 Headless CMS 支持无线远程控制的简单教程

    在现今互联网时代,越来越多的网站和应用程序开始采用 Headless CMS 技术,它可以将内容与界面分离,从而支持前端开发人员通过 Rest API 获取数据,并提供远程控制的能力。

    19 天前
  • Koa 中使用 Passport 进行 OAuth 认证的实现方法

    在现在的 Web 开发领域中,越来越多的应用都会支持 OAuth 认证。OAuth 是一种开放标准,允许用户授权第三方应用访问其数据,而无需向第三方应用共享其密码。

    19 天前
  • Sequelize 中的事务并发问题及解决

    Sequelize 是一个基于 Node.js 的 ORM 库,支持多种数据库,包括 MySQL、PostgreSQL 等。在使用 Sequelize 进行数据库操作时,事务是常见的操作之一。

    19 天前
  • 在 Vue CLI 3 项目中,正确使用 ESLint 进行代码规范检查

    ESLint 是一个代码检查工具,可用于检查 JavaScript 代码中的潜在错误和代码风格问题。在 Vue CLI 3 项目中,ESLint 默认已经启用,但是可能需要进行一些配置,以确保它可以正...

    19 天前
  • 如何在响应式设计中优化表格布局

    在响应式设计中,表格布局一直是一个很大的挑战。因为表格本身是一种非常静态的布局方式,如果不加以优化,就很难适应不同的屏幕尺寸。本文将介绍如何在响应式设计中优化表格布局,以实现更好的用户体验。

    19 天前
  • 为什么 Jest 测试失败了?

    Jest 是一个非常流行的 JavaScript 测试框架,许多前端开发人员都喜欢使用它进行单元测试、集成测试甚至端到端测试。但是,有时你可能会看到 Jest 测试失败了,甚至找不到问题出在哪里,这是...

    19 天前
  • 如何使用ES12中的Temporal API处理日期和时间?

    随着时间和日期处理在现代Web开发中的重要性的增加,ECMAScript在其最新版本中引入了Temporal API作为日期和时间的新方式。Temporal API为开发人员提供了一种更简单、更直观的...

    19 天前
  • Chai 如何对对象进行深度相等性测试

    在前端开发中,测试是一个非常重要的环节。对于对象的深度相等性测试是一项非常常见的测试任务。Mocha 是一个非常受欢迎的 JavaScript 测试框架,而 Chai 是一个用于编写断言库的插件,是在...

    19 天前
  • 使用 Fastify 的 “生产者 - 消费者” 模式构建轻松高效的任务队列系统

    随着前端应用的规模不断扩大,我们发布一个新的版本或进行一次复杂的操作可能需要消耗非常长的时间。通常情况下,我们不希望阻塞用户交互,并且需要在后台处理任务。在这种情况下,任务队列系统就能很好地帮助我们解...

    19 天前
  • 探索 Express.js 应用的性能瓶颈,优化方法汇总

    在构建大型 Web 应用程序中,Express.js 是开发人员最常用的框架之一。但是,当应用程序规模变大时,性能问题就会变得更加突出。这篇文章将带您深入探索 Express.js 应用程序可能遇到的...

    19 天前
  • Angular 应用 SEO 优化实践指南

    在设计和开发现代 Web 应用时,前端框架(例如 Angular、React、Vue 等)变得越来越受欢迎。这些框架可以用来构建单页应用程序或其他交互式应用程序,但是它们在 SEO 中的表现不太友好。

    19 天前
  • 用 Serverless 快速构建分布式后端服务

    Serverless 架构是一种基于云计算的应用构建方法,它使开发人员可以在不需要管理服务器的情况下构建和运行应用程序。在 Serverless 架构中,应用程序是以函数的方式编写的,部署和运行在无服...

    19 天前
  • 在使用 Deno 开发时遇到了 Module Not Found 错误,怎么解决?

    在使用 Deno 进行前端开发时,我们可能会遇到 Module Not Found 错误,这个错误发生的原因是因为 Deno 可能找不到某个模块或文件。 1. 错误的原因 模块或文件不存在 模块或文...

    19 天前
  • 如何在 Redux 中处理分页及数据加载

    在前端开发中,数据的分页及加载是一个经常需要面对的问题。Redux 作为前端应用状态管理器,可以很好地协调数据的传输和交互。在此,我们将会深入介绍如何在 Redux 中处理分页及数据加载,并提供一些示...

    19 天前
  • Enzyme 如何测试 React 组件中的表单数据

    在 React 应用程序的开发过程中,表单数据是非常常见的。为了保证应用程序的质量,我们需要对表单数据进行测试。Enzyme 是一个用于 React 应用程序的 JavaScript 测试工具,它提供...

    19 天前
  • 利用 REM 实现响应式字体大小控制的技巧

    在响应式设计中,如果你想要您的网站或应用程序能够自适应不同屏幕大小和设备类型,那么您需要能够控制文本的大小以适应各种视图。 在本文中,我们将介绍如何使用 REM 来自适应文本大小。

    19 天前
  • Docker 容器中运行 Oracle 数据库的方法和技巧

    介绍 Oracle 数据库是企业级数据库软件,它提供了完整且兼容的 SQL 数据库服务。Oracle 数据库的使用广泛,拥有天然优势,具有强大的大数据和高安全性特点。

    19 天前
  • 使用 Node.js 和 Express 构建 RESTful API 的最佳实践

    RESTful API 已经成为现代 Web 应用的标配,并且 Node.js 和 Express 正成为开发这类 API 的首选技术。尽管这两个工具的使用非常简单,但是在构建 RESTful API...

    19 天前
  • RxJS 中的过滤操作符详解

    RxJS 是一个基于响应式编程的 JavaScript 库,为 JavaScript 提供了一种函数响应式编程的思想。而在 RxJS 中,过滤操作符是非常常用的操作符之一。

    19 天前
  • Kubernetes 中容器网络使用 Calico 的实践

    在 Kubernetes 中,容器网络达到了一种独特的状态,它能够支持不同节点之间的容器和容器间通信。这使得将应用程序拆分为更小,更可管理和更可伸缩的组件变得更加容易。

    19 天前

相关推荐

    暂无文章