程序员吧
首页 >编程 >正文

Server-sent events实时获取服务端数据技术详解

2023-02-10 02:30出处/作者：小冰整合编辑：@小冰
这篇文章主要为大家介绍了Server-sent events实时获取服务端数据技术详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

实时获取服务端的数据，大家第一时间想到的是轮询和 WebSocket 两种方案，其实还有一种新方案 Server-sent events 下文简称（SSE）。SSE 中的数据只能由服务端推向客户端

SSE 是基于 http 协议的服务器推送技术，数据只能从服务端到客户端。服务端把序列化后的数据发送给客户端， 整个过程持续不断直至连接关闭

WebSocket vs 轮询 vs SSE

下面是 WebSocket、轮询和 SSE 的功能对比

  • SSE 和轮询使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议
  • SSE 属于轻量级的 WebSocket，使用简单；WebSocket 使用相对复杂，轮询使用简单
  • SSE 默认支持断线重连，WebSocket 需要自己实现断线重连
  • SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据
  • SSE 支持自定义发送的消息类型
  • WebSocket 支持双向推送消息，SSE 是单向的
  • 轮询性能开销大、轮询时间久导致客户端及时更新数据

使用场景

基于服务端单向的向客户端推送信息的特性，SSE 使用场景主要有

  • Sass 平台的消息通知
  • 信息流网站实时更新数据

使用方式

下面讲解如何在客户端使用 SSE

  • 创建一个 EventSource 实例，向服务器发起连接
const evtSource = new EventSource();
  • 自定义事件

对于自定义事件，服务端和客户端一定要保持事件名一致。服务端通过自定义事件发送数据， 就会触发自定义事件。SSE 默认支持 message 事件，下面以 message 事件为例

evtSource.addEventListener("message", (event) => {
  let payload;
  try {
    payload = JSON.parse(event.data); // <--- event.data 需要反序列化
    console.log("receiving data...", payload);
  } catch (error) {
    console.error("failed to parse payload from server", error);
  }
});

自定义事件的回调函数接收 event 对象，event.data 存着服务端发给客户端的数据但是需要反序列化

可以通过 Chrome Devtool 工具查看 eventsource 通信情况，如图所示

Server-sent events实时获取服务端数据技术详解

  • 1 - 自定义事件名，服务端和客户端需要保持一致
  • 2 - EventStream Tab，数据都在这里
  • 3 - 服务端推送给客户端的数据
  • 错误处理

如果连接发生错误，就会触发 error 事件

evtSource.addEventListener("error", (err) => {
  console.error("EventSource failed:", err);
});
  • 关闭连接

SSE 提供 close 方法，用来关闭 SSE 连接

evtSource.close();

浏览器兼容性

通过 caniuse 查看 SSE 浏览器兼容性，如图所示

Server-sent events实时获取服务端数据技术详解

除了 IE 浏览器不支持，其它现代浏览器都支持，所以放心大胆在项目中使用 SSE

简单封装

在平常的工作中，每次写 SSE 的事件监听和错误处理会很麻烦。多个业务场景需要使用 SSE 时，就需要对 SSE 进行封装。接下来我们尝试封装一个简单的 SSE SDK，方便在项目中使用

当我们决定写 SSE 的 SDK 时，首先想到使用面向对象（OOP）进行封装。根据 SSE 的特性，那么库需要实现 subscribe 和 unsubscribe 两个方法。通过确定 SSE 库使用方式，根据使用方式确定 SDK 的实现。我们可以在代码中这样使用，如下所示

// SSESdk 实例化
const SSE = new SSESdk(url, options);
// 订阅来自服务端的消息
SSE.subscribe("message", (data) => {
  console.log("receive message from server", data);
});
// 取消订阅
SSE.unsuscribe();

我们要封装的库对外仅仅提供 subscribe 和 unsubscribe 两个 Api，非常方便开发人员使用。 subscribe 用来订阅来自服务端的消息， unsubscribe 用来取消订阅，关闭 SSE 连接，通过使用形式可以看出，使用 ES6 中的类语法。接下来我们先确定 SSE SDK 的大体结构

class SSEClient {
  constructor() {}
  subscribe(type, handler) {}
  unsunscribe() {}
}

在 SSEClient 类中有三个方法需要实现，通过 constructor 接受可配置的参数，比如 SSE 建立连接失败后的重试次数和重试时间。 subscribe 接收一个与后端保持一致的事件名和一个回调函数。unsunscribe 不需要传递任何参数，调用 unsunscribe 方法关闭 SSE 连接

// SSE-client.js
class SSEClient {
  constructor(url) {
    this.url = url;
    this.es = null;
  }
  subscribe(type, handler) {
    this.es = new EventSource(url);
    this.es.addEventListener("open", () => {
      console.log("server sent event connect created");
    });
    this.es.addEventListener(type, (event) => {
      let payload;
      try {
        payload = JSON.parse(event.data);
        console.log("receiving data...", payload);
      } catch (error) {
        console.error("failed to parse payload from server", error);
      }
      if (typeof handler === "function") {
        handler(payload);
      }
    });
    this.es.addEventListener("error", () => {
      console.error("EventSource connection failed for subscribe.Retry");
    });
  }
  unsunscribe() {
    if (this.es) {
      this.es.close();
    }
  }
}

