WebSocket及Server Send Event 推送数据

Myth丶恋晨 2024-02-21 06:56 14阅读 0赞

提到推送数据，大家可能会首先想到 WebSocket。

确实，WebSocket 能双向通信，自然也能做服务器到浏览器的消息推送。

但如果只是单向推送消息的话，HTTP 就有这种功能，它就是 Server Send Event。

WebSocket 的通信过程是这样的：

![图片][eb51fe6a339ba1f17e1d6c069281db4e.png]

首先通过 http 切换协议，服务端返回 101 的状态码后，就代表协议切换成功。

之后就是 WebSocket 格式数据的通信了，一方可以随时向另一方推送消息。

而 HTTP 的 Server Send Event 是这样的：

![图片][8102e3c41c897c91db63efc31ac3e192.png]

服务端返回的 Content-Type 是 text/event-stream，这是一个流，可以多次返回内容。

Sever Send Event 就是通过这种消息来随时推送数据。

可能你是第一次听说 SSE，但你肯定用过基于它的应用。

比如你用的 CICD 平台，它的日志是实时打印的。

那它是如何实时传输构建日志的呢？

明显需要一段一段的传输，这种一般就是用 SSE 来推送数据。

再比如说 ChatGPT，它回答一个问题不是一次性给你全部的，而是一部分一部分的加载回答。

这也是基于 SSE。

![图片][7259d84293305187fb372482946fb197.gif]

![图片][eaf688edf2d9bfbabce3e6dc14bfa8bf.png]

知道了什么是 SSE 以及它的应用，我们来自己实现一下吧：

创建 nest 项目：

npx nest new sse-test

![图片][ad7c30ea2d4ca84ab65f2f341b533ba2.png]

把它跑起来：

npm run start:dev

![图片][cf8a087664071ea14f4c57820fd6c4a0.png]

访问 http://localhost:3000 可以看到 hello world，代表服务器跑成功了：

![图片][9e91910b7c137770889f2913d9dba7b2.png]

然后在 AppController 添加一个 stream 接口：

![图片][97e9da359069855d96a93c5b2061ac16.png]

这里不是通过 @Get、@Post 等装饰器标识，而是通过 @Sse 标识这是一个 event stream 类型的接口。

@Sse('stream')
    stream() {
        return new Observable((observer) => {
          observer.next({ data: { msg: 'aaa'} });
    
          setTimeout(() => {
            observer.next({ data: { msg: 'bbb'} });
          }, 2000);
    
          setTimeout(() => {
            observer.next({ data: { msg: 'ccc'} });
          }, 5000);
        });
    }

返回的是一个 Observable 对象，然后内部用 observer.next 返回消息。

可以返回任意的 json 数据。

我们先返回了一个 aaa、过了 2s 返回了 bbb，过了 5s 返回了 ccc。

然后写个前端页面：

创建一个 react 项目：

npx create-react-app --template=typescript sse-test-frontend

![图片][aa62aab3707f1f493924adc910de7e35.png]

在 App.tsx 里写如下代码：

import { useEffect } from 'react';
    
    function App() {
    
      useEffect(() => {
        const eventSource = new EventSource('http://localhost:3000/stream');
        eventSource.onmessage = ({ data }) => {
          console.log('New message', JSON.parse(data));
        };
      }, []);
    
      return (
        <div>hello</div>
      );
    }
    
    export default App;

这个 EventSource 是浏览器原生 api，就是用来获取 sse 接口的响应的，它会把每次消息传入 onmessage 的回调函数。

我们在 nest 服务开启跨域支持：

![图片][071aaf0caaae943ab8ed5ce74e994e69.png]

然后把 react 项目 index.tsx 里这几行代码删掉，它会导致额外的渲染：

![图片][eca55b5cf12ca1438d25ea559a0cfc50.png]

执行 npm run start

因为 3000 端口被占用了，它会跑在 3001：

![图片][3b09e002820ead9d42a2cd42cbfd79de.png]

浏览器访问下：

![图片][9bcafa754550a61dc31132abc1a8c00e.gif]

看到一段段的响应了没？

这就是 Server Send Event。

在 devtools 里可以看到，响应的 Content-Type 是 text/event-stream：

![图片][1c06121de697138ac007d724469edf65.png]

然后在 EventStream 里可以看到每一次收到的消息：

![图片][27ae501d0f39cddb5141bc27b90e967d.png]

这样，服务端就可以随时向网页推送消息了。

那它兼容性怎么样呢？

可以在 MDN 看到：

![图片][0a6a093662b82772a30d3ab13e86680c.png]

除了 ie、edge 外，其他浏览器都没任何兼容问题。

基本是可以放心用的。

那用在哪呢？

一些只需要服务端推送的场景就特别适合 Server Send Event。

比如这个站内信：

![图片][70d9ec3fa3db2e8b83af95689a72047d.png]

这种推送用 WebSocket 就没必要了，可以用 SSE 来做。

那连接断了怎么办呢？

不用担心，浏览器会自动重连。

这点和 WebSocket 不同，WebSocket 如果断开之后是需要手动重连的，而 SSE 不用。

再比如说日志的实时推送。

我们来测试下：

tail -f 命令可以实时看到文件的最新内容：

![图片][87f06eb6b02f5d648c0e27871061f9ac.gif]

我们通过 child\_process 模块的 exec 来执行这个命令，然后监听它的 stdout 输出：

const { exec } = require("child_process");
    
    const childProcess = exec('tail -f ./log');
    
    childProcess.stdout.on('data', (msg) => {
        console.log(msg);
    });

