网站LOGO
白雾茫茫丶
页面加载中
10月12日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息

    谢明伟 · 原创 ·
    前端开发Nest 实战 · TypeScriptNest
    共 3656 字 · 约 3 分钟 · 168

    前言

    假如系统又一个这样的业务场景:已登录的用户发起流程或者发布消息之后,需要弹窗通知其他已登录的用户,我们应该如何实现?

    在设计实时通信场景时,我们面临的主要挑战是如何有效地通知所有已登录的用户有关新流程的启动或新消息的发布。为了实现这一目标,我们需要一个既能高效推送信息又能保证低延迟的技术方案。在评估了 WebSocketServer-Sent Events (SSE) 两种技术之后,我们选择了 SSE) 作为实时通信系统的实现方式。

    尽管 WebSocket 提供了全双工通信的能力,使得客户端和服务器可以在任何时候互相发送数据,但在我们的应用场景中,主要的需求是由服务器向客户端发送更新通知,而客户端不需要向服务器发送相关的数据。因此,我们不需要 WebSocket 提供的全双工特性。

    本篇文章将详细介绍如何在 Nest.js 应用中使用 Server-Sent Events (SSE)

    什么是 Server-Sent Events?

    Server-Sent Events (SSE) 是一种让服务器能够实时地向客户端发送数据的技术。传统的 Web 应用程序都是基于客户端发起请求,服务器响应这一模式的。然而,在某些应用场景下,比如股票行情、聊天应用或实时更新的数据展示等,需要服务器主动向客户端推送信息。

    SSE 提供了一个简单的单向事件流,使得服务器能够在客户端请求保持打开的状态下推送更新。这样做的好处是减少了轮询请求所带来的网络开销,并且能够让客户端即时接收到新的数据更新。

    SSE 优点

    1. 单向通信SSE 默认只支持从服务器到客户端的单向数据传输。
    2. 格式简单SSE 的消息格式非常简单,易于理解和解析。
    3. 持久连接:客户端与服务器之间的连接保持打开状态,直到一方关闭为止。
    4. 断线重连:当连接中断后,客户端可以尝试重新建立连接以继续接收事件。

    @Sse 装饰器

    在需要消息推送的 Controller 方法中使用 @Sse 装饰器

    ts 代码:
    import { Sse } from '@nestjs/common';
    
    @Sse('sse/event')
    sse(): Observable<MessageEvent> {
      return new Observable<any>((observer) => {
        // 监听事件
        this.eventEmitter.on(EVENTBUS_TYPE.MESSAGE_CREATE, (data: Message) => {
          observer.next({ data });
        });
      });
    }

    因为我这里是别的方法执行成功后,才需要向客户端执行消息推送,所以这里使用了 Event Emitter

    客户端实现

    ts 代码:
    onMounted(() => {
      const eventSource = new EventSource(
        "http://localhost:3000/sse/event",
       ;
      eventSource.onmessage = ({ data }) => {
        console.log("New message", JSON.parse(data));
      };
    });

    原生 EventSource 是不支持设置请求等信息的,详情可以查看MDN 文档

    如果你的接口设置了访问权限,比如需要请求头携带 token 才能访问,那么你需要使用别的连接方式,比如:event-source-polyfill

    EventSourcePolyfill

    event-source-polyfillEventSource 封装的一个方法,可以配置请求头

    1. 安装依赖

      powershell 代码:
      pnpm add event-source-polyfill
    2. 示例代码

      ts 代码:
      import { EventSourcePolyfill } from 'event-source-polyfill';
      
      // 创建 EventSource 实例
      const eventSource = new EventSourcePolyfill(`${baseURL}/sse/event`, {
        headers: {
       Authorization: `Bearer ${authStore.token}`,
        },
        heartbeatTimeout: 60 * 60 * 1000, // 这是自定义配置请求超时时间  默认是45000ms
      });
      
      // 接收消息
      eventSource.onmessage = ({ data }:MessageEvent) => {
        console.log("New message", JSON.parse(data));
      };
      
      onBeforeUnmount(() => {
        // 组件卸载前关闭连接
        eventSource.close();
      });

    效果演示

    同时登陆两个用户,其中一个发布消息时,服务器会向所有客户端推送消息:

    浏览器查看接口接收消息:

    总结

    关注我,我们一起领略 Nest.js 的魅力

    GithubVue3-Admin

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 昨天 15:33 在线

    🕛

    本站已运行 2 年 284 天 15 小时 13 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事