# Pass messages to and from Unreal

Your browser application can send and receive messages to Unreal Engine over the Pixel Streaming WebRTC datachannel through Odyssey.

Odyssey provides a message channel, using the MessageChannel API

## Setting up a `MessageChannel`

In order to send and receive native pixel stream messages, you'll need to create a `MessageChannel` on your iframe.

The following code sets up a secure communication channel between the parent window and Odyssey (app.odyssey.stream) using the MessageChannel API.

A new `MessageChannel` instance is created when the iframe has reached a loaded state, providing two bidirectional ports: `port1` and `port2`.

The initial action is taken by the parent window, which subscribes to `port2` and then transfers `port1` to Odyssey. Odyssey will acknowledges and validates this message, replying with an `odyssey ready` message. Once this connection is established, both the parent window and Odyssey gain the capability to exchange messages in both directions.

```javascript
const iframe = document.querySelector('iframe') as HTMLIFrameElement
iframe.addEventListener('load', onLoad)

const channel = new MessageChannel() as MessageChannel

function onLoad() {
    if (!iframe || !iframe.contentWindow) {
        console.error('Iframe not found.')
        return
    }
    // listen for messages on port2
    channel.port2.onmessage = onMessage
    // send setup channel message to odyssey
    iframe.contentWindow.postMessage({ type: 'setupChannel' }, 'https://app.odyssey.stream/', [channel.port1])
}

function onMessage(event: Event) {
    // add custom logic to react to messages from Odyssey 
    console.log('Message received from iframe: ', event.data)
}
```