流式事件源event-stream

Content-Type: text/event-stream 是一种HTTP响应头，用于指示服务器的响应主体是一个流式事件源。这种格式用于服务端向客户端推送实时数据，通常通过WebSockets或长轮询机制来实现数据的实时更新。在服务器向客户端发送数据之后，客户端可以使用JavaScript中的EventSource API订阅这些事件，并在特定时间触发相应的回调函数，以便处理、显示或重用这些数据。
EventSource和Socket都用于在Web应用程序中实现实时数据传输和通信，但它们有不同的目的和使用情境。具体来说：

- EventSource是一种浏览器API，用于从服务器接收单向事件流。它主要用于推送式通信，即服务器向客户端推送新数据，不能向服务器发送数据（如POST）。EventSource适合用于实现Web页面上的实时更新，如基于服务器端发送事件的通知、日志、进度等。
- Socket则是一种更底层的协议，允许客户端和服务器之间进行双向通信。它可以用于任何需要在客户端和服务器之间传递实时数据的场景，如在线游戏、聊天应用程序、视频会议等。Socket通常使用WebSocket协议进行实现。

因此，EventSource和Socket都是用于在Web应用程序中实现实时通信的技术，但它们的应用场景和使用方式不同。

在Vue中读取text/event-stream格式的数据，可以使用浏览器提供的EventSource接口。可以通过创建一个新的EventSource对象并指定要连接的Url，然后监听message事件来获取服务器发送的数据。

以下是一个简单的示例代码：
```
<template>
  <div>
    <ul>
      <li v-for="message in messages">{{ message }}</li>
    </ul>
  </div>
</template>

一个基本的 text/event-stream 的格式如下所示：

``` YAML
event: <event name>
data: <message>
id: <id>

```

其中，第一行表示事件名称，以 "event:" 开始，例如：

``` YAML
event: temperature-update
```

第二行是数据内容，以 "data:" 开始，例如：

``` YAML
data: {"temperature": 25, "humidity": 60}
```

第三行是一个可选项，实现客户端和服务器之间事件幂等性、轮循的循序和客户端重新启动后重新接收的事件，以 "id:" 开头，例如：

``` YAML
id: 1234
```

整个事件数据以两个回车符 "\r\n\r\n" 结束。每个事件之间通过两个回车符 "\r\n\r\n" 分隔。

在客户端发送的请求消息头中可以包含 Last-Event-ID 字段，用于通知服务器最后客户端所接收的数据的事件 ID。这样服务端就可以根据这个信息来实现向客户端重新传送丢失的事件消息等功能。

除了基本的事件流格式，还有其他的参数，比如 retry 和 comment。其中 retry 表示如果客户端在指定的时间内（单位是毫秒）没有收到响应，就重新发起连接。comment 表示一个注解，可以加入任意描述信息等。

一个 text/event-stream 的完整示例如下：

``` YAML
event: server-time
id: 1234
data: {"time": "2022-01-01T01:01:01.000Z"}
retry: 5000

event: user-login
id: 1235
data: {"user": "Peter", "status": "logged-in"}
comment: A user just logged in!

event: reservation-update
id: 1236
data: {"conference-room": "A2", "new-reservation-time": "2022-01-02T09:30:00.000Z"}
```

这里，我们定义了三个事件。第一个事件是表示当前服务器时间，第二个事件是表示一个用户登录系统了，还有一个注释的信息。第三个事件是表示某个会议室的预定信息发生了更改。

每个数据块必须以“data:”开头，并以两个换行符结束。