就这样实现了一个简单的 SSE SDK。首先根据 url 参数创建一个 SSEClient 实例，当调用 subscribe 方法时，才会根据传入的 url 建立 SSE 连接，然后监听对应的事件，一旦 连接建立成功，后端向客户端发送数据，就可以从 handler 方法中拿到数据

这个库仅仅实现了非常基本的功能，代码封装上存在很多问题。比如 es 的事件全部杂糅在 subscribe 方法中、缺少 SSE 连接建立失败的重试等等功能。接下来我们对刚刚实现的 SSEClient SDK 进行优化

const defaultOptions = {
  retry: 5,
  interval: 3 * 1000,
};
class SSEClient {
  constructor(url, options = defaultOptions) {
    this.url = url;
    this.es = null;
    this.options = options;
    this.retry = options.retry;
    this.timer = null;
  }
  _onOpen() {
    console.log("server sent event connect created");
  }
  _onMessage(handler) {
    return (event) => {
      this.retry = options.retry;
      let payload;
      try {
        payload = JSON.parse(event.data);
        console.log("receiving data...", payload);
      } catch (error) {
        console.error("failed to parse payload from server", error);
      }
      if (typeof handler === "function") {
        handler(payload);
      }
    };
  }
  _onError(type, handler) {
    return () => {
      console.error("EventSource connection failed for subscribe.Retry");
      if (this.es) {
        this._removeAllEvent(type, handler);
        this.unsunscribe();
      }
      if (this.retry > 0) {
        this.timer = setTimeout(() => {
          this.subscribe(type, handler);
        }, this.options.interval);
      } else {
        this.retry--;
      }
    };
  }
  _removeAllEvent(type, handler) {
    this.es.removeEventListener("open", this._onOpen);
    this.es.removeEventListener(type, this._onMessage(handler));
    this.es.removeEventListener("error", this._onError(type, handler));
  }
  subscribe(type, handler) {
    this.es = new EventSource(url);
    this.es.addEventListener("open", this._onOpen);
    this.es.addEventListener(type, this._onMessage(handler));
    this.es.addEventListener("error", this._onError(type, handler));
  }
  unsunscribe() {
    if (this.es) {
      this.es.close();
      this.es = null;
    }
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
}

我们将 SSEClient 中的三个事件方法分别提取为三个私有方法，_onOpen 方法在 event 触发 open 时调用，向控制台输出链接已经创建。 _onMessage 方法在后端向前端发送数据时触发，负责解析数据，并调用 handler 方法。_onError 方法在 SSE 发生错误时触发， 会在控制台输出错误的提示，根据开发者传入的重试次数，先关闭上一次的 SSE 链接，取消所有的事件监听，关闭定时器， 再开启递归调用 subscribe 方法进行重连， 一旦重连成功，重试次数恢复为设定的重试次数，如果超过重试次数依旧没有连接成功，那么 SSE 会彻底终止。需要开发人员排查具体原因

一个可以用在项目上的简单 SSE SDK 封装完

第三方库

SSE 虽然很好，但是也有它先天不足，主要问题是不能通过 headers 传递 Authorization token。虽然可以把 token 放在 url 上 解决不能传 token 的问题，但是又会引发 token 安全隐患。所以社区里有使用 xhr 和 fetch 模拟原生 Server-sent events 的功能，解决不能 通过 headers 传递 Authorization token 的问题。主要有两个第三方库，分别是 eventsource 和 event-source-polyfill， 下面笔者详细讲述这两个库的使用

eventsource

此库是 EventSource 客户端的纯 JavaScript 实现。使用方式很简单。在项目中安装依赖

yarn add eventsource
# Or npm install eventsource

然后从 eventsource 中导出 EventSource 类，然后实例化得到 es 实例

import EventSource from "eventsource";
const eventSourceInitDict = { headers: { authorization: "Bearer token" } };
const es = new EventSource(url, eventSourceInitDict);
es.addEventListener("message", (event) =&gt; {
  console.log("receiving data from server:", JSON.parse(event.data));
});

eventsource 的实现用到了一些 node 标准库。分别是 https 和 http。 笔者将 eventsource 的部分源码列在下面。

// eventsource.js 源码如下
const https = require("https");
const http = require("http");

然而，浏览器环境并不支持 https 和 http 标准库。所以当我们在浏览器环境中使用 eventsource 时，需要做一些额外的工作。下面以 webpack5 为例子讲解解决办法

