Lightning Message Service (LMS) | MessageChannel

380 阅读3分钟

Lightning Message Service是Salesforce在20年冬季版本中推出的开箱即用的功能,使您能够在Visualforce和Lightning组件之间进行通信,包括Aura网络组件(AWC)和Lightning网络组件(LWC)。

LMS被定义为标准的发布-订阅库,它能够使用简单的API与整个Salesforce UI技术栈(包括Visualforce页面、Aura组件和闪电网络组件(LWC))的DOM进行快速、无缝的通信。利用Salesforce的这一独特功能,你可以在闪电页面的任何地方发布消息并订阅它们。Lightning消息服务功能类似于Aura应用程序事件,可以实现组件之间的无缝通信。

闪电消息服务是基于闪电消息通道,这是一种新的元数据类型。闪电消息通道用于访问闪电消息服务API,以及通过范围模块@salesforce/messageChannel访问LWC中的闪电消息通道。当涉及到Visualforce时,你可以使用全局变量$MessageChannel。在Aura中,你可以在你的组件中使用lightning:messageChannel。

闪电消息服务的用途

1.实现Visualforce页面、Lightning Web组件和Aura组件之间的通信。

2.访问Lightning消息服务API,在整个Lightning Experience中发布消息。此外,它还有助于通过Lightning Message Channel订阅来自Lightning Experience内部任何地方的消息。

3.一个特定的命名空间与Lightning Message Channel相关。开发者可以选择是否让他们的消息通道对其他命名空间可用,确保Lightning消息服务的通信安全。

闪电信息服务的好处

1.其中一个重要的好处是增加了开发时间。例如,如果一个Visualforce Page或Lightning组件试图引用一个不可用的消息通道,而该消息通道没有被公开,那么代码将无法编译。

2.这种消息传递服务在引用它们的代码和消息通道之间提供参考完整性。它限制了删除被其他代码引用的消息通道。此外,Lightning消息服务支持自动添加消息通道到包中。

3.由于元数据类型是可打包的,你可以将消息通道关联到一个特定的命名空间,并使其对其他命名空间可用/不可用。

如何使用Lightning消息服务?

Lightning消息服务是基于一种新的元数据类型,即Lightning消息通道,它是轻量级的、可打包的组件,你可以在运行期间在你的组织中创建,用于发布和订阅其上的消息。

闪电信息通道的结构

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningMessageChannel xmlns=”http://soap.sforce.com/2006/04/metadata”>

    <description>This is a sample Lightning Message Channel.</description>

    <isExposed>true</isExposed>

    <lightningMessageFields>

        <description>This is the data</description>

        <fieldName>data</fieldName>

    </lightningMessageFields>

    <masterLabel>SampleMessageChannel</masterLabel>

</LightningMessageChannel>
1.masterLabel是唯一需要的字段,在各种UI中标识消息通道

2.Exposed是可选的布尔字段,如果你不指定它,则声明为假另外,这个字段告诉我们的系统,一个特定的消息通道是否对其他命名空间的组件可用

在我们的组织中,我们应该在哪里建立一个闪电信息通道?

1.使用VsCode,然后使用Salesforce CLI和SFDX项目。

2."force-app/main/default/"创建一个文件夹 "messageChannels"3."messageChanel "目录下<channelName>.messageChannel-meta.xml 例如,SampleMessageChannel.messageChannel-meta.xml。

4.将消息通道部署到你的组织,以了解你的消息通道,然后在你的代码中使用它。

5.消息通道在另一个命名空间,可以用命名空间后面的两个下划线。因此,如果SampleMessageChannel来自example命名空间,你会说example__SampleMessageChannel__c。

如何实现Lightning消息服务?

在VisualForce中使用Lightning Message Service

对于Visualforce,我们可以使用全局变量$MessageChannel

var SAMPLEMC = "{!$MessageChannel.SampleMessageChannel__c}";

var subscriptionToMC;

function onMCPublished(message) {
    var textArea = document.querySelector("#MCMessageTextArea");
    textArea.innerHTML = message ? JSON.stringify(message, null, '\t') : 'no message payload';
}

function subscribe_Message_Channel() {
    if (!subscriptionToMC) {
        subscriptionToMC = sforce.one.subscribe(SAMPLEMC, onMCPublished);
        var divAr = document.querySelector("#subscMessage");
        divAr.innerHTML = 'Subscribed: True!';
        var divAr = document.querySelector("#unsubscMessage");
        divAr.innerHTML = "";
    }
}

