Question

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

是否有人使用此配置？我需要一个完整的步骤指导，因为正确安装Echo（我更喜欢CDN，但无法找到）。

Answer 1

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

按照here找到的所有说明进行操作。
假设您已经安装并配置了Pusher并通过npm安装了Laravel Echo，请转到your-project-folder/node_modules/laravel-echo/dist并复制Laravel公用文件夹中的echo.js（例如your-project-folder/public/lib/js）。我使用Grunt，所以我自动化了这个过程，这只是为了简单起见。
在您的Blade模板中添加引用：

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

在您的刀片模板的开头，在下面标记的点，插入这行代码（它只是为了避免直接使用echo.js的JS错误）：

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

在您的页脚中，包含所有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>

如果您想收听频道，例如通知一，你可以这样做：

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

Answer 2

首先根据laravel文档创建广播数据的事件。并检查控制台调试您的数据是否被广播。如果您的数据是广播，则使用javascript到pusher文档中给出的监听数据。

您可以在此处查看示例：https://pusher.com/docs/javascript_quick_start

Answer 3

我正在使用 laravel websockets，但我认为它应该与原始 Pusher 相同。所以：

使用 npm 安装 laravel-echo 和 pusher
转到 your-project-folder/node_modules/laravel-echo/dist 并复制 echo.js 到 your-project-folder/public/js
转到your-project-folder/node_modules/pusher-js/dist并搜索pusher.worker.js< /strong>，将其重命名为 pusher.js 并复制 your-project-folder/public/js< /em>

对于新的 pusher.js 重命名，在第一行代码中的“var Pusher”之前添加“export”，如下所示：

<块引用>
export var Pusher =

或者您可以使用我的存储库中的这个 echo.js 和 pusher.js 文件 https://github.com/HarenaGit/laravel-websockets-without-vuejs

到你想听变化的地方，你可以这样听

<script type="module"> import Echo from '{{asset('js/echo.js')}}' import {Pusher} from '{{asset('js/pusher.js')}}' window.Pusher = Pusher window.Echo = new Echo({ broadcaster: 'pusher', key: 'server-notification-key', wsHost: window.location.hostname, wsPort: 6001, forceTLS: false, disableStats: true, }); window.Echo.channel('your-channel') .listen('your-event-class', (e) => { console.log(e) }) console.log("websokets in use") </script>

使用没有Vue.js的Laravel Echo

3 个答案: