轮询是一种在客户端和服务器之间进行通信的技术，主要用于从服务器获取实时更新数据。根据轮询的机制，可以分为短轮询和长轮询。 ## 短轮询短轮询是一种简单的轮询方式，客户端以固定的时间间隔向服务器发送请求，不论服务器是否有数据更新。 ```javascript import axios from 'axios'; function shortPolling() { setInterval(() => { axios.get('/api/data') .then(response => { console.log('短轮询数据:', response.data); // 处理数据 }) .catch(error => { console.error('短轮询错误:', error); }); }, 5000); // 每5秒请求一次 } shortPolling(); ``` 适用场景：适合实时性要求不高、需要控制服务器负载的场景。 ## 长轮询长轮询是一种更加高效的轮询方式。客户端发送请求后，服务器会保持请求开放，直到有新数据可发送或达到超时时间。 ```javascript import axios from 'axios'; function longPolling() { function poll() { axios.get('/api/data', { timeout: 60000 // 设置长时间的超时时间 }) .then(response => { console.log('长轮询数据:', response.data); // 处理数据 poll(); // 数据处理完毕后，再次发起长轮询请求 }) .catch(error => { if (axios.isCancel(error)) { console.log('长轮询被取消:', error.message); } else { console.error('长轮询错误:', error); } setTimeout(poll, 5000); // 发生错误后，等待5秒再次发起请求 }); } poll(); } longPolling(); ``` 适用场景：适合需要较高实时性、减少请求次数的场景。
短轮询和长轮询相比，都不如 WebSocket 和 Server-Sent Events（SSE）在实时性和效率上表现好。 ## WebSocket 和 SSE 通信过程 #### WebSocket * 客户端发起握手：客户端向服务器发送一个特殊的 HTTP 请求，请求中包含 Upgrade: websocket 和 Connection: Upgrade 头部字段，表明客户端希望将通信协议从 HTTP 升级到 WebSocket。 * 服务器响应握手：如果服务器支持 WebSocket，则会返回一个 HTTP 响应，状态码为 101，同时携带相应的头部字段 Upgrade: websocket 和 Connection: Upgrade，确认协议切换。 * 数据传输：握手成功后，客户端和服务器可以直接交换文本和二进制数据，不需要像传统的 HTTP 请求那样每次交互都需要发起一个新的请求。 * 关闭连接：任何一方可以通过发送一个关闭帧来发起关闭连接的握手，该帧包含关闭的原因和状态码。 #### SSE SSE 是一种轻量级的协议，允许服务器向客户端推送实时数据。适用于如下场景： * 私信通知 * 股票行情更新 * 新闻订阅而基于 HTTP 协议的 Server Send Event 通信过程： 1. **客户端请求**：通过普通的HTTP GET请求，并在头部包含 Accept: text/event-stream。 2. **服务器响应**：保持连接打开，设置响应 Content-Type: text/event-stream，开始发送数据，可以多次发送。 3. **发送消息**：服务器按照 SSE 的格式发送消息，每条消息通常包含一个事件类型（event）、数据（data）和一个可选的 id。消息以两个换行符 \n\n 结尾。例如 data: 第一条消息内容\n\n 或者，如果一条消息包含多行数据，它会这样发送： data: first line\n data: second line\n\n 如果指定了事件类型和 id，它们将作为消息的一部分被发送： id: 1 event: myMessage data: 第二条消息内容\n\n 4. **客户端处理**：在 JS 中，通过创建一个 EventSource 对象并监听它的 onmessage 事件。如果服务器指定了事件类型，例如上面指定了 myMessage，客户端需要监听 myMessage 事件类型以收到数据。 5. **保持连接**：如果连接断开，客户端会尝试重新连接。如果服务器提供了 id，客户端会在重连时发送 Last-Event-ID 头部，以便服务器从正确的数据点继续发送。 6. **关闭连接**：客户端可以调用 EventSource 对象的 close() 方法关闭连接。服务器也可以通过发送特定消息指示关闭。 CI/CD 平台的实时日志打印，ChatGPT 的分段加载回答，通常基于 SSE 实现。
SSE 通常用于传输文本数据，不推荐用于传输大量二进制数据。 ## Nest 实现 SSE 接口我们实现一下，创建 nest 项目： ```bash npx nest new sse-project ``` 运行： ```bash npm run start:dev ``` 在 AppController 添加一个 stream 接口：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c6b3992d2644a8788f12a1143874a28~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1152\&h=882\&s=113889\&e=png\&b=2b2b2b)
使用 `@Sse()` 装饰器来标记为 SSE 端点。
返回的是一个 Observable 对象，然后内部用 observer.next 返回消息。
sse1 我们先返回了 'hello'，三秒后返回了 'world'。我们支持下跨域：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fef56973566b4acda8d6dfdfa96e0c60~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1034\&h=368\&s=47604\&e=png\&b=2b2b2b) ## React 接收 SSE 接口数据写一个前端页面，创建 react 项目： ```bash npx create-react-app --template=typescript sse-project-frontend ``` 在 App.tsx 里写如下代码：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c48c1c7386b44c858c1007a5145b1a43~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1508\&h=1138\&s=191865\&e=png\&b=2b2b2b)
通过 new EventSource 这个原生 API，监听上面的 onmessage 回调函数，获取 sse 接口的响应。将渲染 App 外层的严格模式注释，它会导致多余的渲染。
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e457c2f8bab487a8a86193fe224f9cf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=480\&h=246\&s=22860\&e=png\&b=2c2c2c)
执行 npm run start。因为 3000 端口被 nest 应用占用了，react 应用跑在 3001 端口。
点击 event1 按钮：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab1e46f4dfa04bc1bfb0dccb008b9bef~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=564\&h=270\&s=18519\&e=png\&b=fafafa)
控制台先打印 'hello'，三秒后打印 'world'，我们可以取里面的 data 属性拿到最终数据：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fa10bc80f6d4eac8213b4f2cee39c9c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2350\&h=120\&s=75393\&e=png\&b=fffefe) 点击 even2 按钮：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7adffc71b42440f0b147922f53fd078c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=546\&h=246\&s=16279\&e=png\&b=fafafa)
控制台不断打印：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ff48f3b79ce4b9e91802da94985984c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2346\&h=336\&s=160010\&e=png\&b=ffffff)
表明我们不断收到服务端推送的数据。响应的 Content-Type 是 text/event-stream：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03992b7e32194004932d46f501b796e2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1424\&h=394\&s=66690\&e=png\&b=fdfdfd)
然后在 EventStream 可以看到每次收到的消息：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99c7d829afa54afb8929d9698c140570~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2166\&h=460\&s=131905\&e=png\&b=f5f8fd) ## SSE 日志实时推送 `tail -f` 命令可以实时看到文件的最新内容：
我们可以通过 child\_process 模块的 exec 来执行这个命令，监听 log 文件改动，返回给客户端改动内容：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63a969cadcfb4cd0ab4132e5e8bdd253~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1226\&h=522\&s=81344\&e=png\&b=2b2b2b)
./log 指的是当前工作目录下名为 log 的文件。在这里，. 表示当前工作目录。
可以输入 `node` 然后再输入 `process.cwd()` 来查看当前的工作目录。
前端连接这个新接口：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e48dc8c3d6424deabc2510b9ba647350~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1488\&h=362\&s=60448\&e=png\&b=2b2b2b)
输入 111 保存，再输入 222 保存：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/160ceea3c3db4d12b9f1d180d48020ef~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=274\&h=154\&s=8103\&e=png\&b=2c2c2c)
控制台打印两条信息：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6d61c188ef14ae9b362f63b01677dc2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2346\&h=96\&s=73380\&e=png\&b=fefdfd)
浏览器收到了实时的日志，可以对 data 属性值进行 `JSON.parse()`。
很多构建日志都是通过 SSE 的方式实时推送的。