3

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

有没有人有这个配置工作？我需要一个完整的分步指南，因为正确安装了 Echo（我更喜欢 CDN，但找不到）。

4

3 回答 3

4

最后，我自己弄清楚了如何使用 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>
于 2017-04-19T11:08:06.330 回答
1

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

  1. 使用 npm 安装 laravel-echo 和 pusher

  2. 转到your-project-folder/node_modules/laravel-echo/dist并将echo.js复制到your-project-folder/public/js

  3. 转到your-project-folder/node_modules/pusher-js/dist并搜索pusher.worker.js，将其重命名为pusher.js并复制your-project-folder/public/js

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

导出 var Pusher =

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

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

  <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>

于 2021-07-05T01:04:10.687 回答
0

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

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

于 2017-04-14T12:01:38.640 回答