3

我试图让 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"
我检查了所有推送数据（app_id、key、secret、cluster）
我已经安装了 pusher-js 和 laravel -echo 通过执行 npm install --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
});

4

2 回答 2

0

我通过忘记 jQuery 并使用 Vuejs 找到了一个解决方案。显然我错过了一些阻止我使用 jQuery 和 laravel Echo - Pusher 的东西。使用 Vuejs 可以正常工作。

于 2018-10-28T09:36:59.527 回答
0

您在哪里添加以下代码：

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

如果您在单独的文件中尝试此代码。您的问题将得到解决，我也遇到过我以这种方式解决的此类问题。

于 2018-10-25T17:30:39.700 回答