Symfony UX Notify

编辑此页

Symfony UX Notify 是一个 Symfony 扩展包，它使用 Mercure 在 Symfony 应用程序中集成服务器发送的 原生通知。它是 Symfony UX 倡议的一部分。

安装

注意

在开始之前，请确保您的应用中配置了 StimulusBundle。

使用 Composer 和 Symfony Flex 安装扩展包

1
$ composer require symfony/ux-notify

如果您正在使用 WebpackEncore，请安装您的 assets 并重启 Encore（如果您正在使用 AssetMapper，则不需要）

1
2
$ npm install --force
$ npm run watch

使用方法

要使用 Symfony UX Notify，您必须有一个正在运行的 Mercure 服务器和一个正确配置的 notifier transport

1
2
3
4
5
# config/packages/notifier.yaml
framework:
    notifier:
        chatter_transports:
           myMercureChatter: '%env(MERCURE_DSN)%'

然后，您可以注入 NotifierInterface 服务，并在 chat/myMercureChatter 频道上发送消息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ...
use Symfony\Component\Notifier\ChatterInterface;
use Symfony\Component\Notifier\Message\ChatMessage;

#[AsCommand(name: 'app:flash-sales:announce')]
class AnnounceFlashSalesCommand extends Command
{
    public function __construct(private ChatterInterface $chatter)
    {
        parent::__construct();
    }

    protected function execute(InputInterface $input, OutputInterface $output): int
    {
        $message = (new ChatMessage(
            'Flash sales has been started!',
            new MercureOptions(['/chat/flash-sales'])
        ))->transport('myMercureChatter');

        $this->chatter->send($message);

        return 0;
    }
}

chat/flash-sales 是消息将要发送到的 Mercure 主题。最后一步是“监听”该主题并在用户的浏览器中触发通知。为此，请在页面上的任何位置调用 stream_notifications() Twig 函数

1
{{ stream_notifications(['/chat/flash-sales']) }}

注意

调用不带参数的 stream_notifications() 将默认使用 https://symfony.ac.cn/notifier 主题。

享受您的服务器发送的原生通知吧！

Example of a native notification

扩展 Stimulus 控制器

Symfony UX Notify 允许您使用自定义 Stimulus 控制器扩展其默认行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// assets/controllers/mynotify_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    initialize() {
        // guarantees "this" refers to this object in _onConnect
        this._onConnect = this._onConnect.bind(this);
    }

    connect() {
        this.element.addEventListener('notify:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('notify:connect', this._onConnect);
    }

    _onConnect(event) {
        // Event sources have just been created
        console.log(event.detail.eventSources);

        event.detail.eventSources.forEach((eventSource) => {
            eventSource.addEventListener('message', (event) => {
                console.log(event); // You can add custom behavior on each event source
            });
        });
    }
}

然后在您的渲染调用中，将您的控制器添加为 HTML 属性

1
{{ stream_notifications(options = {'data-controller': 'mynotify'}) }}

使用另一个 Mercure hub

可以配置 Symfony UX Notify 以指定要使用的 Mercure hub

1
2
3
4
# config/packages/notify.yaml
notify:
    # Specifies the Mercure hub to use. Defaults to "mercure.hub.default"
    mercure_hub: mercure.hub.custom

向后兼容性承诺

此扩展包旨在遵循与 Symfony 框架相同的向后兼容性承诺：https://symfony.ac.cn/doc/current/contributing/code/bc.html

这项工作，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。
目录
    版本