function unsubscribe_Message_Channel() {
    if (subscriptionToMC) {
        sforce.one.unsubscribe(subscriptionToMC);
        subscriptionToMC = null;
        var divAr = document.querySelector("#unsubscMessage");
        divAr.innerHTML = 'Subscribed: False! ';
        var divAr = document.querySelector("#subscMessage");
        divAr.innerHTML = "";
    }
}

function publishMC() {
    const payload = {
        Data: {
            value: "Sample Message",
            channel: 'SampleChannel',
            source: 'VF'
        }
    };
    sforce.one.publish(SAMPLEMC, payload);
}

代码中消息通道名称末尾的__c约定表示在平台上创建的自定义消息通道,但与自定义对象没有其他联系。

在Aura组件中使用闪电信息服务

对于Aura组件,在你的组件中使用lightning:messageChannel。

要从应用程序的任何地方接收消息通道上的消息,使用lightning:messageChannel的可选参数,范围。将范围设置为 "APPLICATION "值。

如果我们使用属性范围="APPLICATION "的lightning:messageChannel,我们也可以在同一个组件中发布和订阅消息。

handleMessage: function(component, message, helper) {
    try {
        if (message.getParam('Data')) {
            component.set('v.messageFromPublisher', JSON.stringify(message.getParam('Data')));
        }
    }
    catch (exp) {
        console.log(exp.message);
    }
},
publishMC: function(component, event, helper) {
    try {
        let payload = {
            Data: {
                value: "Sample Message",
                channel: 'SampleChannel',
                source: 'Aura'
            }

        };
        component.find("sampleMessageChannel").publish(payload);
    } catch (error) {
        console.log(`Error—${error}`);
    }
}

对于LWC,要在LWC中引用一个消息通道,从新的@salesforce/messageChannel范围内的模块中导入。要使用LMS的API,从lightning/messageService导入我们感兴趣的功能--发布、订阅、取消订阅等。

下面是一个使用发布、订阅和取消订阅的例子。你可以假设下面的publishMC、subscribeMC和unsubscribeMC函数被绑定到模板中的一个按钮上,而receivedMessage属性被绑定到一个文本区域。

import { LightningElement, track } from 'lwc';

import {
    createMessageContext, releaseMessageContext,
    subscribe, unsubscribe, publish
} from 'lightning/messageService'
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c";
export default class LMS_DEMO_LWC extends LightningElement {
    context = createMessageContext();

    subscription = null;

    @track receivedMessage = "";

    publishMC() {
        let message = {
            Data: {
                value: "Sample Message",
                channel: 'SampleChannel',
                source: 'LWC'
            }
        };
        publish(this.context, SAMPLEMC, message);
    }

    subscribeMC() {
        if (this.subscription) {
            return;
        }
        this.subscription = subscribe(this.context, SAMPLEMC, (message) => {
            this.handleMessage(message);
        });

    }

    unsubscribeMC() {
        unsubscribe(this.subscription);
        this.subscription = null;
    }

    handleMessage(message) {
        this.receivedMessage = message ? JSON.stringify(message, null, '\t') : 'no message payload';
    }

    disconnectedCallback() {
        releaseMessageContext(this.context);
    }
}

createMessageContext和releaseMessageContext函数是LWC独有的。上下文对象提供关于使用LMS的Lightning Web组件的上下文信息。在disconnectedCallback中,我们的建议是调用releaseMessageContext,这将解除与该上下文相关的任何订阅。

闪电信息服务的局限性

Lightning Message Service只支持以下体验。
Lightning Experience标准导航。
闪电体验控制台导航。
用于Aura和Lightning Web组件的Salesforce移动应用程序,但不支持Visualforce页面。
Experience Builder网站中使用的Lightning组件。对Experience Builder网站的支持是测试版

不渲染的Aura组件不被支持

Lightning消息服务只支持渲染的Aura组件。你不能在使用后台实用项目接口的Aura组件中使用lightning:messageChannel。同样,使用lightning:messageChannel的Aura组件也不能在init生命周期处理程序中调用Lightning Message Service方法,因为该组件还没有渲染。

lightning:messageChannel必须是aura:component的一个子项

在一个自定义的Aura组件中,lightning:messageChannel必须是aura:component标签的一个直接子节点。它不能嵌套在一个HTML标签或其他组件中。

例如,以下代码的渲染是没有问题的

 <aura:component>
     <lightning:messageChannel type=”myMessageChannel__c” />
     <lightning:card></lightning:card>
 </aura:component>

当Aura组件试图渲染时,这段代码会抛出一个错误

<aura:component>
    <lightning:card>
        <lightning:messageChannel type=”myMessageChannel__c” />
    </lightning:card>
</aura:component>

FireShot Capture 043 - 闪电消息服务 (LMS) - MessageChannel - 高峰时段 - www.apexhours.com.png