用 node 执行它：

![图片][0a522de1df7197e397fb2bd6a7a1a5f9.gif]

然后添加一个 sse 的接口：

@Sse('stream2')
    stream2() {
    const childProcess = exec('tail -f ./log');
    
    return new Observable((observer) => {
      childProcess.stdout.on('data', (msg) => {
        observer.next({ data: { msg: msg.toString() }});
      })
    });

监听到新的数据之后，把它返回给浏览器。

浏览器连接这个新接口：

![图片][85cf20900566b7ae03f05f5f511aa214.png]

测试下：

![图片][36410d1166ac1425d1456c4bbe1f7da5.gif]

可以看到，浏览器收到了实时的日志。

很多构建日志都是通过 SSE 的方式实时推送的。

日志之类的只是文本，那如果是二进制数据呢？

二进制数据在 node 里是通过 Buffer 存储的。

const { readFileSync } = require("fs");
    
    const buffer = readFileSync('./package.json');
    
    console.log(buffer);

![图片][1092d845f5cd45bf8f0b626ce29b4668.png]

而 Buffer 有个 toJSON 方法：

![图片][06fada19e0ecf7334dd28073ef8c493c.png]

这样不就可以通过 sse 的接口返回了么？

试一下：

@Sse('stream3')
    stream3() {
        return new Observable((observer) => {
            const json = readFileSync('./package.json').toJSON();
            observer.next({ data: { msg: json }});
        });
    }

![图片][72f89fc783f2a2f4b9045347a77e3ae9.png]

![图片][7f9ba4daef778b78584ecb2bb14ead97.png]

确实可以。

也就是说，基于 sse，除了可以推送文本外，还可以推送任意二进制数据。

### 总结 ###

服务端实时推送数据，除了用 WebSocket 外，还可以用 HTTP 的 Server Send Event。

只要 http 返回 Content-Type 为 text/event-stream 的 header，就可以通过 stream 的方式多次返回消息了。

它传输的是 json 格式的内容，可以用来传输文本或者二进制内容。

我们通过 Nest 实现了 sse 的接口，用 @Sse 装饰器标识方法，然后返回 Observe 对象就可以了。内部可以通过 observer.next 随时返回数据。

前端使用 EventSource 的 onmessage 来接收消息。

这个 api 的兼容性很好，除了 ie 外可以放心的用。

它的应用场景有很多，比如站内信、构建日志实时展示、chatgpt 的消息返回等。

再遇到需要消息推送的场景，不要直接 WebSocket 了，也许 Server Send Event 更合适呢？

[eb51fe6a339ba1f17e1d6c069281db4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/61812df84b3a4f16a9b2e711b819202d.png
[8102e3c41c897c91db63efc31ac3e192.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/4f6964103df043de91f56f0795a7c1ec.png
[7259d84293305187fb372482946fb197.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/1598f6dd6e0c46548ab7cb3eb42401b5.png
[eaf688edf2d9bfbabce3e6dc14bfa8bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/25ece1e7a3054e4a9270b73a974680b4.png
[ad7c30ea2d4ca84ab65f2f341b533ba2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/19e96c863061470c9e4044252d41facb.png
[cf8a087664071ea14f4c57820fd6c4a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/22163eaa31e04a7abfda0b39e9a4a701.png
[9e91910b7c137770889f2913d9dba7b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/9593b54000ce4006932841730bc50f9e.png
[97e9da359069855d96a93c5b2061ac16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/0b6d856106134d449e29d6d92abdbacd.png
[aa62aab3707f1f493924adc910de7e35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/8657522d18fc4fb68728f7c5311976bd.png
[071aaf0caaae943ab8ed5ce74e994e69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/57b6fb209f0044d59f75caa6d244da3a.png
[eca55b5cf12ca1438d25ea559a0cfc50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/59d3b874002143f48779ea39a6208c64.png
[3b09e002820ead9d42a2cd42cbfd79de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/7288df28f21b4ba1baa35277c69650c1.png
[9bcafa754550a61dc31132abc1a8c00e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/fd637eb83b1749e7a6144f58b9f45c79.png
[1c06121de697138ac007d724469edf65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/901d696a62504513b551e4b688fa9a89.png
[27ae501d0f39cddb5141bc27b90e967d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b0d0de4753884375b6ada1a9ac1c163d.png
[0a6a093662b82772a30d3ab13e86680c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/e60bb7b602ba4d3d86cb942290579a73.png
[70d9ec3fa3db2e8b83af95689a72047d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/a49bb05886184780bf2461253ad8429c.png
[87f06eb6b02f5d648c0e27871061f9ac.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b483400a97484836be34d41290445454.png
[0a522de1df7197e397fb2bd6a7a1a5f9.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/0e2a4c4efdfb4327811a4c3852a98795.png
[85cf20900566b7ae03f05f5f511aa214.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/968f6eb01fb94b78baa3ae9a8398c44d.png
[36410d1166ac1425d1456c4bbe1f7da5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/c8f3c4a986a64140a683e29031ed055c.png
[1092d845f5cd45bf8f0b626ce29b4668.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/5cd9194b3e074a66a60f08b77c21121f.png
[06fada19e0ecf7334dd28073ef8c493c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/0051f0d0ac03405c89d7c1ccf56c3447.png
[72f89fc783f2a2f4b9045347a77e3ae9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/7c76aab2dffb49828f9c8004a286b189.png
[7f9ba4daef778b78584ecb2bb14ead97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/5aa67bffcefe46f29fa15070a9b43dbd.png