使用 Server-sent Events 实现跨页面通信

面试官：小伙子，你的数组去重方式惊艳到我了

在现代化的 Web 应用中，不同页面之间的交互和通信已经成为了一个基本需求。传统的实现方式如 WebSocket 是一种实时双向通信协议，它需要在服务器端和客户端同时支持。然而，如果希望在仅使用 JavaScript 前端代码的情况下实现跨页面通信， Server-sent events（SSE）则是一种更加轻量的选项。

什么是 Server-sent events

Server-sent events 是一种在浏览器和服务器之间单向发送事件的 Web 技术。它旨在解决浏览器端的服务端推送消息问题，而不需要像 WebSocket 那样一直保持连接。服务器可以通过 SSE 将事件推送给客户端，而客户端则可以通过监听事件来处理它们。相比起轮询或长轮询，使用 SSE 可以实现更快的数据传输，并且在客户端实现更低的负载（因为只有在有事件到达的情况下才会发送请求）。

如何使用 Server-sent events

SSE 是基于事件流的，它发送的数据以文本的形式组成。服务器可以通过 HTTP 1.1 的持久连接来发送这些数据。在客户端，我们可以通过构建 SSE 对象以及定义事件监听器来接收这些数据。

服务器端

对于服务器端，SSE 只需要使用一个 HTTP endpoint 和一些“特殊”的 HTTP 头部就可以实现。下面是一个示例的 Node.js 实现，它使用 Express 框架将“Hello World”消息发送到客户端：

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

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

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

上述代码中，我们通过设置常见的 SSE 头部，即 Content-Type 和 Cache-Control 来告诉客户端将要接收到 SSE 数据。接下来我们使用 setInterval 方法来不断发送数据到客户端。为了遵循 SSE 格式，我们需要将数据用 data: 关键字封装，并且在数据结尾添加双换行符 '\n\n' 来使数据被识别为一个 SSE 事件。

客户端

在客户端，我们可以通过 JavaScript 来创建 EventSource 对象。这个对象可以监听事件流并解析 SSE 事件：

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

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

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

在上述代码中，我们创建了一个新的 EventSource 对象，并将其传入前面定义好的 HTTP endpoint URL。我们设置了两个事件监听器： onmessage 和 onerror。在 onmessage 监听器中，我们解析 SSE 数据并打印出其中的 message 属性。在 onerror 监听器中，我们处理 SSE 连接失败的情况。

现实世界的使用场景

SSE 可以用来实现很多现实世界的需求。比如实时消息推送，互动游戏，实时金融股票报价等。我们下面会通过一个基于 SSE 的浏览器聊天室示例来展示它的应用。

基于 SSE 的浏览器聊天室示例

这是一个简单的聊天室应用程序，支持多个浏览器之间的实时聊天。对于这个应用程序，我们在服务器上使用 SSE 来监听新用户连接，以及接收和广播消息：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在客户端，我们可以使用以下代码来监听这些消息和发送消息：

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

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

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

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

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

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

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

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

示例实现中的 broadcast 函数使用了在 slingr0/Welcome-Bot 上开发过的 code, 但是这个listenser不稳定，所以限制和开发上还有点不同。

结论

使用 SSE 实现跨页面通信是非常有用的，它比传统的 WebSocket 实现更加轻量级，并且非常容易实现。不仅如此，SSE 还能用于实现很多现实世界的应用程序。在将来，SSE 将继续成为 Web 开发人员的重要工具之一。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ffb5641b0bf82c71ceb272

阅读全文

