|
| 1 | +# Symfony UX Notify |
| 2 | + |
| 3 | +Symfony UX Notify is a Symfony bundle integrating realtime native notifications in Symfony applications using [Mercure](https://mercure.rocks/). |
| 4 | +It is part of [the Symfony UX initiative](https://symfony.com/ux). |
| 5 | + |
| 6 | +## Installation |
| 7 | + |
| 8 | +Symfony UX Notify requires PHP 7.2+ and Symfony 5.3+. |
| 9 | + |
| 10 | +Install this bundle using Composer and Symfony Flex: |
| 11 | + |
| 12 | +```sh |
| 13 | +composer require symfony/ux-notify |
| 14 | + |
| 15 | +# Don't forget to install the JavaScript dependencies as well and compile |
| 16 | +yarn install --force |
| 17 | +yarn encore dev |
| 18 | +``` |
| 19 | + |
| 20 | +Also make sure you have at least version 3.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge) in your `package.json` file. |
| 21 | + |
| 22 | +## Usage |
| 23 | + |
| 24 | +To use Symfony UX Notify you must have a [running Mercure server](https://symfony.com/doc/current/mercure.html#running-a-mercure-hub). |
| 25 | + |
| 26 | +Then, inject the `NotifierInterface` service and send messages on the `chat/mercure` channel. |
| 27 | + |
| 28 | +```php |
| 29 | +// ... |
| 30 | +use Symfony\Component\Notifier\Notification\Notification; |
| 31 | +use Symfony\Component\Notifier\NotifierInterface; |
| 32 | + |
| 33 | +class AnnounceFlashSalesCommand extends Command |
| 34 | +{ |
| 35 | + protected static $defaultName = 'app:flash-sales:announce'; |
| 36 | + private $notifier; |
| 37 | + |
| 38 | + public function __construct(NotifierInterface $notifier) |
| 39 | + { |
| 40 | + parent::__construct(); |
| 41 | + |
| 42 | + $this->notifier = $notifier; |
| 43 | + } |
| 44 | + |
| 45 | + protected function execute(InputInterface $input, OutputInterface $output): int |
| 46 | + { |
| 47 | + $this->notifier->send(new Notification('Flash sales has been started!', ['chat/mercure'])); |
| 48 | + |
| 49 | + return 0; |
| 50 | + } |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +Finally, native notifications could be displayed using the `notify` Twig function: |
| 55 | + |
| 56 | +```twig |
| 57 | +{{ stream_notifications(['/my/topic/1', '/my/topic/2']) }} |
| 58 | +{{ stream_notifications() }} |
| 59 | +
|
| 60 | +{# Calling notify without parameter will fallback to the following unique topic: 'https://symfony.com/notifier' #} |
| 61 | +``` |
| 62 | + |
| 63 | +### Using another Mercure hub |
| 64 | + |
| 65 | +By default, the `stream_notifications` is streaming the default Mercure hub. If you wanna change that behavior, you can use a compiler pass: |
| 66 | + |
| 67 | +```php |
| 68 | +// src/DependencyInjection/UseCustomNotifyMercureHubCompilerPass.php |
| 69 | + |
| 70 | +namespace App\DependencyInjection; |
| 71 | + |
| 72 | +use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface; |
| 73 | +use Symfony\Component\DependencyInjection\ContainerBuilder; |
| 74 | +use Symfony\Component\DependencyInjection\Reference; |
| 75 | + |
| 76 | +final class UseCustomNotifyMercureHubCompilerPass implements CompilerPassInterface |
| 77 | +{ |
| 78 | + public function process(ContainerBuilder $container): void |
| 79 | + { |
| 80 | + $container->getDefinition('notify.twig_extension') |
| 81 | + ->replaceArgument(0, new Reference('mercure.hub.custom')); |
| 82 | + } |
| 83 | +} |
| 84 | +``` |
| 85 | + |
| 86 | +```php |
| 87 | +// src/Kernel.php |
| 88 | + |
| 89 | +namespace App; |
| 90 | + |
| 91 | +use App\DependencyInjection\UseCustomNotifyMercureHubCompilerPass; |
| 92 | +use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait; |
| 93 | +use Symfony\Component\DependencyInjection\ContainerBuilder; |
| 94 | +use Symfony\Component\HttpKernel\Kernel as BaseKernel; |
| 95 | + |
| 96 | +final class Kernel extends BaseKernel |
| 97 | +{ |
| 98 | + use MicroKernelTrait; |
| 99 | + |
| 100 | + protected function build(ContainerBuilder $container): void |
| 101 | + { |
| 102 | + $container->addCompilerPass(new UseCustomNotifyMercureHubCompilerPass()); |
| 103 | + } |
| 104 | +} |
| 105 | +``` |
| 106 | + |
| 107 | +### Extend the default behavior |
| 108 | + |
| 109 | +Symfony UX Notify allows you to extend its default behavior using a custom Stimulus controller: |
| 110 | + |
| 111 | +```js |
| 112 | +// mynotify_controller.js |
| 113 | + |
| 114 | +import { Controller } from '@hotwired/stimulus'; |
| 115 | + |
| 116 | +export default class extends Controller { |
| 117 | + connect() { |
| 118 | + this.element.addEventListener('notify:connect', this._onConnect); |
| 119 | + } |
| 120 | + |
| 121 | + disconnect() { |
| 122 | + // You should always remove listeners when the controller is disconnected to avoid side effects |
| 123 | + this.element.removeEventListener('notify:connect', this._onConnect); |
| 124 | + } |
| 125 | + |
| 126 | + _onConnect(event) { |
| 127 | + // Event sources have just been created |
| 128 | + console.log(event.detail.eventSources); |
| 129 | + |
| 130 | + event.detail.eventSources.forEach((eventSource) => { |
| 131 | + eventSource.addEventListener('message', (event) => { |
| 132 | + console.log(event); // You can add custom behavior on each event source |
| 133 | + }); |
| 134 | + }); |
| 135 | + } |
| 136 | +} |
| 137 | +``` |
| 138 | + |
| 139 | +Then in your render call, add your controller as an HTML attribute: |
| 140 | + |
| 141 | +```twig |
| 142 | +{{ stream_notifications(options = {'data-controller': 'mynotify'}) }} |
| 143 | +``` |
| 144 | + |
| 145 | +## Backward Compatibility promise |
| 146 | + |
| 147 | +This bundle aims at following the same Backward Compatibility promise as the Symfony framework: |
| 148 | +[https://symfony.com/doc/current/contributing/code/bc.html](https://symfony.com/doc/current/contributing/code/bc.html) |
| 149 | + |
| 150 | +However it is currently considered |
| 151 | +[**experimental**](https://symfony.com/doc/current/contributing/code/experimental.html), |
| 152 | +meaning it is not bound to Symfony's BC policy for the moment. |
| 153 | + |
| 154 | +## Run tests |
| 155 | + |
| 156 | +### PHP tests |
| 157 | + |
| 158 | +```sh |
| 159 | +php vendor/bin/simple-phpunit |
| 160 | +``` |
| 161 | + |
| 162 | +### JavaScript tests |
| 163 | + |
| 164 | +```sh |
| 165 | +cd Resources/assets |
| 166 | +yarn test |
| 167 | +``` |
0 commit comments