时间戳

首页 > 解决方案 > 无法读取 Laravel Echo 中的事件

laravel - 无法读取 Laravel Echo 中的事件

问题描述

"laravel-echo": "^1.6.0",
"pusher-js": "^5.0.2",

我正在使用 Laravel WebSockets 使用 Laravel Echo 将事件发送到我的 Vue.js 应用程序： import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

首先，当我连接我的应用程序时，我看到了这条消息：

Connection id 473581849.201555836 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"473581849.201555836\",\"activity_timeout\":30}"}

当我断开连接时，我看到了这个：

Connection id 603442282.571320345 closed.

所以该应用程序与 Laravel WebSocket 通信良好，这没有问题，因为它从我的应用程序接收到连接和连接数据包。

当我尝试在前端读取来自服务器的数据包时，我的问题就来了，我就是无法得到它。

const echo = new Echo({
  broadcaster: 'pusher',
  cluster: process.env.WEBSOCKET_CLUSTER,
  key: process.env.WEBSOCKET_KEY,
  wsHost: process.env.WEBSOCKET_URL,
  wssHost: process.env.WEBSOCKET_URL,
  wsPort: process.env.WEBSOCKET_PORT,
  wssPort: process.env.WEBSOCKET_PORT,
  encrypted: process.env.WEBSOCKET_ENCRYPTED,
  disableStats: process.env.WEBSOCKET_DISABLE_STATS,
  enabledTransports: ['ws', 'wss']
  // auth: {
  //   headers: {
  //     'Accept': 'application/json',
  //     'Authorization': 'Bearer ' + window.localStorage.getItem('accessToken')
  //   }
  // }
});
export default ({ Vue }) => {
  Vue.prototype.$echo = echo;
};

例如，收到一个事件（这是我从 ssh 控制台得到的）：

Connection id 545411452.62710705 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"20:06:24","details":"Channel: androidMobile, Event: App\\Events\\UpdateAndroidNavBarCounts","data":"{\"message\":{\"countincompletereports\":0,\"countviewmyreports\":1002,\"countpoints\":300,\"user_id\":63}}"}}

这个事件在这里：App\Events\UpdateAndroidNavBarCounts

我无法在我的前端得到它，我试过这个：

      this.$echo.channel('androidMobile')
        .listen('.App.Events.UpdateAndroidNavBarCounts', function (data) {<------------
          console.log('This is a test 2');
          this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
        })

这个

      this.$echo.channel('androidMobile')
        .listen('App.Events.UpdateAndroidNavBarCounts', function (data) {<------------
          console.log('This is a test 2');
          this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
        })

这个：

      this.$echo.channel('androidMobile')
        .listen('.UpdateAndroidNavBarCounts', function (data) {<------------
          console.log('This is a test 2');
          this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
        })

甚至这个：

      this.$echo.channel('androidMobile')
        .listen('UpdateAndroidNavBarCounts', function (data) { <------------
          console.log('This is a test 2');
          this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
        })

我从未设法看到 console.log('This is a test 2'); 信息。

任何帮助将不胜感激，因为我已经为此苦苦挣扎了好几天，我开始相信这是一个错误。

谢谢你。

标签： laravelvue.jswebsocket

解决方案

好的，随着时间的流逝，我解决了...

我使用的是 Quasar 框架，这是我的引导文件的顶部：

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');
window.Pusher.logToConsole = true;

当我添加这个 logToConsole = true; 参数，我可以开始看到从 Android 手机到 API 的通信。

我的问题是这样的：

authEndpoint: process.env.WEBSOCKET_AUTH_URL

假设 WEBSOCKET_AUTH_URL = https://mywebsite.com

不知道为什么，但如果我添加这个：

authEndPoint: process.env.WEBSOCKET_AUTH_URL + '/broadcasting/auth'

它不起作用，网址被分成2个字符串。

我也试过这个：

authEndPoint: JSON.stringify(process.env.WEBSOCKET_AUTH_URL) + '/broadcasting/auth'

也没有运气，所以我在 .env 文件中添加了整个 url：

WEBSOCKET_AUTH_URL = https://mywebsite.com/broadcasting/auth

现在它起作用了。

推荐阅读