Waiter:微前端之间的简洁通信

简而言之:我构建了一个轻量级的 TypeScript 库,用于让微前端之间轻松通信。

无需发布/订阅,也不需要事件总线,只需简单的请求/响应模式即可完成交互

❗问题所在

如果你曾经使用过微前端架构,一定体会过让各个子应用互相通信的痛苦。最终通常会演变成以下情况:

  • 复杂难调试的事件系统
  • 各种竞态条件和时序问题
  • 处理敏感数据时的安全隐患

🛠 它是如何工作的

Waiter 允许你在应用的一部分创建"控制器",然后从其他任意位置发起请求。可以把它理解为前端内部的 API:

javascript 复制代码
// 在用户管理微前端中
const waiter = new Waiter();
waiter.createController('getUserData', (userId) => {
  return userStore.getUser(userId);
});

// 在仪表盘微前端中
const waiter = new Waiter();
const user = await waiter.request('getUserData', 123);

就是这样。无需设置,无需配置,即可使用。

🔑 主要特性

  • 零依赖 ------ Gzip 后仅几 KB
  • 原生支持 TypeScript ------ 开箱即用的完整类型安全
  • 基于 Promise ------ 完整支持 async/await 异步调用
  • 内置安全机制 ------ 可选的身份验证令牌与 AES-GCM 加密
  • 框架无关 ------ 可与 React、Vue、Angular 或原生 JS 搭配使用

🔒 安全特性(亮点)

你可以使用身份验证令牌和加密功能来保护敏感通信:

arduino 复制代码
const secureWaiter = new Waiter({
  authToken: 'secret-token',
  encryptionKey: 'your-32-char-encryption-key'
});

// 只有持有正确令牌的代码才能创建或移除控制器
// 所有传输的数据都会自动加密处理

🚀 在线演示

点击这里查看演示

该库已发布在 NPMGitHub。欢迎大家试用并提出宝贵意见!

相关推荐
梦6502 分钟前
Vue 中 v-for 与 v-if 优先级
前端·javascript·vue.js
一只小bit8 分钟前
Qt 多媒体:快速解决音视频播放问题
前端·c++·qt·音视频·cpp·页面
梦6508 分钟前
React 高阶组件
前端·react.js·前端框架
CHU7290359 分钟前
智慧回收新体验:同城废品回收小程序的便捷功能探索
java·前端·人工智能·小程序·php
Marshmallowc9 分钟前
从URL变化到组件重绘:React Router 状态分发机制与组件挂载逻辑深度全解
前端·react.js·前端框架·react router·组件生命周期
虹少侠26 分钟前
基于 WebKit 构建 macOS 多浮窗视频播放的技术实践(含完整产品落地)
前端·macos·swift·webkit
木易 士心29 分钟前
Vue 响应式数据失效全解析:从原理机制到工程实践
前端·javascript·vue.js
Rattenking29 分钟前
【CSS】---- 根据【张鑫旭-高宽不等图片固定比例布局的三重进化】的思考
前端·css
AC赳赳老秦31 分钟前
ELK栈联动:DeepSeek编写Logstash过滤规则与ES日志分析逻辑
运维·前端·javascript·低代码·jenkins·数据库架构·deepseek
0思必得039 分钟前
[Web自动化] Selenium浏览器对象方法(操纵浏览器)
前端·python·selenium·自动化·web自动化