0

i have a symfony 5.0/API-platform back end project and a react/redux front project, i would like to dispatch updates(POST, PUT, DELETE) to connected clients. For that i am trying to achieve this locally on a windows 10 PC, i installed mercure, trough what i understand from the documentation so far i configured the entity and my environment variables like that:

  • Affectation.php

    /**

    • @ApiResource(mercure=true) */ class Affectation { ..... }

  • .env.local

    MERCURE_PUBLISH_URL=http://localhost:3001/.well-known/mercure MERCURE_JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.IbDnbK-5K3WB2LX9n5pYn6bLF2YispnFSUQkWqOvzHc

    MERCURE_SUBSCRIBE_URL=

then i run

mercure.exe --jwt-key="my-jwt" --addr=":3001" --allow-anonymous --cors-allowed-origins="*"

everything seem to be okay because i had log messages. Right after i tried to subscribe through my client (tab console log) to mercure updates so i ran this script in browser tab console

const eventSource = new EventSource('http://localhost:3001/.well-known/mercure?topic=' + encodeURIComponent('http://localhost:8000/affectations/53'));
eventSource.onmessage = event => {
    // Will be called every time an update is published by the server
    console.log(event);
}

So far i tried to make POST/PUT/DELETE request using postman or from edge browser, the cool thing is i see that there are published updates in the mercure console here is a log example after a PUT request sent by postman:

time="2020-08-27T12:22:07+01:00" level=info msg="Mercure started" addr=":3001" protocol=http
time="2020-08-27T12:22:09+01:00" level=info msg="New subscriber" last_event_id= remote_addr="127.0.0.1:60537" subscriber_id="urn:uuid:9ae4a3d9-9ccb-41cc-8168-21a73326d773" subscriber_topics="[http://localhost:8000/affectations/53]"
time="2020-08-27T12:22:36+01:00" level=info msg="Subscriber disconnected" last_event_id= remote_addr="127.0.0.1:60537" subscriber_id="urn:uuid:9ae4a3d9-9ccb-41cc-8168-21a73326d773" subscriber_topics="[http://localhost:8000/affectations/53]"
127.0.0.1 - - [27/Aug/2020:12:22:09 +0100] "GET /.well-known/mercure?topic=http%3A%2F%2Flocalhost%3A8000%2Faffectations%2F53 HTTP/1.1" 200 4 "http://localhost:3000/adminpanel" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36"
time="2020-08-27T12:22:53+01:00" level=info msg="New subscriber" last_event_id= remote_addr="[::1]:60588" subscriber_id="urn:uuid:7f9265cd-cea2-4674-9dd0-2a49193d4b81" subscriber_topics="[http://localhost:8000/affectations/53]"

in network tab in the browser i can notice the received updates from the back-end server (server sent events called after you trigger them from your subscribed client) but they are missing the new updated data. I don't know what i am missing, any help would be appreciated.

4

2 回答 2

0

You dont need to pass the id of the affectation statically, so instead of this

new EventSource('http://localhost:3001/.well-known/mercure?topic=' + encodeURIComponent('http://localhost:8000/affectations/53'));

do this

new EventSource('http://localhost:3001/.well-known/mercure?topic=http://localhost:8000/affectations/{id}));
于 2020-08-27T23:28:23.567 回答
0

it seemed that i get no updates from mercure side, after using the debugger and depending on my project structure i changed the script to see updates coming from the hub.

*** BACK_END_API is an environment variable and (this.props.hubURL) is coming from my redux store.

componentDidUpdate() {
        if (this.props.hubURL) {
            const url = new URL(this.props.hubURL + `?topic=${BACK_END_API}/affectations/{id}`);
            const eventSource = new EventSource(url);
            eventSource.onmessage = (event) => {
                const data = JSON.parse(event.data);
                console.log(data);
            }
        }
    }
于 2020-08-28T13:16:22.007 回答