---
title: "Broadcast channels"
manual: "TYPO3 Explained"
version: "11.5"
permalink: "https://docs.typo3.org/permalink/t3coreapi:broadcast-channels@11.5"
source: "ApiOverview/Backend/BroadcastChannels.rst"
rendered: "2026-10-21T15:30:00+00:00"
---

> [!WARNING]
> **Attention**
>
> TYPO3 v11 has reached end-of-life as of October 31th 2024 and
> is no longer being maintained. Use the version switcher on the top
> left of this page to select documentation for a supported version of TYPO3.
>
> Need more time before upgrading?
> You can purchase Extended Long Term Support (ELTS) for TYPO3 v11 here:
> [TYPO3 ELTS](https://typo3.com/services/extended-support-elts).

# Broadcast channels {#broadcast-channels}

It is possible to send broadcast messages from anywhere in TYPO3 that are
listened to via JavaScript.

> [!WARNING]
> This API is considered internal and may change anytime until declared being stable.

## Send a message {#send-a-message}

Any backend module may send a message using the `TYPO3/CMS/Backend/BroadcastService` module.
The payload of such message is an object that consists at least of the following properties:

-   `componentName` \- the name of the component that sends the message (e.g. extension name)
-   `eventName` \- the event name used to identify the message

A message may contain any other property as necessary. The final event name to listen is a composition of "typo3", the
component name and the event name, e.g. `typo3:my_extension:my_event`.

> [!WARNING]
> **Attention**
>
> Since a polyfill is in place to add support for Microsoft Edge, the payload
> must contain JSON-serializable content only.

To send a message, the `post()` method must be used.

Example code:

**EXT:my_broadcast_extension/Resources/Public/JavaScript/my-broadcast-service.js**

```javascript
require(['TYPO3/CMS/Backend/BroadcastService'], function (BroadcastService) {
  const payload = {
    componentName: 'my_extension',
    eventName: 'my_event',
    hello: 'world',
    foo: ['bar', 'baz']
  };

  BroadcastService.post(payload);
});

```

## Receive a message {#receive-a-message}

To receive and thus react on a message, an event handler needs to be registered that listens to the composed event
name (e.g. `typo3:my_component:my_event`) sent to `document`.

The event itself contains a property called `detail` **excluding** the component name and event name.

Example code:

**EXT:my_extension/Resources/Public/JavaScript/my-event-handler.js**

```javascript
define([], function() {
  document.addEventListener('typo3:my_component:my_event', (e) => eventHandler(e.detail));

  function eventHandler(detail) {
    console.log(detail); // contains 'hello' and 'foo' as sent in the payload
  }
});

```

Hook into
`$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/backend.php']['constructPostProcess']`
to load a custom `BackendController` hook that loads the event handler,
e.g. via RequireJS.

Example code:

**EXT:my_extension/ext_localconf.php**

```php
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/backend.php']['constructPostProcess'][]
    = \MyVendor\MyExtension\Hooks\BackendControllerHook::class . '->registerClientSideEventHandler';
```

**EXT:my_extension/Classes/Hooks/BackendControllerHook.php**

```php
<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\Hooks;

use TYPO3\CMS\Core\Page\PageRenderer;

final class BackendControllerHook
{
    private PageRenderer $pageRenderer;

    public function __construct(PageRenderer $pageRenderer)
    {
        $this->pageRenderer = $pageRenderer;
    }

    public function registerClientSideEventHandler(): void
    {
        $this->pageRenderer->loadRequireJsModule(
            'TYPO3/CMS/MyExtension/EventHandler'
        );
    }
}

```

**EXT:my_extension/Configuration/Services.yaml**

```yaml
services:
  _defaults:
    autowire: true
    autoconfigure: true
    public: false

  MyVendor\MyExtension\Hooks\BackendControllerHook:
    public: true
```

See also: [What to make public](https://docs.typo3.org/permalink/t3coreapi:knowing-what-to-make-public@11.5)