I published data with Mercure from Symfony :

...
use SymfonyComponentMercurePublisherInterface;
use SymfonyComponentMercureUpdate;
...
public function insertUpdateSynonyms(ParamFetcher $paramFetcher, SearchService $searchService, PublisherInterface $publisher)
{
    try {
            $searchService->insertUpdateSynonyms($paramFetcher);
            $update = new Update(
                'http://bdc.pulse.mg/notif/suggestioncontenu',
                json_encode(['status' => '============================= new content updated ! ................................'])
            );
            $retour = $publisher($update);
        } catch (Exception $e) {
            $retour = array('error' => array('error_code' => $e->getCode(), 'message' => $e->getMessage()));
        }
    $response = new JsonResponse();
    $response->setData($retour);
    return $response;
}

The Mercure hub is starting correctly :

mercure --jwt-key="!ChangeMe!" --addr="localhost:3000" --allow-anonymous --cors-allowed-origins="*"

The .env file for the Mercure :

###> symfony/mercure-bundle ###
# See https://symfony.com/doc/current/mercure.html#configuration
MERCURE_PUBLISH_URL=http://localhost:3000/.well-known/mercure
# The default token is signed with the secret key: !ChangeMe!
MERCURE_JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOltdfX0.Oo0yg7y4yMa1vr_bziltxuTCqb8JVHKxp-f_FwwOim0
###< symfony/mercure-bundle ###

In the Angular side when I click a button then I call the above Symfony code. In the component.ts file :

insertSynonyme(){
    const data = {
      old_cle: this.synoForm.value.cle_syno,
      add_synonymes: this.dataSynonyme.oldSynonyme
    };
    this.generalServ.insertSynonyme(data).subscribe( 
      res => {
        console.log("============== retour db insert = ", res);
        this.mercureServ.getServerSentEvent('http://localhost:3000/.well-known/mercure?topic=http://bdc.pulse.mg/notif/suggestioncontenu').subscribe(
           data => {
              console.log("==================== dans callback de getServerSentEvent");
              console.log(data);
           }
         );
      });
  }

Code of the service :

import { Injectable, NgZone } from "@angular/core";
import { Observable } from "rxjs";

@Injectable({
    providedIn: 'root'
})
export class MercureService {
    constructor(private zone: NgZone) {}

    /**
     * return the event source stream
     */
    getServerSentEvent(url: string): Observable<MessageEvent> {
        console.log("================== in getServerSentEvent, url = ", url);
        return new Observable(observer => {
            const eventSource = new EventSource(url);
            eventSource.onmessage = event => {
                
                console.log(event);
                
                this.zone.run(() => observer.next(event));
            };
        });
    }
}

At runtime the console only shows :

============== retour db insert =  urn:uuid:99aa2f10-aa7a-4dad-ba28-bb42f551c556
================== dans getServerSentEvent, url =  http://localhost:3000/.well-known/mercure?topic=http://bdc.pulse.mg/notif/suggestioncontenu

But there is no log displayed about the event. What is wrong in my code ?

Source: Symfony4 Questions