简介
Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，而客户端可以通过 EventSource API 接收事件流，并实时更新页面内容。在前端开发中，SSE 可以用于实现实时通知、聊天室、股票行情等功能。
本文将介绍如何使用 SSE 和 Chrome 扩展程序来实现一个实时通知的示例应用。通过本文的学习，读者将了解 SSE 的基本原理、EventSource API 的使用方法以及如何将这些知识应用到 Chrome 扩展程序中。
实现步骤
1. 编写服务器端代码
首先，我们需要编写一个简单的服务器端代码，用于向客户端发送事件流。在本示例中，我们使用 Node.js + Express 来实现服务器端代码。代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
--- -- - --
-------------- -- -
-------------- ----------
---------------- ----- -----------------------------------
-----
-- ------
---
---------------- -- -- -
------------------- -- ------- -- ------------------------
---上述代码中，我们创建了一个 Express 应用，并在 /sse 路径下监听 GET 请求。在处理请求时，我们设置响应头，以告诉客户端我们将发送的是事件流。接着，我们使用 setInterval 定时向客户端发送事件数据，每隔一秒发送一条数据。
2. 编写 Chrome 扩展程序
接下来，我们需要编写一个 Chrome 扩展程序，用于接收服务器端发送的事件流，并在浏览器中实时显示通知。具体实现步骤如下：
- 在
manifest.json文件中添加必要的权限：
"permissions": [ "notifications", "http://localhost:3000/*" ]
上述代码中，我们添加了 notifications 权限，以便在浏览器中显示通知。同时，我们还添加了 http://localhost:3000/* 权限，以便在扩展程序中连接到服务器端。
- 在
popup.html文件中添加以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- ------------------------- ------- ----------------------- ------- ------------------------ ------- -------
上述代码中，我们创建了一个简单的弹出窗口，并在窗口中添加了两个按钮。
- 在
popup.js文件中添加以下代码：
-- -------------------- ---- -------
----- -------- - ---------------------------------
----- ------- - --------------------------------
--- ------------
---------------------------------- -- -- -
----------- - --- -----------------------------------------
--------------------------------------- ------- -- -
----- ------------ - --- ----------------- ------ -
----- ----------
---
---
----------------- - -----
---------------- - ------
---
--------------------------------- -- -- -
--------------------
----------------- - ------
---------------- - -----
---上述代码中，我们首先获取了两个按钮的 DOM 元素，并为它们添加了点击事件监听器。在 start 按钮被点击时，我们创建了一个 EventSource 对象，并指定了连接的 URL。接着，我们为 EventSource 对象添加了 message 事件监听器，用于接收服务器端发送的事件数据，并在浏览器中显示通知。在 stop 按钮被点击时，我们关闭了 EventSource 对象，并更新了按钮状态。
3. 运行应用
最后，我们需要启动服务器端代码，并在 Chrome 浏览器中加载扩展程序。具体步骤如下：
- 在终端中进入项目目录，并执行以下命令启动服务器端代码：
node server.js
在 Chrome 浏览器中打开扩展程序管理页面，点击「加载已解压的扩展程序」按钮，选择项目目录下的
chrome-extension文件夹并加载。点击扩展程序图标，弹出窗口中显示「Start」和「Stop」按钮。点击「Start」按钮，即可开始接收服务器端发送的事件流，并在浏览器中实时显示通知。点击「Stop」按钮，即可停止接收事件流。
总结
通过本文的学习，我们了解了 SSE 的基本原理和使用方法，并将这些知识应用到了 Chrome 扩展程序中。通过这个简单的实例，我们可以发现 SSE 在实现实时通知等功能时非常方便和高效，而 Chrome 扩展程序也为我们提供了很好的平台来开发和测试这些功能。希望本文对读者有所帮助，也希望读者能够继续深入学习和探索前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656455fed2f5e1655ddc5518