across-msg

简介

across-msg是一个简单的前端消息组件，我们可以通过它来在不同的模块之间传递消息。

安装

使用npm进行安装：

npm install across-msg --save

使用yarn进行安装：

yarn add across-msg

通过script标签引入：

<script src="../across-msg.js"></script>

使用

在可构建的前端项目中：

const AcrossMsg = require('across-msg');

const client = new AcrossMsg({
  name: 'demo',
  onMessage: (msg) => {
    console.log('接收到消息了！消息内容是：', msg.content);
  }
});

client.send('demo2', '向其他客户端发送消息');

在非构建的网页中，我们在window上可以拿到AcrossEnv对象：

<script src="../across-msg.js"></script>
<script>
var client = new window.AcrossEnv({
  name: 'demo',
  onMessage: (msg) => {
    console.log('接收到消息了！消息内容是：', msg.content);
  }
});
client.send('demo', '向其他客户端发送消息');
</script>

相关API文档

AcrossMsg构造函数：

const client = new AcrossMsg({
  name: 'demo',
  channel: 'main',
  durableMessage: true,
  debug: true,
  onMessage: (msg) => {
    console.log(msg);
  }
});

主要参数：

name: 必填。表示订阅的消息名称，其它客户端发送消息时使用此标识确定发送消息的目标。如果名称为broadcast，说明本客户端只接收广播消息。

channel: 表示使用的通道名称，非必填。默认在不填的情况下所有客户端都使用main这个通道，当有客户端在此通道内发送广播消息时，所有其它客户端都会接收到该消息。修改通道名称可以构建单独的消息通道，避免受到无关客户端广播消息的干扰。

durableMessage: 表示是否接受持久化消息，非必填，默认值为“false”。表示是否接受持久化消息。普通的消息会在发送的时候即时同事目标客户端，如果此时目标客户端仍为初始化完成的话，那么目标客户端在后面初始化完成后，也不会受到这条消息。持久化的消息会存储在内部的持久化队列中。当客户端配置允许接收持久化消息后，会在初始化的时候，在第一时间会将持久化消息队列中的所有消息进行接收。

debug: 调试模式，非必填，默认为false。如果开启，则会打印相关的日志信息。

onMessage(res): 接收消息的回调函数。必填。res的数据结构如下：

{
  // desc: 消息描述
  desc: {
    name: 'demo', // 消息接收客户端名称
    channel: 'main', // 消息通道
    created: 0, // 消息发送时间
    durable: false, // 是否是持久化消息
    maxAge: 0, // 消息过期时间 
  },
  // content: 消息内容，可以为任意类型，甚至是函数
  content: 'hello world'
}

AcrossMsg.prototype.send

client.send(name, message, config);

name: 目标客户端名称，必填。当名称为broadcast时，发送广播消息。

message: 消息内容，必填，可以为任意类型。

config: 配置信息，非必填，数据结构如下：

{
  durable: true, // 是否是持久化消息，默认为false
  maxAge: 0, // 消息有效时间，只在durable为true时生效，默认为一个月
}

构建与测试

构建

npm i && npm run build

单元测试

本项目使用jest进行单元测试，相关配置见jest.config.js

npm run test

反馈

如有问题，请联系 [email protected]