  • 需要在 webpack 配置文件中添加 node-polyfill-webpack-plugin 插件
yarn add node-polyfill-webpack-plugin -D

然后在 webpack 配置文件使用该插件

// 项目中的 webpack 配置文件，比如 webpack.config.js
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
  // Other rules...
  plugins: [new NodePolyfillPlugin()],
};
  • 或者在 webpack 的 callback 中对使用的库进行单独的配置
module.exports = {
  // other configuration ...
  resolve: {
    fallback: {
      https: false,
      http: false,
    },
  },
};

做完上面的步骤后，eventsource 可以在浏览器中正常运行

如果不想改动 webpack 的配置，那么可以试试 event-source-polyfill 这个库

event-source-polyfill

event-source-polyfill 的使用非常简单，使用 EventSourcePolyfill 替换原生的 EventSource

import { EventSourcePolyfill } from "event-source-polyfill";
var es = new EventSourcePolyfill(url, {
  headers: {
    authorization: "Bearer token",
  },
});
es.addEventListener("message", (event) => {
  console.log("receiving data from server:", JSON.parse(event.data));
});

不足之处

eventsource 和 event-source-polyfill 只是在一定的程度上解决了 Authorization token 的问题，但它们也存在问题。 这两个库提供的 close 方法只能关闭处于 pending 状态的 SSE 连接，因为 fetch 一旦从 pending 变为 resolved 或 reject, 其结果无法改变。当频繁的断开 SSE 连接和建立新 SSE 连接时，旧的 SSE 连接实际上并没有关闭，系统里会存在多个 SSE 连接，这样会带来很大的性能开销

FAQ

  • SSE 不能向服务端发送数据？

可以将数据放入 url 中，断开当前的 SSE 连接，根据新 url 重新建立 SSE 连接

总结

本篇文章讲述一种服务端向客户端推送信息的技术、它比 WebSocket 更简单更轻量化，比轮询性能好。 简单介绍 Server-sent events 的技术原理和使用场景，并进行简单的封装，方便日常在项目中使用。推荐使用 eventsource 和 event-source-polyfill 第三方库解决不能通过 headers 传递 Authorization token 的问题。

参考链接 Server-sent events

以上就是Server-sent events实时获取服务端数据技术详解的详细内容，更多关于Server-sent events的资料请关注脚本之家其它相关文章！

Blazor实现组件嵌套传递值的示例详解
WindiCSS实现加载windi.config.ts配置文件详解

网友评论

登录 注册
iCMS
验证码 换一张
取 消
暂无评论...
24小时内最火资讯
  1. 1Python之列表推导式最全汇总(上篇)
  2. 2Win11安装VMware Workstation Pro,Centos,Xshell,Xftp图文教程(Linux学习必备)
  3. 3springboot使用mybatis开启事务回滚
  4. 4windows2003 的安装及安装过程遇到的问题小结
  5. 5git可视化工具Sourcetree使用全攻略(git冲突解决)
  6. 6django+vue项目搭建实现前后端通信
  7. 7Redis 分片集群的实现
  8. 8springboot使用mybatis开启事务回滚
  9. 9GPU版本安装Pytorch的最新方法步骤
  10. 10Win11安装VMware Workstation Pro,Centos,Xshell,Xftp图文教程(Linux学习必备)
三日内热门评论文章
  1. 1 Win11安装VMware Workstation Pro,Centos,Xshell,Xftp图文教程(Linux学习必备)
  2. 2 Redis处理高并发之布隆过滤器详解
  3. 3 一文带你了解MySQL字符集和比较规则
  4. 4 MySQL常见内置函数以及其使用教程
  5. 5 解决Spring Cloud feign GET请求无法用实体传参的问题
  6. 6 Feign调用中的两种Header传参方式小结
  7. 7 yocto queue微型队列数据结构源码解读
  8. 8 Idea中如何查看SpringSecurity各Filter信息
  9. 9 arrify 转数组实现示例源码解析
  10. 10 Css-In-Js实现classNames库源码解读
精彩图赏
热门视频
月度热门文章
  1. 264
    全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法
    ·
  2. 218
    MySQL如何查看正在运行的SQL详解
    ·
  3. 198
    关于yolov8训练的一些改动及注意事项
    ·
  4. 150
    chatgpt国内镜像 pycharm idea插件使用详解
    ·
  5. 149
    VS Code里使用Debugger for Unity插件调试的方法(2023最新版)
    ·
  6. 125
    全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法
    ·
  7. 117
    JavaWeb day5 Tomcat配置及idea创建Maven-Tomcat项目
    ·
  8. 103
    buildcheck包报错问题排查解决
    ·
  9. 97
    vscode远程开发使用SSH远程连接服务器的方法「内网穿透」
    ·
  10. 96
    全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法
    ·
关键词

为您推荐
  • 相关阅读
  • 业界资讯
  • 手机通讯
  • 电脑办公
  • 新奇数码
  • 软件游戏
  • 科学探索
用户反馈 返回首页 相关阅读 参与讨论 回到顶部

程序员吧感受编程的乐趣

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2022 程序员吧. All rights reserved. Powered by ITBeta V7.0.16