小叨：Vibe Coding到底是个啥玩意儿

先说一句，Vibe Coding其实就是一套把AI模型塞进业务的“实战套件”。

咱们这期的目标hen明确——把章鱼哥后端的答案，搬到浏览器里Zuo流式对话。

别慌，先别把我当老师，我就是你那爱啰嗦的老友，跟你聊聊这背后的酸甜苦辣。

说实话，这事儿比想象中要碎碎念好多。

后端准备：从非流式到流式的大转弯

上一次我们Yi经有了/api/chat的普通POST接口。

哈哈，那时候是把整段答案一次性甩回去，调试倒是方便，但用户体验嘛…只Neng算“忍耐”。

于是我们决定加个/api/chat/stream，让答案像水一样一滴滴流出来。

不对不对，应该说是让答案像河流一样“涓涓细流”，这样用户Nengkan到生成过程，而不是盲等十几秒。

后端代码里Zui核心的就是ChatService.stream_chat，它会先发status: retrieving提醒前端正在检索教材，然后再发sourcesstatus: generatingtoken……Zui后一个done收工。

SSE vs WebSocket：我为SSE打call

SSE在这种单向推送场景里特别轻量。

WebSocket虽然酷炫，但我们根本不需要浏览器主动给服务器发消息。

再说了用POST发送问题体geng符合REST语义，SSE本身只支持GET，所以我们用了fetch + ReadableStream来实现POST后读取event stream。

前端魔法：useChatStream Hook 那点事儿

const abortController = new AbortController;fetch('/api/chat/stream', {
  method: 'POST',
  body: JSON.stringify,
  signal: abortController.signal,
});

这个hook负责：

发请求并拿到ReadableStream。

逐块读取文本，把它交给parseSSEEvents

根据事件类型geng新UI状态

用户点停止时直接调用.abort

# 为什么百度不收录？

问： 我写了一个技术博客，内容质量不错，但百度搜索根本抓不到页面咋回事？

A： 大概率是因为页面缺少关键的SEO标签，比如