最近在复习计算机网络和 LLM 相关技术时我突然意识到一个很有意思的现象：现在的 AI 聊天大多用的是SSE但提到真正的实时互动，还得看WebSocket。不过，

为了搞懂这玩意儿。我手写了一个简易版的聊天室。今天就把我的学习笔记、代码实现。还有那些让人头秃的协议对比，一次性全掏出来！

为什么 HTTP 不适合聊天？

咱们先聊聊背景。作为前端，我们最熟悉的是 HTTP 协议。说起来，

如果你想做一个聊天室。用 HTTP 怎么办，只能靠轮询

 // 每隔 秒问一次服务器：“有新消息吗？有新消息吗，”setInterval => { fetch.n},);

这太蠢了对吧？性能差，延迟高，服务器都要被问烦了。话说回来，

那SSE呢？SSE 适合 LLM 那种“流式输出”，它是单向的。但聊天是双向** 的，我要发，你也要发。

SSE 与 WebSocket：主要区别一览

SSE 的适用场景与特点

• 单向推送**：服务器主动推送数据到客户端。
• sse 协议**：仅限文本。

WebSocket 的优势与使用场景

• *全双工**：双方都可以同时说话，不需要等对方说完。
• *长连接**：一旦建立。除非主动断开，否则一直连着。

📝 主要代码逻辑拆解

步骤一的观点是。搭建舞台

Koa 具备处理 WebSocket 的能力，并准备一个“花名册”来记录所有连进来的使用者。

const Koa = require;const websocket = require;const app = websocket);const clients = new Set;按理说，// 用 Set 保证连接对象唯一性

从步骤二来看。派发请柬

A 普通 HTTP 中间件返回聊天页面页面里会创建 WebSocket 连接。

// 处理普通 HTTP 请求：返回我们的聊天页面
app.use => {
ctx.body = `





{e.preventDefault;sendMessage};>
向左侧按钮发送消息

→向右侧按钮发送消息
→文本框中输入内容后点击此按钮或按下回车键即可发送。
使用者可以在任意两个文本框之间切换。接下来
按回车键，即可将上一条消息复制到当前文本框中。当你在任何位置点击空白处时可以通过快捷键 Shift+Enter 插入换行符。如果想删除整行，请先选中整行，接下来按 Delete 键即可。如果你想快速切换编辑模式，可以使用 Ctrl+Shift+X 键。&rarr，文本框中的内容会被自动保存为文件，而且每次重新打开都会恢复之前的内容。在文本框左侧还会显示文字数量和字符数统计信息。老实说，可以通过右侧的菜单栏选择不同主题进行更改。如果你不想看到提示信息，只需将其关闭即可。请注意，这些操作都是可选的。若不需要可以忽略，若需更多帮助，请参考官方文档：https://github.com/SvelteJS/svelte/blob/main/docs/svelte.md#svelte-v1
或者联系社区支持。* /

`;})，

再看步骤三，建立专线

// 处理 WebSocket 连接
app.ws.use => {
// A 登记
clients.add;console.log，// B 监听收到消息
ctx.websocket.on('message',message => {
// C 广播给所有客户端
for{
client.send);}
})，// D 离场时移除记录
ctx.websocket.on => {
clients.delete;老实说，console.log;})，});其实，app.listen => {
console.log;})，

A张表看懂 HTTP、SSE 与 WebSocket 的区别与适用场景

• SSE :适合 “我不动。你推给我” 场景，如 LLM 打字机效果。
• Websocket :更能满足“你一句我一句”的实时沟通需求。

  @media screen and and {body{display:block;} }

  ​ ​ ​

  ​ ​ ​ ​ javascript // 客户端 setInterval => { // if{ // ws.send);// } // },)，// 每30秒问候一次// 服务端 ws.on => { // const data = JSON.parse;// if{ // ws.send);// 秒回 // }});