猜你喜欢

  • Vue.js SPA 应用 SEO 改善范例

    Vue.js SPA 应用 SEO 改善范例 随着互联网的快速发展，网站变得越来越复杂和功能化，单页应用程序（Single Page Application, SPA）逐渐成为了一种流行的前端框架。

    17 天前
  • Babel 编译 React Native 遇到的常见问题及解决方法

    React Native 是一种用于构建跨平台移动应用程序的框架。它使用 JavaScript 语言，配合其强大的组件化架构，使得开发者可以更快、更简单地创建高质量的移动应用程序。

    17 天前
  • PM2 和 Node.js 的错误处理和日志记录最佳实践

    介绍 PM2 是 Node.js 应用程序进程管理器，它可以帮助我们启动，停止，重启和监控 Node.js 应用程序。当我们的 Node.js 应用出现错误或者崩溃时，我们需要及时地捕捉和记录错误，以...

    17 天前
  • 在使用 Enzyme 进行 React 组件测试时如何使用 cypress-axe 进行无障碍测试

    在开发 Web 应用程序时，我们需要确保应用程序足够可访问和无障碍。这不仅是遵守法规和标准的要求，同时也可以帮助您的应用程序更好地服务于您的用户，无论他们的身体状况如何。

    17 天前
  • 如何在 Headless CMS 中设置数据的自动备份

    前言 Headless CMS 是一种将内容管理系统 (CMS) 与前端或后端内容分离的方式，使开发者可以自由选择他们自己喜欢的技术堆栈来构建他们的网站或者移动应用。

    17 天前
  • Tailwind CSS 中常见的 stylelint 错误及解决方案

    Tailwind CSS 是一个快速的 CSS 框架，允许快速构建 Web 应用程序。然而，在使用 Tailwind CSS 的过程中，您可能会遇到一些 stylelint 错误。

    17 天前
  • 如何在 Next.js 中使用 styled-components

    简介 styled-components 可以让我们在 React 中使用 CSS in JS，它允许我们写出动态且强大的样式，同时保持组件的可重用性和可读性。在使用 Next.js 开发 React...

    17 天前
  • 如何使用 Symbol 防止对象属性被覆盖

    在 JavaScript 中，对象属性是很方便的一种数据结构。我们可以通过将值赋给属性，然后在代码中引用这些属性。然而，使用属性时，我们必须小心，以免意外地覆盖了它们。

    17 天前
  • Docker 安装后的常见问题解决方法

    Docker 是一个开源的容器化平台，让开发者可以轻松地打包、发布和运行应用程序。Docker 的出现让软件开发和部署变得更加轻松和便捷，因此以 Docker 为基础的技术越来越受到欢迎。

    17 天前
  • 如何在 React 中实现无障碍访问？

    无障碍访问 (Accessibility) 指的是通过一系列的设计和开发技术，让网站和应用程序更容易让所有用户（包括视觉、听觉、智力和身体功能受到影响的用户）使用。

    17 天前
  • 使用 Babel 编译时如何处理 ES2016 Enhance Object

    介绍 ES2016（也称为ES7）是 ECMAScript 标准的最新版本之一，它增加了许多新特性，其中之一就是 Enhance Object，也称为对象字面量扩展。

    17 天前
  • 如何使用 Serverless 实现人脸识别？

    人脸识别是一种热门的技术，它可以帮助我们快速、准确地识别面部特征，应用于许多领域，例如安全监控、人脸支付、美颜相机和智能门锁等。而在前端开发中，我们可以使用 AWS Serverless 框架来实现人...

    17 天前
  • PM2 相对于 Supervisor 和 Forever 的优点和缺点分析

    前言 在前端开发中，我们需要运行各种 Node.js 应用程序。为了管理这些应用程序的运行，我们通常会使用一些进程管理工具，例如 Supervisor 和 Forever。

    18 天前
  • 使用 Koa2 实现邮件发送、推送及异常反馈

    在开发前端应用程序时，与后端服务器进行协作是必不可少的。其中，许多应用程序需要使用邮件发送和推送通知等功能，同时还需要处理异常反馈来保证应用程序的正常运行。本文将介绍如何使用 Koa2 实现邮件发送、...

    18 天前
  • 利用 Headless CMS 和 Netlify 部署自己的博客

    在现代化技术的世界中，博客已经成为了一个非常普遍的存在。对于前端工程师而言，熟练掌握如何搭建和部署博客是一项必不可少的技能。而利用 Headless CMS 和 Netlify 部署自己的博客，已经成...

    18 天前
  • 如何正确地使用 ES9 的 String.prototype.trim() 方法

    在前端开发中，字符串处理是一个常见的任务。ECMAScript 9（ES9）引入了新的字符串方法 String.prototype.trimStart() 和 String.prototype.tri...

    18 天前
  • 如何设计RESTful API避免数据劫持

    在今天的互联网时代，Web应用程序中实现异步通信的方式不断增多，其中使用RESTful API的趋势越来越普遍。RESTful API提供了一种低耦合度、高可伸缩性以及可重用性强的网络应用程序开发方式...

    18 天前
  • Custom Elements 如何实现文件上传

    前言 随着互联网的发展，文件上传已经成为了 Web 应用中的常见行为之一。文件上传功能是很多网站的重要组成部分，比如在线编辑器、云存储等等。 在现代化 Web 应用中，自定义组件（Custom Ele...

    18 天前
  • ECMAScript 2017 中的 Array.prototype.includes() 方法如何使用

    ECMAScript 2017 中的 Array.prototype.includes() 方法如何使用? 在 ECMAScript 2016，JavaScript 规范中，引入了 Array.pro...

    18 天前
  • ES6 中的 Array.from 和 Array.of 让数组变化不停

    前言 数组是前端开发中非常重要的数据类型之一，它可以帮助我们存储数据，并进行各种操作。ES6 中提供了 Array.from 和 Array.of 方法，让数组的使用变得更加方便和灵活。

    18 天前

相关推荐

    暂无文章