Невозможно прочитать события в Laravel Echo

Question

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

Я использую Laravel WebSockets для отправки событий в мое приложение Vue.js, используя Laravel Echo как: импорт Echo из '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 \События \ 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 («Это тест 2»);сообщение.

Буду признателен за любую помощь, так как я боролся с этим в течение многих дней, и я начинаю верить, что это ошибка.

Спасибо.

Answer 1

ОК, со временем я все уладил ...

Я использовал платформу Quasar, и это было начало моего загрузочного файла:

import Echo from 'laravel-echo';

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

Когда я добавил эту logToConsole= правда;параметр, я мог бы начать видеть связь с мобильного телефона Android на API.

Моя проблема была в следующем:

authEndpoint: process.env.WEBSOCKET_AUTH_URL

скажем, WEBSOCKET_AUTH_URL = https://mywebsite.com

НетИдея почему, но если я добавлю это:

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

Это не работает, URL разбит на 2 строки.

Я также попробовал это:

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

Не повезло, поэтому вместо этого я добавил весь URL-адрес в файл .env следующим образом:

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

Теперь это работает.