> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

# Method name: subscribe(channel: Channel, handler: MessageHandler)

# Method package: wixRealtimeFrontend

# Method menu location: wixRealtimeFrontend --> subscribe

# Method Link: https://dev.wix.com/docs/velo/apis/wix-realtime-frontend/subscribe.md

# Method Description:

Subscribes to a channel or channel resource.

The `subscribe()` function subscribes to receive messages published on the
 specified channel or channel resource and sets a function that handles
 incoming messages when they are published to the channel. 

 When you subscribe to a channel you do not receive messages published to
 a resource on that same channel. To receive those messages, you must
 explicitly subscribe to the specific resource.

 The specified message handler is run each time a message is published on
 the given channel or channel resource. Use it to define what happens when
 messages are received.

 You can subscribe to a channel or channel resource more than once to add
 multiple message handlers. Each subscription returns a unique subscription
 ID which can be used later to unsubscribe from the specific subscription 
 with that ID, without affecting the other subscriptions on the same channel
 or channel resource.



# Method Code Examples:

*** Note: do not assume any prop names or enum values other than the ones in the example.

## Subscribe to a channel

```javascript
import wixRealtimeFrontend from 'wix-realtime-frontend';

// ...

const channel = {"name": "someChannel"};
let subscriptionId;

wixRealtimeFrontend.subscribe(channel, (message, channel) => {
  let payload = message.payload;
  let channelName = channel.name;
  if(message.publisher) {
    let publisherId = message.publisher.id;
  }
})
.then((id) => {
  subscriptionId = id;
});
```

## Subscribe to a resource on a channel

```javascript
import wixRealtimeFrontend from 'wix-realtime-frontend';

// ...

const channel = {
  "name": "someChannel",
  "resourceId": "someId"
};
let subscriptionId;

wixRealtimeFrontend.subscribe(channel, (message, channel) => {
  let payload = message.payload;
  let channelName = channel.name;
  let resourceId = channel.resourceId;
  if(message.publisher) {
    let publisherId = message.publisher.id;
  }
})
.then((id) => {
  subscriptionId = id;
});
```

## Send and receive messages across a single channel

```javascript
import { subscribe } from 'wix-realtime-frontend';
import { publishMessage } from 'backend/realtime';

const channel = { name: 'hello-world' };

$w.onReady(function () {
  subscribe(channel, (message) => {
    $w('#receivedMessages').value += (message.payload + '\n');
  });
    
  $w('#publishMessageButton').onClick(async () => {
    if($w('#message').value) {
      $w('#publishMessageButton').disable();
      $w('#message').disable();

      await publishMessage(channel, $w('#message').value);
            
      $w('#message').value = undefined;
      $w('#message').enable();
      $w('#publishMessageButton').enable();
    }
  });
});

```

## Display a popup notification when a message is received

```javascript
import wixRealtimeFrontend from 'wix-realtime-frontend';

// ...

$w.onReady(function() {
  const channel = {"name": "updates"};

  wixRealtimeFrontend.subscribe( channel, (message, channel) => {
    $w("#updateMessage").text = message.payload;
    $w("#updateBox").show();
  });

  $w("#hideUpdateButton").onClick( () => {
    $w("#updateBox").hide();
  });
});


```

---