Laravel Echo - Uncaught TypeError: Невозможно прочитать свойство 'channel' из неопределенного - PullRequest
Новая
       61

Laravel Echo - Uncaught TypeError: Невозможно прочитать свойство 'channel' из неопределенного

0 голосов
/ 25 октября 2018

Я пытаюсь заставить laravel echo работать в моем приложении, и после проверки каждого уголка в моем коде я не нахожу возможную проблему, вызывающую указанную ошибку.Очевидно, что проблема заключается в импорте Echo, который я проверил.
Я показываю вам свой код: 

$(document).ready(function(){

  var parte_id = $('#form_mensajes input[name=parte_id]').val();
  
  window.Echo.channel('parte_' + parte_id).listen('NuevoMensaje', (mensaje) => {
    var msg = '';
    if(mensaje.origen == 'proveedor'){
      msg += "<div class='derecha'>"  +  mensaje.cuerpo +  " <br><small>"+ mensaje.created_at +"</small></div>";
    } else if(mensaje.origen == 'gestor'){
      msg += "<div class='izquierda'>"  +  mensaje.cuerpo +  " <br><small>"+ mensaje.created_at +"</small></div>";
    }

    $('#caja_mensajes').append(msg);
    var d = $('#caja_mensajes');
    d.scrollTop(d.prop("scrollHeight"));
  
  });

});

В файле bootstrap.js у меня есть следующий код 

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
     broadcaster: 'pusher',
     key: 'xxxxxxxxxxxxxxxxxx',
     cluster: 'eu',
     encrypted: true
});

Я выполнил каждый шаг, показанный на сайте laravel
Я сделал, что composer требовал pusher / pusher-php-server "~ 3.0"
У меня естьпроверил все данные отправителя (app_id, ключ, секрет, кластер)
Я установил pusher-js и laravel-echo, выполнив установку npm --save laravel-echo pusher-js
Я выполнил npm run dev

Мой класс событий в laravel выглядит так 

class NuevoMensaje implements ShouldBroadcastNow{
    
    use Dispatchable, InteractsWithSockets, SerializesModels;
  
    public $mensaje;
   
    public function __construct(Mensaje $mensaje)
    {
        $this->mensaje = $mensaje;
    }
    
    public function broadcastOn()
    {
        return new Channel('parte_'.$this->mensaje->parte_id);
    }

    public function broadcastWith(){
        return [
            'cuerpo' => $this->mensaje->cuerpo,
            'created_at' => $this->mensaje->created_at,
            'origen' => $this->mensaje->origen,
        ];
    }
}

И мой контроллер 

class MensajeController extends Controller
{
    public function store(Request $request)
    {
        $mensaje = new Mensaje;
        $mensaje->cuerpo = $request->cuerpo;
        $mensaje->origen = $request->origen;
        $mensaje->parte_id = $request->parte_id;
        $mensaje->save();

        broadcast(new NuevoMensaje($mensaje))->toOthers();
        
        return $mensaje->toJson();
    }


}

Когда я захожу на страницу и проверяю консоль, я вижу следующее сообщение:
введите описание изображения здесь

Комуесли честно, я не знаю что еще проверить.Я знаю, что у меня довольно сложный диагноз, но я надеюсь, что любой из вас сможет помочь, дав мне единственную подсказку.Я был бы очень благодарен.

Что касается комментария engrhussainahmad, я прикрепил фрагмент, который вы можете найти в моем public / js / app.js, который, с моей точки зрения, демонстрирует, что код bootstrap.js правильно компилируется в ES5 

window.Pusher = __webpack_require__(36);

window.Echo = new __WEBPACK_IMPORTED_MODULE_0_laravel_echo___default.a({
  broadcaster: 'pusher',
  key: '8fc5e86877eaec2b7244',
  cluster: 'eu',
  encrypted: true
});

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Я нашел решение, забыв jQuery и выполнив его с помощью Vuejs.Очевидно, мне не хватает чего-то, что мешает мне использовать jQuery и laravel Echo - Pusher.С Vuejs работает нормально.

0 голосов
/ 25 октября 2018

Куда вы добавляете следующий код: 

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxx',
    cluster: 'eu',
    encrypted: true
})

Если вы попробуете этот код в отдельном файле.Ваша проблема будет исправлена, я также столкнулся с такой проблемой, которую я исправил таким образом.

...