在没有 Vue.js 的情况下使用 Laravel Echo

Question

我有一个使用 Laravel 5.4 构建的网站，并且正在使用 Laravel Echo 和 Pusher 构建广播系统，但不幸的是，文档缺少指定使其在没有 Vue.js 的情况下工作所需的步骤。

有人用过这个配置吗？由于正确安装了 Echo，我需要一个完整的分步指南（我更喜欢 CDN，但找不到）。

Answer 1

最后，我自己弄清楚了如何使用 Pusher 但不使用 Vue.js 来实现 Laravel Echo

1. 请遵循此处的所有说明。

2. 假设您已经安装并配置了 Pusher，并且通过 npm 安装了 Laravel Echo，请转到your-project-folder/node_modules/laravel-echo/dist并复制echo.js到您的 Laravel 公共文件夹（例如your-project-folder/public/lib/js）。我使用 Grunt，所以我自动化了这个过程，只是为了简单起见。

3. 在您的 Blade 模板中添加引用：

   <script type="text/javascript" src="{{asset('lib/js/echo.js')}}"></script>

4. 在 Blade 模板的开头，在下面标记的位置，插入这行代码（只是为了避免直接使用 echo.js 出现 JS 错误）：

   <script>
       window.Laravel = <?php echo json_encode([
           'csrfToken' => csrf_token(),
       ]); ?>;
       var module = { }; /*   <-----THIS LINE */
   </script>
   

5. 在页脚中，包含所有 JS 文件后，以这种方式调用 Laravel Echo：

   <script>
       window.Echo = new Echo({
           broadcaster: 'pusher',
           key: '{{env("PUSHER_KEY")}}',
           cluster: 'eu',
           encrypted: true,
           authEndpoint: '{{env("APP_URL")}}/broadcasting/auth'
       });
   </script>
   

6. 如果你想监听一个频道，例如通知频道，你可以这样做：

   <script>
       window.Echo.private('App.User.{{Auth::user()->id}}')
           .notification((notification) => {
               doSomeAmazingStuff();
       });
   </script>