*/

.screenshot {
  display: block;
  background-color: #d3e0de;
  border-radius: 4px;
  padding: 45px 5px 5px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.screenshot img {
  display: block;
  border-radius: 2px;
}

.screenshot:before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;

[license]: https://www.apache.org/licenses/LICENSE-2.0
[build]: https://ci-maven.apache.org/job/Maven/job/maven-box/job/maven/job/master/
[build-4.0]: https://ci-maven.apache.org/job/Maven/job/maven-box/job/maven/job/maven-4.0.x/
[build-3.10]: https://ci-maven.apache.org/job/Maven/job/maven-box/job/maven/job/maven-3.10.x/
[build-3.9]: https://ci-maven.apache.org/job/Maven/job/maven-box/job/maven/job/maven-3.9.x/

.progress-step.active .step-label {
    color: #0052cc;
    font-weight: 600;
}

.progress-step.completed .step-label {
    color: #00875a;
}

@keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 82, 204, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(0, 82, 204, 0); }
}

.progress-message {
    text-align: center;
    font-size: 0.8125rem;
    color: #0052cc;
    font-weight: 500;
}

```json
{"name": "Plumbus", "description": "A multi-purpose household device."}
{"name": "Portal Gun", "description": "A portal opening device."}
{"name": "Meeseeks Box", "description": "A box that summons a Meeseeks."}
```

```json
{"name": "Plumbus", "description": "A multi-purpose household device."}
{"name": "Portal Gun", "description": "A portal opening device."}
{"name": "Meeseeks Box", "description": "A box that summons a Meeseeks."}
```

```json
{"name": "Plumbus", "description": "A multi-purpose household device."}
{"name": "Portal Gun", "description": "A portal opening device."}
{"name": "Meeseeks Box", "description": "A box that summons a Meeseeks."}
```

```json
{"name": "Plumbus", "description": "A multi-purpose household device."}
{"name": "Portal Gun", "description": "A portal opening device."}
{"name": "Meeseeks Box", "description": "A box that summons a Meeseeks."}
```

{* ../../docs_src/server_sent_events/tutorial005_py310.py hl[14] *}

## Technical Details { #technical-details }

FastAPI implements some SSE best practices out of the box.

```json
{"name": "Plumbus", "description": "A multi-purpose household device."}
{"name": "Portal Gun", "description": "A portal opening device."}
{"name": "Meeseeks Box", "description": "A box that summons a Meeseeks."}
```

```json
{"name": "Plumbus", "description": "A multi-purpose household device."}
{"name": "Portal Gun", "description": "A portal opening device."}
{"name": "Meeseeks Box", "description": "A box that summons a Meeseeks."}
```

它与 JSON 数组（相当于 Python 的 list）非常相似，但不是用 `[]` 包裹、并在各项之间使用 `,` 分隔，而是每行一个 JSON 对象，彼此以换行符分隔。

/// info | 信息

关键在于你的应用可以逐行生成数据，而客户端在消费前面的行。

///

/// note | 技术细节