美居和vue訂閱-有解無憂

我在使用美居和 Vue 時遇到了一些困難。我想從 vue 訂閱我的美居主題，但我仍然收到 401 錯誤

我將我的美居作為 docker 鏡像運行：

sudo docker run \
                     -e MERCURE_PUBLISHER_JWT_KEY='!ChangeMe!' \
                     -e MERCURE_SUBSCRIBER_JWT_KEY='!ChangeMe!' \
                     -e ALLOW_ANONYMOUS=1 \
                     -p 1337:80 \
                     -p 1338:443 \
                     dunglas/mercure

還有我的 symfony 出版商：

class PublishController extends AbstractController
{
    /**
     * @param HubInterface $hub
     * @return Response
     * @Route("/push",name="/push")
     */
    public function publish(HubInterface $hub): Response
    {
        $update = new Update(
            '/chat',
            json_encode(['message' => "mercure push"]),
        );
        $hub->publish($update);
        return new Response('published!');
    }
}

還有我嘗試訂閱的 Vue 部分：

    document.addEventListener('DOMContentLoaded',function(){
      let url =new URL(https://localhost:1338/.well-known/mercure)
      url.searchParams.append('topic','/chat');
      const eventSource = new EventSource(url);
  
    eventSource.onmessage = (event) =>{
      console.log(event)
    }
    })

錯誤代碼：美居和vue訂閱

但是當我將通過鏈接進入，然后從我的后端進入 /push 端點時，我得到了一些美居和vue訂閱資料！

uj5u.com熱心網友回復：

您需要將更新設為私有，將第三個引數設定為 true：

$update = new Update(
            '/chat',
            json_encode(['message' => "mercure push"]),
             true
        );

并且，ALLOW_ANONYMOUS=0或者從 Caddy 引數中洗掉它

uj5u.com熱心網友回復：

好吧，我解決了問題。它不起作用的原因有兩個：

我EventSource在 Vue 中添加了 polyfill，并添加了授權 jwt 密鑰：https ://www.npmjs.com/package/event-source-polyfill
我用 nginx 創建了反向代理來解決 cors 錯誤

這兩件事解決了我的問題，仍然感謝@Francisco的回答

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/488272.html

標籤：php Vue.js 交响乐美居

上一篇：避免硬編碼角色并使用動態角色

下一篇：WSL2Nginx PHPFPM在連接到上游時失敗（111：連接被拒絕），客戶端：172.23.0.1，上游：“fastcgi://172.23.0.3:9001”