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

Question

我有一个 symfony 5.0/API-platform 后端项目和一个 react/redux 前端项目，我想向连接的客户端发送更新（POST，PUT，DELETE）。为此，我试图在 windows 10 PC 上本地实现这一点，我安装了 mercure，根据我目前从文档中了解到的内容，我配置了实体和我的环境变量像那样:

Affectation.php

/**
- @ApiResource(mercure=true) */ class做作 { ..... }
.env.local

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

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

在浏览器的网络选项卡中，我可以注意到从后端服务器接收到的更新（服务器发送的事件在您从订阅的客户端触发它们后调用）但它们缺少新的更新数据。我不知道我错过了什么，任何帮助将不胜感激。

Answer 1

你不需要静态传递做作的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}));

Answer 2

我似乎没有从 mercure 端获得任何更新，在使用调试器并根据我的项目结构我更改了脚本以查看来自中心的更新。

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

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

Mercure & API platform: auto-publish data

reactjs

redux

api-platform.com

symfony5

mercure