EventSource

已于 2024-05-22 19:57:04 修改
阅读量1k 收藏 23
点赞数 11
文章标签： 前端
于 2024-05-22 19:54:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63681863/article/details/139128229
版权

什么是EventSource

EventSource 是一个用于服务器推送事件（Server-Sent Events, SSE）的接口，它允许服务器推送实时更新到浏览器。与 WebSocket 不同，SSE 是单向的（服务器到客户端），适用于更新频率不高的实时通知、消息推送等场景。下面是关于 EventSource 的详细介绍，包括使用示例和注意事项。

基本概念

  • 服务器推送事件（SSE）：服务器向客户端推送实时更新，而不需要客户端发起请求。
  • EventSource 接口：浏览器端用于接收服务器推送事件的 API。

创建 EventSource 实例

要创建一个 EventSource 实例，需要传入一个 URL，这个 URL 指向服务器端的事件流端点：

const eventSource = new EventSource('https://example.com/events');

监听事件

EventSource 可以监听三种类型的事件：message、open 和 error。

  • message 事件：当服务器发送一个消息时触发。
  • open 事件：当连接被打开时触发。
  • error 事件：当发生错误时触发。
eventSource.onmessage = function(event) {
  console.log('Message:', event.data);
};

eventSource.onopen = function() {
  console.log('Connection opened.');
};

eventSource.onerror = function(event) {
  if (event.readyState === EventSource.CLOSED) {
    console.log('Connection closed.');
  } else {
    console.log('Error:', event);
  }
};

自定义事件

除了默认的 message 事件，你还可以监听自定义事件。服务器可以通过 event 字段来定义事件类型，客户端使用 addEventListener 来监听。

服务器发送（示例）：

event: customEvent
data: This is a custom event

客户端监听：

eventSource.addEventListener('customEvent', function(event) {
  console.log('Custom Event:', event.data);
});

服务器端设置

服务器端需要设置适当的响应头来支持 SSE：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

并按照指定的格式发送数据：

data: This is a message\n\n

例如，使用 Node.js 和 Express 的实现：

const express = require('express');
const app = express();

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

  setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: 'Hello, World!' })}\n\n`);
  }, 1000);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

关闭连接

当不再需要接收事件时，可以关闭 EventSource 连接：

eventSource.close();
console.log('Connection closed.');

完整示例

以下是一个完整的前端和后端示例，展示了如何使用 EventSource 和 SSE。

前端（HTML + JavaScript）：

<!DOCTYPE html>
<html>
<head>
  <title>EventSource Example</title>
</head>
<body>
  <h1>Server-Sent Events Example</h1>
  <div id="messages"></div>
  <script>
    const eventSource = new EventSource('http://localhost:3000/events');

    eventSource.onmessage = function(event) {
      const messageElement = document.createElement('div');
      messageElement.textContent = 'Message: ' + event

```html
      messageElement.textContent = 'Message: ' + event.data;
      document.getElementById('messages').appendChild(messageElement);
    };

    eventSource.onopen = function() {
      console.log('Connection opened.');
    };

    eventSource.onerror = function(event) {
      if (event.readyState === EventSource.CLOSED) {
        console.log('Connection closed.');
      } else {
        console.log('Error:', event);
      }
    };

    // Example of listening to a custom event
    eventSource.addEventListener('customEvent', function(event) {
      const customEventElement = document.createElement('div');
      customEventElement.textContent = 'Custom Event: ' + event.data;
      document.getElementById('messages').appendChild(customEventElement);
    });

    // Close the EventSource after 10 seconds for demonstration purposes
    setTimeout(() => {
      eventSource.close();
      console.log('Connection closed.');
    }, 10000);
  </script>
</body>
</html>

后端（Node.js + Express）：

