基于 Server-Sent Events 的 Chrome 扩展程序-JavaScript中文网-JavaScript教程资源分享门户

简介

Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，而客户端可以通过 EventSource API 接收事件流，并实时更新页面内容。在前端开发中，SSE 可以用于实现实时通知、聊天室、股票行情等功能。

本文将介绍如何使用 SSE 和 Chrome 扩展程序来实现一个实时通知的示例应用。通过本文的学习，读者将了解 SSE 的基本原理、EventSource API 的使用方法以及如何将这些知识应用到 Chrome 扩展程序中。

实现步骤

1. 编写服务器端代码

首先，我们需要编写一个简单的服务器端代码，用于向客户端发送事件流。在本示例中，我们使用 Node.js + Express 来实现服务器端代码。代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  let id = 0;
  setInterval(() => {
    res.write(`id: ${id}\n`);
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    id++;
  }, 1000);
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

上述代码中，我们创建了一个 Express 应用，并在 /sse 路径下监听 GET 请求。在处理请求时，我们设置响应头，以告诉客户端我们将发送的是事件流。接着，我们使用 setInterval 定时向客户端发送事件数据，每隔一秒发送一条数据。

2. 编写 Chrome 扩展程序

接下来，我们需要编写一个 Chrome 扩展程序，用于接收服务器端发送的事件流，并在浏览器中实时显示通知。具体实现步骤如下：

在 manifest.json 文件中添加必要的权限：

"permissions": [
  "notifications",
  "http://localhost:3000/*"
]

上述代码中，我们添加了 notifications 权限，以便在浏览器中显示通知。同时，我们还添加了 http://localhost:3000/* 权限，以便在扩展程序中连接到服务器端。

在 popup.html 文件中添加以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <script src="popup.js"></script>
</body>
</html>

上述代码中，我们创建了一个简单的弹出窗口，并在窗口中添加了两个按钮。

在 popup.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const startBtn = document.querySelector('#start');
const stopBtn = document.querySelector('#stop');

let eventSource;

startBtn.addEventListener('click', () => {
  eventSource = new EventSource('http://localhost:3000/sse');

  eventSource.addEventListener('message', (event) => {
    const notification = new Notification('SSE Demo', {
      body: event.data
    });
  });

  startBtn.disabled = true;
  stopBtn.disabled = false;
});

stopBtn.addEventListener('click', () => {
  eventSource.close();

  startBtn.disabled = false;
  stopBtn.disabled = true;
});

上述代码中，我们首先获取了两个按钮的 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