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

Question

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

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

Answer 1

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

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

Answer 2

最后，我想出了如何实现 Laravel Echo 与 Pusher 一起工作但没有 Vue.js

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

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

在你的Blade Template开头，在下面标记的地方，插入这行代码（只是为了避免直接使用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 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，重命名为pusher.js并复制your-project-folder/public/js
给新的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

Using Laravel Echo without Vue.js

pusher

laravel-echo

laravel-5.4