通过 SSE 实现实时消息广播的简单示例

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

前言

实时应用在现代 Web 开发中变得越来越普遍,WebSockets 是构建实时通讯最常用的技术之一。然而,在某些情况下,WebSockets 并不是最优选择。某些情况下,你可能需要与服务器进行一次通信,并在关键时刻接收更新,例如:交易所显示股票价格。在这种情况下,服务器将更新推送给您,你不需要与服务器进行交互数据,并在关键时刻少量的接收即可。这时,“Server-Sent Events”(服务器发送事件,简称 “SSE”) 就成为一种非常有趣的解决方案。

SSE 是什么?

SSE 是一种服务器向客户端单向发送事件流的通讯模式。它使用一个标准的 HTTP 连接,发送文本数据。使用 SSE,客户端向服务器建立一次长连接,然后可以从服务器获得连续的更新。SSE 的使用方法与 AJAX 非常相似,但有几个关键区别:

  • 客户端只需要建立一次连接,以后将会持久联接,这意味着不需要在客户端和服务器之间交换大量的流量。
  • 实时信息逐步推送到客户端。这意味着,如果您的 Web 应用程序需要发送大量更新如聊天应用程序或电子邮件应用程序,这可能会更有效。
  • SSE 的使用相对简单,而且比 WebSockets 更好地与服务器集成。

实现 SSE

要将 SSE 用于你的应用程序,你需要完成一些基本步骤。

  1. 在服务器上,你需要在实现 SSE 的 web 页面上添加以下的请求标头:
------------- -----------------
-------------- --------
----------- ----------

第一个头告诉浏览器,这是像 text/event-stream 这样的 MIME 类型,这将触发 SSE。第二个标头告诉浏览器不要将响应缓存,而是每次都从服务器下载它。第三个标头告诉浏览器保持连接打开,这意味着当服务器有事件更新时浏览器不会关闭连接。

  1. 服务器需要发送 状态码 200 OK 给客户端,以确保 SSE 正确工作。

  2. 向应用程序中添加 SSE 代码。SSE 将打开一个长持续连接,以便在服务器侧有事件发生时,将该事件发送到客户端。以下是如何建立 SSE 连接的 JavaScript 代码:

--- ----------- - --- --------------------------------
--------------------- - --------------- -
    ------------------------
-

上面的代码将创建一个 EventSource 对象,并将目标地址设置为 "event_stream.php"。通过在 "event_stream.php" 页面上发送 SSE 信息,将触发 "eventSource.onmessage" 事件。对于上述代码的结果,将在控制台中 log 出所有从 SSE 服务端收到的消息。

一个 SSE 的简单示例

下面是一个简单的示例程序,显示如何通过 SSE 实现实时更新。该示例使用 PHP 语言实现 SSE 连接,来推送服务器时间(及其他可用更新)。

服务器端 PHP 代码

-----
--------------------- --------------------
---------------------- -----------
------------------- -------------

-------- ------------ ----- -
  ---- ---- -------
  ---- ------ ----------
  -----------
  --------
-
----------- - -------

-------------------- ------- ----- - - ------------- ---------

该代码片段展示了我们通常在 SSE 内部使用的一些属性和函数。第一个函数,在此示例中命名为 sendMsg($id, $msg),是将删除每个事件,并使用格式设置 SSE消息。发送时必须在每个消息之后发送两个换行符,以便客户端知道该消息已经传输完毕。

客户端 JavaScript 代码

--- ----------- - --- -----------------------
--------------------- - --------------- -
  ------------------------
-

上面的代码创建了一个 EventSource 对象,并将目标地址设置为 "sse.php"。每次服务器向客户端推送事件时 "eventSource.onmessage" 事件将被触发,并将信息传递给代表该事件的 event 变量。

结论

SSE 是一项非常有用的技术,它让我们更轻松地从服务器向客户端发送实时数据。通过 SSE,我们可以在不断开连接的同时提供简便又高效的推送。这种技术很容易学习,也很容易实现,希望这篇文章对你有帮助。

提示

  • 事件消息被当作纯文本,而不是 XML 或 JSON,轻松编码和简洁的数据格式可助于提高性能。
  • 除非您只需要发送一次事件,否则请始终保持 SSE 连接打开,以避免多次开/关连接。
  • SSE 不应该用于所有方案,如果您的应用程序需要“心跳”发送的请使用 WebSockets。 WebSockets 使得良好的道德方式易于立即推送大量数据,并可以缩减“WebSocket ping”请求以便减小数据传输负荷,并确保连接可靠。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671dcebf9babaf620fb83ec3


