Question

我正在尝试让laravel回声在我的应用程序中工作，并且在检查了我的代码中的每个角落之后，我没有找到引起所引用错误的可能问题。显然，导入我检查过的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网站中显示的每个步骤操作
我已经完成作曲家，要求pusher / pusher-php-server“〜3.0”
我已经检查了所有推送程序数据（app_id，密钥，机密，群集）
我已经通过npm install安装了pusher-js和laravel-echo --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();
    }


}

当我进入页面并检查控制台时，我看到以下消息：
enter image description here

说实话，我不知道还要检查什么。我知道这很难诊断，但我希望你们中的任何一个都能给我一个提示。我真的很棒。

关于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可以正常工作。

Laravel Echo-未捕获的TypeError：无法读取未定义的属性'channel'

2 个答案: