I want to make a real-time mechanism in my (Angular, Symfony) project. I use Mercure for that. Here is the code in Synfony :

/**
     * @RestPost("/api/insertUpdateSynonyms", name ="api_insert_update_synonyms")
     * @RestRequestParam(name="old_cle", nullable=true)
     * @RestRequestParam(name="add_synonymes", nullable=true)
     * @RestRequestParam(name="new_cle", nullable=true)
     * @RestRequestParam(name="new_synonymes", nullable=true)
     *
     * @return JsonResponse
     */
    public function insertUpdateSynonyms(ParamFetcher $paramFetcher, SearchService $searchService, PublisherInterface $publisher)
    {
        try {
            $retour = $searchService->insertUpdateSynonyms($paramFetcher);
            $update = new Update(
                'http://bdc.pulse.mg/notif/suggestioncontenu',
                json_encode(['msg' => '============================= new content suggested ! ................................'])
            );
            $publisher($update);
        } catch (Exception $e) {
            $retour = array('error' => array('error_code' => $e->getCode(), 'message' => $e->getMessage()));
        }
        $response = new JsonResponse();
        $response->setData($retour);
        return $response;
    }

In Angular I created a js folder in src/assets, and I created symfony_notif_subscribers.js file in the js folder :

function notifyForSuggestionContenu() {
    const eventSource = new EventSource('http://localhost:3000/.well-known/mercure?topic=' + encodeURIComponent('http://bdc.pulse.mg/notif/suggestioncontenu'));
    eventSource.onmessage = event => {
        // Will be called every time an update is published by the server
        alert(JSON.parse(event.data));
        console.log(JSON.parse(event.data));
    }
}

I included the file in angular.json :

"scripts": [
              "node_modules/chart.js/dist/Chart.min.js",
              "src/assets/js/symfony_notif_subscribers.js"
            ]

Now inside a component, located in srcappcontainersdefault-layout, which will be displayed at the top bar of the app, I call the js function :

import {Component, TemplateRef} from '@angular/core';
import { navItems } from '../../_nav';
import { Router } from '@angular/router';
import { LogService } from '../../services/general/log.service';
import { LocalService } from '@guard/local.service';
import { API, LOCALSTORAGE, TYPE } from '@constants/constant';
import { AuthService} from '@general/auth.service'
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { GeneralServService } from '@general/general-serv.service';
import { ToastrService } from 'ngx-toastr';

declare function notifyForSuggestionContenu(): any;
@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html',
  styleUrls: ['./default-layout.component.css']
})
export class DefaultLayoutComponent {
  public sidebarMinimized = false;
  public navItems = navItems;
  affiche_search: boolean = true;
  user: any;
  modalRef: BsModalRef; 
  submitted = false;

  dataSendAdmin = {
    objectEmail: '',
    bodyEmail: '',
    attachementEmail: '',
    // toEmail: '',
    ccEmail: '',
    // reply_toEmail: ''
  }

  constructor(
    private router: Router,
    private _log: LogService,
    private localServ: LocalService,
    private authService: AuthService,
    private modalService: BsModalService,
    private generalServ: GeneralServService,
    private toastr: ToastrService
    ) { }

    ngOnInit(): void {
      this.getinfoUserInLocalStorage();
      notifyForSuggestionContenu();
    }
    ...
}

But at runtime when the Symfony sends the update then the js function is not called. What is the problem in my code ?

Source: Symfony4 Questions