const express = require('express');
const app = express();

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

  // Send a simple message every second
  const intervalId = setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: 'Hello, World!' })}\n\n`);
  }, 1000);

  // Send a custom event every 5 seconds
  const customEventIntervalId = setInterval(() => {
    res.write(`event: customEvent\ndata: This is a custom event\n\n`);
  }, 5000);

  // Clear intervals when client closes connection
  req.on('close', () => {
    clearInterval(intervalId);
    clearInterval(customEventIntervalId);
  });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

详细解释

  1. 前端代码解释：

    • EventSource 实例：const eventSource = new EventSource('http://localhost:3000/events'); 创建一个新的 EventSource 实例，连接到服务器的 /events 端点。
    • 事件监听：
      • onmessage 处理默认的 message 事件，显示从服务器接收到的消息。
      • onopen 处理连接打开事件，输出连接已打开的信息。
      • onerror 处理错误事件，输出错误信息或连接关闭信息。
      • addEventListener('customEvent', ...) 处理自定义事件 customEvent，显示从服务器接收到的自定义事件数据。
    • 关闭连接：使用 setTimeout 在 10 秒后关闭 EventSource 连接。

  2. 后端代码解释：

    • Express 服务器：创建一个简单的 Express 服务器，监听 /events 路由。
    • 设置响应头：确保设置 Content-Type, Cache-Control, 和 Connection 头以支持 SSE。
    • 发送数据：
      • 使用 setInterval 每秒发送一个消息。
      • 使用另一个 setInterval 每 5 秒发送一个自定义事件。
    • 清理：当客户端关闭连接时，清理定时器以避免内存泄漏。

注意事项

  • 浏览器支持：EventSource 在现代浏览器中得到广泛支持，但在 IE 和旧版浏览器中不支持。你可能需要考虑替代方案或 Polyfill。
  • 单向通信：SSE 是单向通信，从服务器到客户端。如果需要双向通信，应该考虑使用 WebSocket。
  • 重连机制：EventSource 内置了自动重连机制，连接断开时会自动尝试重新连接。
  • 带宽考虑：SSE 使用 HTTP/1.1 长连接，适合较低频率的消息推送。如果消息频率较高，应考虑 WebSocket。

通过上述示例，你应该能够理解和使用 EventSource 来实现服务器推送事件，从而在你的应用中实现实时更新。

可以使用eventSource向后端传递数据吗

EventSource 是一种用于服务器推送事件（Server-Sent Events, SSE）的技术，主要用于服务器向客户端推送数据。这是一种单向通信，从服务器到客户端。它不支持从客户端向服务器发送数据。

如果你需要双向通信（即从客户端向服务器发送数据并接收服务器的响应），有几种常见的替代方案可以考虑：

替代方案

  1. XHR (XMLHttpRequest) / Fetch API:

    • 用于在需要的时候从客户端向服务器发送请求。
    • 可以与 EventSource 配合使用，处理从服务器接收推送消息。

  2. WebSocket:

    • 支持全双工通信，允许客户端和服务器相互发送数据。
    • 适用于实时性要求较高的应用场景。

使用 Fetch API 发送数据

假设你正在使用 EventSource 接收服务器推送的数据，同时需要发送数据到服务器，你可以使用 fetch API 来实现。

前端示例：

<!DOCTYPE html>
<html>
<head>
  <title>EventSource with Fetch</title>
</head>
<body>
  <h1>EventSource with Fetch Example</h1>
  <div id="messages"></div>
  <button id="sendDataButton">Send Data</button>

  <script>
    const eventSource = new EventSource('http://localhost:3000/events');

    eventSource.onmessage = function(event) {
      const messageElement = document.createElement('div');
      messageElement.textContent = 'Message: ' + event.data;
      document.getElementById('messages').appendChild(messageElement);
    };

    eventSource.onopen = function() {
      console.log('Connection opened.');
    };

    eventSource.onerror = function(event) {
      if (event.readyState === EventSource.CLOSED) {
        console.log('Connection closed.');
      } else {
        console.log('Error:', event);
      }
    };

    document.getElementById('sendDataButton').addEventListener('click', () => {
      fetch('http://localhost:3000/send-data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message: 'Hello, Server!' })
      })
      .then(response => response.json())
      .then(data => {
        console.log('Success:', data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
    });
  </script>
</body>
</html>

后端示例（Node.js + Express）：

const express = require('express');
const app = express();

app.use(express.json());

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

  const intervalId = setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: 'Hello, Client!' })}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(intervalId);
  });
});

app.post('/send-data', (req, res) => {
  const clientMessage = req.body.message;
  console.log('Received from client:', clientMessage);
  res.json({ status: 'success', receivedMessage: clientMessage });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

使用 WebSocket 实现双向通信

如果你需要更复杂的双向通信，可以考虑使用 WebSocket：

前端示例：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Example</title>
</head>
<body>
  <h1>WebSocket Example</h1>
  <div id="messages"></div>
  <button id="sendDataButton">Send Data</button>

  <script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = function() {
      console.log('WebSocket connection opened.');
    };

    socket.onmessage = function(event) {
      const messageElement = document.createElement('div');
      messageElement.textContent = 'Message: ' + event.data;
      document.getElementById('messages').appendChild(messageElement);
    };

    socket.onerror = function(event) {
      console.error('WebSocket error:', event);
    };

    socket.onclose = function() {
      console.log('WebSocket connection closed.');
    };

    document.getElementById('sendDataButton').addEventListener('click', () => {
      const message = 'Hello, Server!';
      socket.send(message);
      console.log('Sent:', message);
    });
  </script>
</body>
</html>

后端示例（Node.js + ws 模块）：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 3000 });

server.on('connection', ws => {
  console.log('New client connected.');

  ws.on('message', message => {
    console.log('Received from client:', message);
    ws.send(`Hello, Client! Received your message: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected.');
  });

  ws.send('Welcome, Client!');
});

