Lightning コンテナコンポーネントからのメッセージの送信

この例は、lightning:container を含み、3 つの属性 (messageToSend、messageReceived、error) を持つ Aura コンポーネントを示しています。

この例は、「サードパーティフレームワークの使用」の例と同じコードを使用します。この例の完全版は、Developerforce GitHub リポジトリからダウンロードできます。

1<aura:component access="global" implements="flexipage:availableForAllPageTypes" >
2    <aura:attribute access="private" name="messageToSend" type="String" default=""/>
3    <aura:attribute access="private" name="messageReceived" type="String" default=""/>
4    <aura:attribute access="private" name="error" type="String" default=""/>
5    
6    <div>
7        <lightning:input name="messageToSend" value="{!v.messageToSend}" label="Message to send to React app: "/>
8        <lightning:button label="Send" onclick="{!c.sendMessage}"/>
9        <br/>
10        <lightning:textarea value="{!v.messageReceived}" label="Message received from React app: "/>
11        <br/>
12        <aura:if isTrue="{! !empty(v.error)}">
13            <lightning:textarea name="errorTextArea" value="{!v.error}" label="Error: "/>
14        </aura:if>
15    
16        <lightning:container aura:id="ReactApp"
17                             src="{!$Resource.SendReceiveMessages + '/index.html'}"
18                             onmessage="{!c.handleMessage}"
19                             onerror="{!c.handleError}"/>
20    </div>
21</aura:component>

messageToSend は、フレーム化されたアプリケーションに Salesforce から送信されたメッセージを表し、messageReceived は、アプリケーションが Aura コンポーネントに送信したメッセージを表します。lightning:container には、必須の src 属性と、aura:id および onmessage 属性が含まれます。onmessage 属性には、JavaScript コントローラのメッセージ処理メソッドを指定し、aura:id を使用してこのメソッドでコンポーネントを参照できます。

この例は、コンポーネントの JavaScript コントローラを示しています。

1({    
2    sendMessage : function(component, event, helper) {
3        
4        var msg = {
5            name: "General",
6            value: component.get("v.messageToSend")
7        };
8        component.find("ReactApp").message(msg);
9    },
10    
11    handleMessage: function(component, message, helper) {
12        var payload = message.getParams().payload;
13        var name = payload.name;
14        if (name === "General") {
15            var value = payload.value;
16            component.set("v.messageReceived", value);
17        }
18        else if (name === "Foo") {
19            // A different response
20        }
21    },
22    
23    handleError: function(component, error, helper) {
24        var e = error;
25    }
26})

このコードはいくつかの異なる処理を実行します。sendMessage アクションでは、囲んでいる Aura コンポーネントから組み込みアプリケーションにメッセージを送信します。これは、name と value を含む JSON 定義を持つ変数 msg を作成します。このメッセージの定義はユーザが定義します。つまり、メッセージのペイロードを値や、構造化された JSON 応答などにすることができます。Aura コンポーネントの messageToSend 属性はメッセージの value に設定されます。次に、メソッドはコンポーネントの aura:id と message() 関数を使用して、メッセージを Aura コンポーネントに送り返します。

handleMessage メソッドは、組み込みアプリケーションからメッセージを受信して適切に処理します。これは、コンポーネント、メッセージ、およびヘルパーを引数として取ります。このメソッドは条件ロジックを使用してメッセージを解析します。これが、name と value を持つ予期されたメッセージの場合、メソッドは Aura コンポーネントの messageReceived 属性をメッセージの value に設定します。このコードは 1 つのメッセージのみを定義しますが、条件ステートメントを使用すると、sendMessage メソッドで定義されたさまざまな種別のメッセージを処理できます。

メッセージを送受信するためのハンドラコードは複雑になる可能性があります。Aura コンポーネント、そのコントローラ、およびアプリケーション間のメッセージのフローを理解することをお勧めします。ユーザが messageToSend 属性としてメッセージを入力すると、処理が開始されます。ユーザが [Send (送信)] をクリックすると、コンポーネントは sendMessage をコールします。sendMessage はメッセージペイロードを定義し、message() メソッドを使用してメッセージペイロードをアプリケーションに送信します。アプリケーションを定義する静的リソース内で、指定されたメッセージハンドラ関数がメッセージを受信します。lightning-container モジュールの addMessageHandler() メソッドを使用して、JavaScript コード内でメッセージ処理関数を指定します。詳細は、「lightning-container NPM モジュールリファレンス」を参照してください。

lightning:container は、フレーム化されたアプリケーションからメッセージを受信すると、lightning:container の onmessage 属性に設定された、コンポーネントのコントローラの handleMessage メソッドをコールします。handleMessage メソッドはメッセージを取得し、その値を messageReceived 属性として設定します。最後に、コンポーネントは messageReceived を lightning:textarea に表示します。

これは、コンテナを横断するメッセージ処理の簡単な例です。アプリケーションのコントローラ側のコードと機能を実装するため、Salesforce と、lightning:container に埋め込まれたアプリケーション間のあらゆる種類の通信でこの機能を使用できます。