什么是事件源(EventSource)

我个人的理解是响应内容中的一种, 就好像我们常见的 content-type 为 application/json 那样, 只不过这个的 content-type 为 text/event-stream , 同时它和 WebSocket 有些类似, 都是长连接, 关闭页面连接会断开, 或者可以主动关闭连接, 但又有一点不同: WebSocket 是双向的, 而这个是单向的, 详细的解释参考这篇文章: EventSource
网页一侧使用 EventSource api 来监听服务端发送的事件:
const evtSource = new EventSource("ssedemo.php");
参数就是服务端生成这个事件的URL, 同时还支持第二个可选参数, 比如跨域的凭证相关配置:
const evtSource = new EventSource(
  "ssedemo.php",
    withCredentials: true
创建了EventSource示例之后就可以用它来监听服务端发送过来的事件啦:
evtSource.onmessage = function(event) {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");
  newElement.textContent = "message: " + event.data;
  eventList.appendChild(newElement);
evtSource.addEventListener("ping", function(event) {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");
  const time = JSON.parse(event.data).time;
  newElement.textContent = "ping at " + time;
  eventList.appendChild(newElement);
可以看到这里有两段监听的代码, 它们的区别在于: 第一段没有监听具体的事件名称, 而第二段监听了一个叫ping的事件, 这取决于服务端发送事件的时候是否添加event字段, 没有添加则需要使用第一个监听方式, 添加了event字段为ping, 那么我们才能监听叫ping的事件, 而当服务端没有设置event字段的时候, 它会有一个默认的值, 叫message
关于事件的名称字段, mdn文档中说的是event, 而我自己尝试之后发现是type, 可能是这个EventSource的规范后来改过, 而文档是之前的了
服务端发送事件的时候需要留意这么几点:
设置content-type为text/event-stream
每条通知以文本形式发送并且以一对换行符结尾
发送的内容符合事件流(EventStream)的格式要求
一个可参考的示例代码如下:
date_default_timezone_set("America/New_York");
header("Cache-Control: no-store");
header("Content-Type: text/event-stream");
$counter = rand(1, 10);
while (true) {
  // Every second, send a "ping" event.
  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";
  // Send a simple message at random intervals.
  $counter--;
  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  ob_end_flush();
  flush();
  // Break the loop if the client aborted the connection (closed the page)
  if ( connection_aborted() ) break;
  sleep(1);
上面这段代码会每秒生成一个事件, 以及这个事件的event字段为ping, 而且每个事件的data字段都是JSON, 同时这个JSON还包含与事件生成时间相对应的ISO 8601时间戳, 还有就是这段代码在随机的时间间隔内还会发送一个不带event字段的简单消息. 最后, 这个循环将一直运行, 不受连接状态的影响, 因此包含了一个检查, 如果连接关闭(比如客户端关闭页面), 那么这个循环就会终止, 也就是此时将不再生成事件
上方客户端和服务端的示例代码来自于mdn: Using server-sent events, 详情可以点击查看
亲自试一试
了解了概念和基本的用法之后, 接下来我打算亲自尝试一下, 而上一次尝试WebSocket的时候我使用的是EggJS, 这回我打算看看NestJS, 这是最近这几年比较火的NodeJS框架, 同时也是我司数据中台的后端小伙伴使用的技术栈, 而在我看它文档的时候, 我发现了NestJS的gitbub中有一个sse的例子, 这里我也贴一下示例中的代码吧, 这样阅读起来也更方便, 包含配置和目录结构的完整示例代码可以点击这个链接查看: nestjs sse sample
app.controller.ts:
import { Controller, Get, MessageEvent, Res, Sse } from '@nestjs/common';
import { Response } from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Controller()
export class AppController {
  @Get()
  index(@Res() response: Response) {
    response
      .type('text/html')
      .send(readFileSync(join(__dirname, 'index.html')).toString());
  @Sse('sse')
  sse(): Observable<MessageEvent> {
    return interval(1000).pipe(
      map((_) => ({ data: { hello: 'world' } } as MessageEvent)),
app.module.ts:
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
@Module({
  imports: [],
  controllers: [AppController],
  providers: [],
export class AppModule {}
main.ts:
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log(`Application is running on: ${await app.getUrl()}`);
bootstrap();
html:
<script type="text/javascript">
  const eventSource = new EventSource('/sse');
  eventSource.onmessage = ({ data }) => {
    const message = document.createElement('li');
    message.innerText = 'New message: ' + data;
    document.body.appendChild(message);
</script>
核心的代码在app.controller.ts中: http://localhost:3000返回一个html文件, http://localhost:3000/sse则是我们服务端发送事件的服务, 这个服务1秒发一次, 只有data字段, 而没有event字段(实际应该是type字段), 这里我修改一下, 实际应用中前端和后端项目一般不会部署到同一个域下, 那么这里就需要做个跨域的配置, 以及不用服务端返回html文件, 前后端分离, 前端项目前端维护, 后端只需要发送事件过来即可, 综上, 修改之后代码如下:
app.controller.ts:
import { Controller, MessageEvent, Sse, Header } from '@nestjs/common';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Controller()
export class AppController {
  @Sse('sse')
  @Header('Access-Control-Allow-Origin', 'http://localhost:9090')
  sse(): Observable<MessageEvent> {
    return interval(1000).pipe(
      map((_) => ({
        data: { hello: 'world' }
      } as MessageEvent)),
sse.html:
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sse</title>
</head>
  <script>
    const evtSource = new EventSource('http://localhost:3000/sse');
    evtSource.addEventListener('message', e => {
      const { data } = e;
      console.log(data);
    setTimeout(
      () => {
        evtSource.close();
  </script>
</body>
</html>
这段代码是能正常运行的, 服务端发送事件, 客户端监听这个事件并打印data, 然后5秒之后关闭连接
在没有指定type字段的时候默认是message, 所以客户端监听的是叫message的事件, 而当指定type字段的时候, 客户端监听的事件名称就要和type字段一样了:
app.controller.ts:
import { Controller, MessageEvent, Sse, Header } from '@nestjs/common';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Controller()
export class AppController {
  @Sse('sse')
  @Header('Access-Control-Allow-Origin', 'http://localhost:9090')
  sse(): Observable<MessageEvent> {
    return interval(1000).pipe(
      map((_) => ({
        type: 'sse', //这里设置了type字段的值
        data: { hello: 'world' }
      } as MessageEvent)),
sse.html:
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sse</title>
</head>
  <script>
    const evtSource = new EventSource('http://localhost:3000/sse');
    //监听的事件名修改为和type字段一样的值: sse
    evtSource.addEventListener('sse', e => {
      const { data } = e;
      console.log(data);
    setTimeout(
      () => {
        evtSource.close();
  </script>
</body>
</html>
我也是第一次接触nestjs, 第一次用它来写demo, 以前接触过一点java, 看了nestjs后发现它的写法有点像java, 但对于nestjs也只是浅尝辄止, 更深入的用法还要再花时间学习和练习
而关于本文的主题sse, 坦白说我并没有能够想到一些实际的使用场景, 服务端向客户端发送消息, 使用常见的application/json形式的数据传输是非常常见通用的一个做法, 而且EventSource还是一个长连接, 如果客户端不手动关闭, 连接则会一直占用资源, 如果遇到客户端需要给服务端回传数据, 那么还是需要用我们常见的诸如application/json这样形式的请求来完成, 这样一看的话EventSource就显得有些鸡肋了
但mdn文档中有这样一句话给我了更多的思考:
Unlike WebSockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). That makes them an excellent choice when there's no need to send data from the client to the server in message form. For example, EventSource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mechanism like IndexedDB or web storage.
和WebSocket不同, sse是单向的, 也就是说, 数据信息是单向传递的, 方向是从服务端到客户端(比如从服务端到用户的网页浏览器). 在不需要以消息的形式从客户端向服务端发送数据的时候sse是一个非常好的选择. 比如处理社交媒体的状态更新, 新闻推送或者将数据发送到客户端, 然后由客户端来存储(例如IndexedDB或者web storage)的时候是很有用的
也就是说sse比较适合做社交媒体的消息推送以及新闻推送等从服务端向客户端发送数据的场景, 确切的说是需要服务端通知客户端实时更新数据的场景, 但我个人在实际工作中暂未遇到, 暂未使用过, 有在项目中用过sse的小伙伴欢迎在评论区分享自己的经验心得
最后, 如果你觉得这篇文章写得还不错, 别忘了给我点个赞, 如果你觉得对你有帮助, 可以点个收藏, 以备不时之需
参考文献:
EventSource
Using server-sent events
    _音魂不散_
        前端开发工程师
       粉丝
 
  目录
 收起
 
 
      什么是事件源(EventSource)
      亲自试一试
    
 
  相关推荐
 垃圾回收机制的理解
  51阅读
  · 
 3点赞一分钟早读系列：推演vue3响应式（二）effect进阶篇
  114阅读
  · 
 0点赞在Next.js 13中实现动态站点地图：使用Pages目录或App目录
  108阅读
  · 
 1点赞写 Vue 我建议非必要别用 watch
  5.9k阅读
  · 
 21点赞拥有这样一个网站，真是太酷了！
  1.5k阅读
  · 
 24点赞
 
    友情链接：