[Mercure] Explain how to differentiate between multiple topics in JavaScript

[ThomasLandauer]

At https://symfony.com/doc/current/mercure.html#subscribing it is described how to subscribe to multiple topics:

const eventSource = new EventSource("{{ mercure(['topic1', 'topic2']) }}");

But when looking at the received data, how is it possible to know which is coming from topic1 and which from topic2?

At https://stackoverflow.com/a/71905295/1668200 it is suggested to use Update()s fifth argument $type, and in JavaScript add multiple event listeners to EventSource . Is this really the recommended way? If yes, then the recommendation would be to use the (more or less) same string for $topic and $type?

[dunglas]

As stated in the Mercure spec, the recommended way is to embed the topic in the payload.

For instance, if you use an hypermedia format such as Atom, HTML or JSON-LD, you can just add the topic in an id attribute in document.
This also works for other formats such as JSON or YAML, although the key to use to store the topic will not be standardized and will be up to you.

[ThomasLandauer]

OK, I added that at #20580

But what is $type used then for? Which other values are possible besides the default(?) message?

[dunglas]

It's to customize the SSE types. This allows to trigger ad-hoc JS events instead of the generic message one: https://developer.mozilla.org/en-US/docs/Web/API/EventSource