猜你喜欢

  • 调整视频播放器以实现无障碍性

    随着无障碍性的重要性越来越受到关注,越来越多的网站开始加强无障碍性功能。然而,在前端开发中,视频播放器的无障碍性功能并不像其他元素那样简单。这篇文章将详细介绍如何调整视频播放器,以实现无障碍性。

    13 天前
  • React+Redux 编程之大型组件架构设计

    React+Redux 是一种流行的前端开发技术,可用于构建高性能、可维护性强的 Web 应用程序。在实际开发中,经常需要构建大型组件架构,以满足复杂的业务需求。本文将介绍如何使用 React+Red...

    13 天前
  • 在 React 项目中使用 Tailwind CSS 的详细指南

    若你是一名前端工程师,那么你一定已经听说过 Tailwind CSS 这个 CSS 框架。它具备让开发者更加便捷、快速的开发 UI 的特性,尤其是在 React 项目中。

    13 天前
  • Sequelize ORM 框架在 Koa 框架中的使用

    简介 Sequelize 是一个流行的基于 Node.js 的 ORM(对象关系映射)框架,可以用来连接不同类型的数据库,并提供了方便的 CRUD 操作接口,能够显著提高开发效率和程序的可靠性。

    13 天前
  • 如何使用 Angular 实现响应式设计中的表格排序和筛选?

    如何使用 Angular 实现响应式设计中的表格排序和筛选? Angular 是一种流行的前端框架,用于构建 Web 应用程序。它是响应式设计的理想选择之一,因为它可以确保应用程序在各种设备和屏幕大小...

    13 天前
  • ES8 中的 Object.getOwnPropertyDescriptors() 方法应用实例分享

    ES8 中的 Object.getOwnPropertyDescriptors() 方法应用实例分享 在前端开发中,对象是不可避免的一个主题。而在ES8中,Object.getOwnPropertyD...

    13 天前
  • 使用 GraphQL 和 Apollo Client 管理应用程序缓存

    前言 在开发前端应用程序时,性能和用户体验往往是最重要的考虑因素之一。其中一个关键因素是使应用程序高效地使用缓存,从而减少服务器请求和提高应用程序的性能。 GraphQL 和 Apollo Clien...

    13 天前
  • ECMAScript 2020 的新技术:Rust

    ECMAScript 2020 的新技术:Rust 随着现代 Web 应用程序的需求不断增长,JavaScript 在前端开发中越来越受欢迎。然而,JavaScript 也有其缺点,比如性能较低、安全...

    13 天前
  • 在使用 Flexbox 布局时如何设置元素的默认大小?

    在前端开发中,使用 Flexbox 布局已经成为了一个非常流行的选择。它可以使我们更加高效地布局元素,适应各种不同的屏幕和终端。然而,在使用 Flexbox 布局时,我们可能需要设置元素的默认大小。

    13 天前
  • 优化 Django 程序性能的技巧

    Django 是一个高效的 Web 应用程序框架,提供了很多便利的功能。但是,如果应用程序规模增大或者访问量增加,就可能出现性能问题。为了优化 Django 程序性能,我们需要了解一些技巧。

    13 天前
  • Deno: 在生产环境中实现性能最大化的技巧

    在现代化的 Web 应用程序开发中,前端开发人员经常需要使用一个快速、可靠和高性能的 JavaScript 运行时环境。在这个角度上,Deno 是一个非常令人兴奋的工具。

    13 天前
  • 如何实现 RESTful API 的批量操作?

    RESTful API 是现代 Web 开发中常用的规范之一,能够帮助前端与后端实现数据的交互。在实际应用过程中,经常会有需要同时对多个资源进行操作的需求,这时候就需要实现 RESTful API 的...

    13 天前
  • Express.js 中的缓存技巧:使用 Etags 和 Last-Modified

    缓存是一项用于提高网站性能的技术。它是将数据存储在本地存储器中,从而避免在每次请求时都要重新获取数据。在前端开发中,使用缓存可以大大减少数据传输的时间,提高网站的加载速度和响应时间。

    13 天前
  • Redux 重构实践:如何做好一个 Redux 应用的重构

    Redux 是一款非常流行的状态管理工具,它为我们的应用带来了很多好处。但是,随着 Redux 应用的复杂度上升,我们可能会发现它的代码变得越来越难以维护。为此,我们需要对 Redux 应用进行重构,...

    13 天前
  • 响应式设计实现中如何解决浮动元素导致的布局错乱问题?

    在响应式设计中,页面的布局要适应多种设备大小和不同屏幕的显示器尺寸。然而,在实现响应式布局时,经常出现浮动元素导致布局错乱的问题。这篇文章将介绍如何解决这个问题,希望能对前端开发者有一些帮助和指导。

    13 天前
  • 如何在 ES6 中实现异步循环

    在编写复杂的 JavaScript 应用程序中,我们经常需要进行异步操作。这些操作可能包括请求远程数据、读取本地文件或等待用户输入等。在这些异步操作完成之前,我们需要等待它们的结果才能进行下一步操作。

    13 天前
  • 使用 Create React App 和 React Router 进行 Web 开发

    介绍 Node.js 是一门流行的开发语言,它能够帮助我们在服务端构建高效的应用程序。随着 Web 应用的发展,越来越多的开发者开始使用 React.js 来构建前端应用。

    13 天前
  • 如何在 Mongoose 中使用正则表达式查询数据

    如何在 Mongoose 中使用正则表达式查询数据 Mongoose 是一个操作 MongoDB 数据库的 Node.js ORM(Object-Relational Mapping)框架,它提供了一...

    13 天前
  • Enzyme 在测试 React Hooks 时的最佳实践

    React Hooks 是 React 16.8 版本新加入的特性,可以让我们在函数组件中使用状态(state)和其他 React 特性,从而将函数组件的复杂度提升到类组件的水平,这也为前端开发带来了...

    13 天前
  • 使用 Docker 搭建基于 Elasticsearch 的日志分析系统

    使用 Docker 搭建基于 Elasticsearch 的日志分析系统 如果你是一名前端开发者,你或许需要处理包括日志在内的大量数据。而要快速而精确地分析这些数据,你需要一个可信的技术方案。

    13 天前

相关推荐

    暂无文章