嘿，老铁，今天咱们聊聊网络里的一个小明星——WebSocket。别kan名字长，实际用起来跟打个 WebSocket是什么？

简单说：它是浏览器跟服务器之间的持久双向通道。你只要一开一次连接，以后就Neng随时互相塞消息，省得每次dou跑来跑去请求。

与HTTP不同，HTTP是单向的“你来我往”，而WebSocket是全双工的“你说我听，你说我回”。这点对实时游戏、聊天和股票行情刷新的场景特别友好。

握手流程

握手其实还是用HTTP发起，只不过加了几个头：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13

服务器收到后Ru果同意，就返回：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc...k=

那Sec-WebSocket-Accept怎么算？哈，就是把你发来的Key跟一个魔法字符串拼起来 SHA1 后再 Base64 编码。

数据帧格式

WebSocket 的消息是按帧传输的，每帧头部只有几位，比 HTTP 的头部轻多了：

FIN: 这是不是Zui后一帧？

Opcode: 说明这帧是文本、二进制还是控制指令。

Mask: 客户端到服务器一定要掩码。

Payload Len: 数据长度。

所以即使你往里塞十几兆，也不会像 HTTP 那样被拆成太多包。只要保持连接，就Neng随时推送新数据。

为什么选择WebSocket？

优点：

低延迟：一次握手后直接双向推送，无需每次dou走三次网络往返。

高效：帧头极小，带宽占用少；不需要每条消息dou带大量 HTTP Header。

实时：服务器Ke以主动推送，客户端也Neng主动发消息；适合聊天室、在线游戏、股票行情等场景。

兼容性好：大多数现代浏览器支持；在旧版 IE 中只Neng通过 polyfill 或者 Fallback 实现。

缺点：

SSE 和长轮询相比，配置稍微麻烦一点；需要处理心跳、重连逻辑。

If server has many concurrent connections, memory overhead climbs，因为每个连接dou有 TCP 套接字和 WebSocket 对象。

A bit tricky when behind certain proxies that don't forward Upgrade headers.

SSE 与长轮询对比

SSE 是单向推送，仅支持文本流。它的实现hen简单，只需在响应头里加 `Content-Type: text/event-stream` 就行。缺点是客户端无法主动给服务器发信息，要想Zuo交互就得另起请求或使用 WebSocket.

SSE> 长轮询> 短轮询.

Hello World – 一个Zui简易的示例

// 客户端
const ws = new WebSocket;
ws.onopen =  => {
    console.log;
    ws.send);
};
ws.onmessage = e => {
    const msg = JSON.parse;
    console.log;
};
ws.onerror = err => console.error;
ws.onclose = e => console.log;

// 服务端
const express = require;
const http = require;
const { Server } = require; // 简化实现
const app = express;
const server = http.createServer;
const io = new Server;
io.on('connection', socket => {
    console.log;
    socket.on);
    // 每秒广播一次时间戳
    setInterval => {
        socket.emit.toISOString});
    }, 1000);
    socket.on => console.log);
});
server.listen => console.log); 

心跳机制怎么Zuo？哈哈，这玩意儿挺重要的！

PING/PONG 是 WebSocket 内置的心跳指令。你Ke以让客户端定时发送 'ping' 文本，服务端收到后回复 'pong' 或者直接发送 Ping 帧。若超过一定时间没有收到回应，就断开连接，让重连机制生效。

// 客户端示例
setInterval => {
    if  ws.send);
}, 30000); // 每30秒 ping 一下
// 服务端示例
ws.onmessage = msg => {
    if  ws.send);
}; 

Nginx 或其他代理如何转发?

Nginx 默认不识别 `Upgrade` 标志，需要在配置里显式开启：

location /chat/ {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

TIPS & 常见坑洞

跨域问题：`Origin` header 会被检查，前端需要和后端同源或者后台配置允许跨域。不要忘记了！😅

MIME type 问题：`text/event-stream` 要配正确，否则 SSE 会被浏览器忽略。

Brotli/Deflate 压缩会导致乱码：`Accept-Encoding` 要禁掉压缩或在代码里解压再处理，否则二进制帧会破坏。可改成 `gzip_off on;` 或者直接不压缩 WebSocket 数据流。

No Keep-Alive on client side:`fetch` 自动关闭连接，所以长轮询Zui好使用 `XMLHttpRequest` 或者 keep-alive 参数；Ru果你想用 fetch，一定要显式设置 `cache: 'no-store'` 并且在响应里加上 `Connection: keep-alive` 。哎呀，kan着挺多细节呢~.

Cors 在 Chrome 上hen严格：`Access-Control-Allow-Origin:*` Neng解决大多数跨域，但Ru果想限制来源，用具体域名geng安全，也geng靠谱。😜

一下吧！😄

- WebSockets 用一次握手建立持久连接，再全双工传输数据;

- 用于需要低延迟、高频率交互的应用，如聊天、游戏、实时监控;

- 与 SSE 相比，它Neng双向推送，但配置稍微复杂一些;

- 心跳 Ping/Pong Ke以保证连接活跃；若无响应即断开并重连;

- 配置代理时别忘记 `Upgrade`, `Connection`; 别忘了 CORS 和压缩细节;

Ru果还有什么疑问，Ke以继续问，我可没事儿说完呢 😁！祝编码愉快~!

---