multi-page-event-bus

0.0.2 • Public • Published

多页面事件总线

在Node.js的多页面应用中,用于各个页面之间通信的事件总线方案。

背景

在模块间业务耦合性不强的应用中,使用多页面架构可以有效的降低应用的复杂度。

但是,有些页面上的逻辑比较复杂,需要切割到多个页面中实现。在多页面架构中,没有前端路由、状态管理等框架的辅助,只能靠刷新页面来获取最新的数据,用户体验不流畅。

基于服务器的事件总线方案,可以在多个页面之间通过监听和分发自定义事件来交换数据,并不需要刷新页面。

服务端使用

安装模块:

npm install --save multi-page-event-bus

代码中的引用:

var bus = require('multi-page-event-bus');
bus.init(server);

**备注:**参数server是一个net.Server实例。express实例的listen方法、http.createServer创建的实例的listen方法,都可以返回所需要的net.Server参数。

客户端使用

事前打包或加载分发目录dist下的socket.io/socket.io.js

var bus = require('multi-page-event-bus');
bus.on('自定义事件名', function(data){});
bus.emit('自定义事件名', data);

备注:

  • 需要构建工具辅助打包,对模块代码进行包装。
  • on方法接受一个自定义事件名和一个处理事件数据的函数。
  • emit方法分发一个定义事件和事件数据。
  • 使用方需要确保事件名称不重名。

构建和演示

可以在本地克隆代码,自行构建项目,演示事件监听、分发的效果。

# 克隆代码
git clone https://github.com/peigong/multi-page-event-bus.git
# 进入项目目录
cd multi-page-event-bus
# 安装项目依赖
npm install
# 构建项目
npm run build 
# 启动演示服务
npm run start

在浏览器中访问http://localhost:3030,打开几个页面中的链接,观察点击页面时,本页面和其他页面监听到的数据。

演示页面是stub目录下的index.htmliife.html页面。

Readme

Keywords

Package Sidebar

Install

npm i multi-page-event-bus

Weekly Downloads

0

Version

0.0.2

License

Apache License 2.0

Unpacked Size

95.3 kB

Total Files

19

Last publish

Collaborators

  • peigong