Laravel Reverb (AWS) 连接到 Nuxt3 (cloudflare)

Question

我有点不知所措。以前我有一个 Laravel/Vue.js 服务器，pusher.js 工作正常。

然后我切换到 Nuxt3 前端，Laravel 11 / reverb 作为后端。由于两台服务器是分开的，所以不太清楚。

在我的 nuxt 文件 .vue 中

import Echo from 'laravel-echo';

onMounted(async () => {
   
   window.Echo.channel("update-item").listen("ItemEvent", ({ item: newItem }) => {
   console.log('success');
   if (item.value.id == newItem.id) {
       console.log('success x2');
       item.value = newItem;
      }
   });
   
    
   });

Channel.php 看起来像这样

Broadcast::channel('update-item', ['item' => '456']);

我基于这个SO构建了一个nuxt插件

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

declare global {
  interface Window {
    Pusher: any;
    Echo: any;
  }
}

export default defineNuxtPlugin(() => {
  window.Pusher = Pusher
  window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxx',
    cluster: 'us2',
    forceTLS: false,
  });
})

我启动了混响，它正在工作。

我可以看到 Web 套接字已关闭，并且可以 ping 通，但我似乎没有收到任何数据？

我用完了或者有错误，要追查。

Answer 1

由于这无法放入评论部分，所以我决定将其写为答案。

您可以尝试以下一些方法：

首先，对

broadcaster

的调用中的

new Echo()

选项应该是

reverb

，而在您的情况下是

pusher

。以下是 Echo 客户端正确初始化的示例：

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

另外，请注意，我们这里没有

cluster

选项，它在混响中未使用。

您可能需要查看的另一件事是 AWS 防火墙的配置。默认情况下，Laravel Reverb 在端口 8080 上运行，因此您需要确保该端口具有 AWS 出站规则。

默认情况下，广播消息位于队列中，后台作业从该队列中读取消息并尝试运行它们，因此我建议您将

QUEUE_CONNECTION

的

.env

变量设置为

sync

，以便您基本上禁用排队行为。这只是临时的，旨在帮助您调试确切的问题。