总结

EventSource 仅用于服务器到客户端的单向通信。如果你需要从客户端向服务器发送数据，建议使用 fetch 或 XMLHttpRequest 结合 EventSource，或者采用 WebSocket 进行双向通信。

珊珊而川
关注
  • 11
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端项目-event-source-polyfill.zip
09-03
前端项目-event-source-polyfill,http://www.w3.org/tr/eventsource的polyfill/
HTML5 EventSource的用法
diaohuyi6830的博客
09-02 109
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>获取服务端更新数据</h1> <div id="result"&gt...
EventSource之重连特性 学习
最新发布
qq_44327851的博客
05-08 2185
需要注意的是，retry 字段是可选的，如果不设置 retry 字段，浏览器会使用默认的重新连接时间间隔。因此当在 onerror 事件处理程序中编写重连逻辑时，可能会导致浏览器和服务器之间的 EventSource 连接频繁断开和重连，从而在网络面板中出现大量的 SSE 连接。下面的示例中，我们将 eventSource 对象的 retry 字段设置为 3000，表示在连接中断后，浏览器会每隔 5 秒尝试重新连接服务器一次。当连接中断后，浏览器会根据 retry 字段的值来确定重新连接的时间间隔。
EventSource前端使用（需要添加header等自定义配置）
热门推荐
微灬墨的博客
04-22 2万+
一、原生EventSource （一）定义： MDN详解:Web API 接口参考>EventSource （二）使用方式： const eventSource = new EventSource('/api/test'); // 正常的EventSource，我们只关心以下三个事件 /* * open：订阅成功（和后端连接成功） */ eventSource.addEventListener("open", function(e) { console.log('ope
EventSource学习
qq_27561019的博客
06-14 5276
本文主要介绍了EventSource的基本概念、具体应用场景、优缺点以及使用方法。尽管EventSource在某些场景下可能存在一定的局限性，但它仍然是一种非常强大的前端Web API，能够实现实时、低延迟的数据传输，具备很好的兼容性和易用性。在实际应用中，需要针对具体的场景进行合理使用，从而发挥最大的效果。
Html5实践之EventSource
u014712365的博客
01-12 598
最近尝试了一下服务器端的推送，之前的做法都是客户端轮询，定时向服务器发送请求。但这造成了我的一些困扰： 1：轮询是由客户端发起的，那么在服务端就不能判别我要推送的内容是否已经过期，因为我很难判断某个信息是否已经推送给全部的客户端，那么服务端就需要缓存大量的数据。如果数据保存在数据库，那么还要每次请求都需要查询数据库，这对数据库和系统设计都是一个很大的挑战。 2：请求的频率太高，每次的请求包中含有...
eventsource:用于EventSource浏览器API的Rust客户端
05-19
EventSource是一个Rust库，用于从服务器发送的事件端点读取。 它透明地发送HTTP请求，并且仅向用户公开事件流。 它处理text/event-stream数据格式的自动重新连接和解析。 例子 use eventsource :: reqwest :: ...
eventsource-polyfill.js
08-28
为IE浏览器添加EventSource兼容性支持。为IE浏览器添加EventSource兼容性支持。
golang-eventsource
06-13
事件源示例服务器。 /update_stream客户端向/stream发出GET请求以打开事件源连接，然后向/update_stream发送POST请求以将事件发送到所有连接的客户端。 执照 版权所有 (c) 2014 Stuart Nelson 麻省理工学院执照 ...
EventSource:http的polyfill
04-01
只需在页面中包含src/eventsource.js或src/eventsource.min.js即可使用src/eventsource.min.js 。 Ionic2 / Angular2安装： 除非为此Polyfill创建了打字稿定义文件，否则您将在Ionic2项目中使用它。 从理论上讲，它...
rn-eventsource:在React Native的底层网络API之上构建的EventSource实现
05-17
如今有几种EventSource多边形填充，但是它们都不满足以下三个目标： 不要依赖Node.js标准库React Native不支持Node.js标准库。 不要依赖本机模块这使得使用基于Expo的简单应用变得更加困难。 不要用...
前端长链接EventSource
猿小龙
10-16 1208
EventSource： 单向长链接。 webSocket：双向长链接。 ps：服务器重启的话。就会断开需要重连做个呼吸重连就好。
前端实现实时数据更新：EventSource
weixin_41897680的博客
06-25 1687
前端实现实时数据更新：EventSource
2. 使用EventSource跟踪
singhwong
07-27 996
利用跟踪功能可以从正在运行的应用程序中查看消息。为了获得关于正在运行的应用程序的信息，可以在调试器中启动应用程序。在调试过程中，可以单步执行应用程序，在特定的代码行上设置断点，在满足某些条件时设置断点。调试的问题是包含发布代码的程序与包含调试代码的程序以不同的方式运行。例如，程序在断点处停止运行时，应用程序的其他线程也会挂起。另外，在发布版本中，编译器生成的输出进行了优化，因此会产生不同的效果。在经过优化的发布代码中垃圾收集器比在调试代码中更加积极。方法内的调用次序可能发生变化，甚至一些方法会被彻底删除，改
【前端技术】EventSource vs WebSocket
俊刚的博客
12-23 1672
在当今数字化时代，Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序，就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术，以及各种框架、库和工具。在本专栏中，我们将深入学习前端技术的各个方面。我们将学习如何使用HTML构建语义化的网页结构，如何使用CSS进行样式设计和布局，以及如何使用JavaScript实现交互功能和动态效果。此外，我们还将介绍各种流行的前端框架和库，并学习如何使用它们来提高开发效率和用户体验。
EventSource的原理和使用——结合eladmin实现实时聊天的小例子
kandan_cc的博客
02-29 829
在客户端，通过 EventSource 对象注册事件处理函数，以接收来自服务器的事件数据。当客户端接收到来自服务器的事件数据时，它将创建一个 Event 对象，并触发相应的事件处理函数，传递 Event 对象作为参数。因为 WebSocket 是双向通信，数据传输的效率更高，而 EventSource 由于是单向通信，数据传输的速度会稍慢一些。协议 EventSource 基于 HTTP 协议，使用的是 HTTP 的长连接机制，而 WebSocket 则是一种独立的协议，与 HTTP 没有关系。
html5 eventsource,HTML5—EventSource服务端推送事件
weixin_39683858的博客
06-23 260
初始化事件源，指定一个接受事件的URL：var evtSource = new EventSource("/sendMessage");监听消息：//收到服务器发生的事件时触发evtSource.onmessage = function (e) {console.log(e.data);}//成功与服务器发生连接时触发evtSource.onopen = function () {console....
HTML5中使用EventSource实现服务器发送事件
diejiankuai3444的博客
05-27 622
在HTML5的服务器发送事件中，使用EventSource对象可以接收服务器发送事件的通知。 示例： es.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值