# 第一集：SSE 与 WebSocket 通信演示补充包

这份源码复现视频里教师提前打开的“通信演示页”。你可以先观看比较，也可以按本页在自己电脑上试按钮。第一集先观察通信怎样发生；后续课程再逐步编写和解释这些接口。

它与“第一集-商品演示体验包-r01.zip”是两份独立资料。商品服务使用8004，本补充包使用8005。不要清空商品数据库，也不需要重新初始化商品包。本补充包没有数据库、没有初始化命令。

## 1. 下载、解压，在正确目录打开终端

1. 下载“第一集-通信演示补充包-r01.zip”，右键压缩包选择“全部解压缩”，选一个容易找到的文件夹。不能在压缩包预览里运行。
2. 打开解压后的“第一集-通信演示”文件夹。这一层应能看到 communication_api.py、demo.html、requirements.txt、constraints.txt 和本说明。
3. 在【文件夹窗口顶部地址栏】输入 powershell，按回车。这里不是浏览器网址栏。新窗口用于输入下面的命令。
4. 先输入 Get-ChildItem 并回车，核对文件名。自己的解压位置可以不同，不必照抄教师的用户名或补录路径。

下面每一行都是独立命令；复制一行到PowerShell，按回车，成功后再做下一行。

## 2. 第一次：准备 Python 和依赖

适用环境：Windows、Python 3.11。第一集商品包已说明如何安装Python；这里沿用同样的3.11版本，不需要换一套Python。

py -3.11 --version

看到 Python 3.11.x 后继续，x是实际补丁版本。如果提示找不到 py 或没有3.11，先按Python官方安装程序安装3.11及Python启动器，再重新打开PowerShell；不要把报错当成成功。

py -3.11 -m venv .venv
.\.venv\Scripts\python.exe --version

.venv是这个目录的独立环境。创建命令通常没有成功文字，正常结束会回到 PS ...> 提示符；下一行应返回 Python 3.11.x。以后都直接使用环境里的解释器，不用激活环境，也不用更改PowerShell执行策略。

.\.venv\Scripts\python.exe -m pip install -r requirements.txt -c constraints.txt
.\.venv\Scripts\python.exe -m pip check

安装需要联网。-r指定依赖清单，-c指定这一轮验证过的版本约束。等安装结束、没有错误并回到提示符后，再执行pip check。看到 No broken requirements found.，表示没有检测到依赖冲突。安装失败时停在当前步，保留完整命令、报错、当前目录和Python版本，可以请AI协助排查，不要反复删改环境或清空其他课程数据。

教师电脑可能通过带发行方名称的启动器选择3.11；本说明给普通Python安装的学习者使用 py -3.11。两者都是选择Python 3.11，教师本机的长名称不需要照抄。

## 3. 启动，再访问页面

仍在“第一集-通信演示”目录执行这一整行：

.\.venv\Scripts\python.exe -m uvicorn communication_api:app --host 127.0.0.1 --port 8005 --no-use-colors

看到 Application startup complete.，并核对日志地址是 http://127.0.0.1:8005，表示服务已经启动。communication_api:app指向这个文件里的应用对象。此时窗口持续运行、没有回到普通提示符是正常的；保持窗口打开。

打开Chrome或Edge，按 Ctrl+L 选中【浏览器最上方的网址栏】，输入下面完整网址，再按回车：

http://127.0.0.1:8005/demo

127.0.0.1表示当前这台电脑自己，8005是本补充服务的端口，/demo是带按钮的演示页。不要在浏览器输入Python命令，也不要在PowerShell里把这个网址当作命令。没有先启动服务，就打不开这个页面；在自己的电脑输入此地址不会访问教师的电脑。

如果8005被占用，先查清占用来源，不结束不认识的进程。可以将启动命令中的端口改成一个确认空闲的端口，例如8006，并在浏览器地址中同步改为8006；两处必须一致。商品服务的8004无需修改。

## 4. SSE：只点一次，观察四条文字到达

在本页找到“2. SSE：服务器持续单向推送”，点击“开始 AI 分析动画”一次。点击才开始请求，停留在页面不会自动开始。

观察四行依次出现：

↓ 开始分析
↓ 午饭支出较高
↓ 交通支出保持稳定
↓ 分析完成

本示例每条间隔约半秒，实际显示受调度和网络影响。服务返回四条预设事件；页面收到第4条后调用 source.close()，停止这条EventSource接入，不会自动无限重连。这里展示到达顺序，不代表真实分析了账本或调用了AI。

## 5. WebSocket：先建连接，再发送两次

1. 找到“3. WebSocket：同一连接双向通信”，先点“建立连接”。下方出现“连接成功”后再继续。
2. 输入框里已有“你好，服务端”，点击“发送消息”。核对下方出现：

→ 你好，服务端
← 服务器实时回复：你好，服务端

3. 不要再点建立连接。点击输入框，把内容改成“谢谢”，再点“发送消息”。同一区域应继续追加：

→ 谢谢
← 服务器实时回复：谢谢

这证明一个已建立的连接能连续发送并收到回声。教师影片当前只展示一次默认消息回声，第二条是你在自己电脑上的扩展观察；它仍然不是两个人聊天，也没有聊天室、参与者管理或广播实现。若未连接就点击发送，页面会提醒先建立连接。

## 6. 下次打开与停止

首次安装成功后，下次进入同一目录、打开PowerShell，直接执行上面的Uvicorn启动命令，再访问 /demo，无需重装、无需初始化。

结束学习时，在【运行这个补充服务的PowerShell窗口】按一次 Ctrl+C，等退出日志和 PS ...> 提示符出现后再关闭窗口。不要在仍需使用的商品服务窗口停止8004。

## 7. 可选：运行网络自检

进入本包目录，执行：

.\.venv\Scripts\python.exe verify_demo.py

自检会在系统分配的临时本机端口启动自己的服务，检查页面200、SSE四条事件、同一WebSocket中的两条回声，然后结束它自己创建的进程。它不会占用8004或8005，不会创建或读取数据库。通过时JSON会包含 passed: true、self_owned_server_stopped: true；失败时保留报错，不把它当作视频中的真实点击。

verify_demo.py检查真实网络；浏览器收到第4条后关闭的行为来自demo.html中的 if (++n === 4) source.close()。网络验证、JavaScript关闭逻辑验证与浏览器人工观察分别记录，不能混为一项。
