Breadcrumb
- Sabre Red 360 Software Development Kit Help
- Web Red Apps
- Red App Cookbooks
- External website communication
External website communication
ExternalCommunication service allows web RedApps to open a new window (or tab) and then post and receive messages from it.
It uses PostMessage API (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
RedApp
From within web Redapp we use IExternallCommunicationService to open a new window and send messages.
IExternalCommunicationService.openWindow(url, targetOrigin, listener) opens a new window with URL set as the first parameter. targetOrigin is the origin of URL, listener send as the third parameter will only work with messages send from targetOrigin. listener parameter has to be a function that accepts one parameter of MessageEvent type with void return type.
com.sabre.redapp.example3.web.crosswindow sample
const listener = (event) => {
console.log(event);
this.$('.response').val(JSON.stringify(event.data))
};
this.externalReference = getService(IExternalCommunicationService).openWindow("https://redapp-examples.cert.sabre.com/crosswindow/", "*", listener);
* send as target origin allows this listener to work with every message that will be posted to/fromsrw. This is not secure approach and in production, code it should be set to the actual origin.
openWindow returns a function that then can be used to post data to opened website.
com.sabre.redapp.example3.web.crosswindow sample
const payload: string = this.$('.payload-field').find('.payload').val(); this.externalReference(JSON.parse(payload));
External website
External website that has been opened using IExternalCommunicationService.openWindow method can acquire SRW window using window.opener method. Then, thanks to this reference, messages can be sent to SRW and handled using listener defined in web Redapp.
To listen to Redapp messages external website should implement it’s own listener using window.addEventListener("message", (event)⇒void) method.
com.sabre.redapp.example3.web.crosswindow/externalWeb sample
window.opener.postMessage(JSON.parse(jsonString), "*");
window.addEventListener("message", event => {
console.log(event);
document.getElementById("incomingMessageBox").innerHTML = JSON.stringify(
event.data
);
Sample named com.sabre.redapp.example3.web.crosswindow showcases use of the service and provide sample website that implements postMessage and event listener.