Mercure和API平台：自动发布数据

如何解决Mercure和API平台：自动发布数据

我有一个 symfony 5.0 / API平台后端项目和一个 react / redux 前端项目，我想调度更新（POST，PUT，DELETE）连接的客户端。为此，我试图在Windows 10 PC上本地实现此目的，我安装了 mercure ，尽管到目前为止我从文档中了解的内容都不多，但我还是这样配置了实体和环境变量：

Affectation.PHP

/ **
- @ApiResource（mercure = true） * / 阶级情感 {..... }
.env.local

MERCURE_PUBLISH_URL = http：// localhost：3001 / .well-kNown / mercure MERCURE_JWT_TOKEN = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.IbDnbK-5K3WB2LX9n5pYnF6BLF2

MERCURE_SUBSCRIBE_URL =

然后我跑步

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

一切似乎都还可以，因为我有日志消息。在我尝试通过客户端（标签控制台日志）订阅Mercure更新之后，因此我在浏览器标签控制台中运行了该脚本

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);
}

到目前为止，我尝试使用邮递员或从边缘浏览器发出POST / PUT / DELETE请求，很酷的事情是我看到在mercure控制台中有已发布的更新，这里是邮递员发送的PUT请求之后的日志示例：

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]"

在浏览器的“网络”选项卡中，

我可以注意到从后端服务器接收到的更新（服务器发送的事件是在您从订阅的客户端触发它们之后调用的），但是它们缺少新的更新数据。我不知道自己缺少什么，将不胜感激。

解决方法

您不需要静态传递影响的ID，所以代替这个

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

执行此操作

new EventSource('http://localhost:3001/.well-known/mercure?topic=http://localhost:8000/affectations/{id}));

使用调试器后，似乎没有收到来自Merure方面的更新，并且根据我的项目结构，我更改了脚本以查看来自中心的更新。

*** BACK_END_API是环境变量，并且（this.props.hubURL）来自我的redux存储。

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);
            }
        }
    }