Laravel 回声 - 未捕获的类型错误：无法读取未定义的属性'channel'

Question

我正在尝试让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 require pusher/pusher php server"~3.0">
我们已经检查了所有的pusher数据(app_id，key，secret，cluster

我在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
});

Answer 1

您在哪里添加以下代码：

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

如果您在单独的文件中尝试此代码。你的问题会得到解决，我也面临着这种类型的问题，我已经通过这种方式解决了。

Answer 2

我忘记了jQuery并使用Vuejs找到了一个解决方案。很明显，我遗漏了一些阻止我使用jQuery和laravel Echo-Pusher的东西。和Vuejs一起工作很好。