npm 包 laravel-echo 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

laravel-echo是一个非常强大的工具，它是 Laravel 的 Echo 包在 JavaScript 环境中的实现。它可以帮助我们轻松地在前端实时推送数据。laravel-echo通过类似 socket.io 的机制来监听某些频道（channel），从而让我们在前端能够方便地接收实时数据。

安装

你可以通过 npm 来安装 laravel-echo 包。在你的项目目录下，执行以下命令：

npm install --save laravel-echo

然后你需要在你的应用程序中集成 laravel-echo。如果你的应用程序是基于 Vue.js，可以使用 Vue 插件集成 laravel-echo。在 app.js 中添加以下代码即可：

import Echo from 'laravel-echo'

window.echo = new Echo({
    broadcaster: 'socket.io',
    host: `${window.location.hostname}:6001`
})

这里它是基于 socket.io 的，你也可以选择其他的作为 broadcaster，如 pusher 等。其中 host 为 laravel-echo-server 推送服务的地址，默认为 http://localhost:6001。如果你使用的是其他的推送服务，可以根据实际情况进行配置。

使用

laravel-echo 的使用分为两个部分：订阅频道和监听频道。首先，你需要在你的 Vue 组件中订阅频道：

echo.channel('orders')
    .listen('OrderCreated', event => {
        console.log(event.order.message)
    })

上面的代码中，我们订阅了 orders 频道，并监听 OrderCreated 事件。其中 echo.channel('orders') 表示订阅了 orders 频道。

接下来需要看一下后台推送的 event 数据。在 Laravel 中，我们可以使用 broadcast 进行事件的推送：

broadcast(new OrderCreated($order))

通过 broadcast 能够把数据以指定的 event 类名的形式推送到绑定的频道中。下面是一个简单的 OrderCreated 事件类的编写示例代码：

-- -------------------- ---- -------
--- --------------------------------------------------

----- ------------ ---------- ---------------
-
    ------ -------

    ---
     - ------ - --- ----- ---------
     -
     - ------- ----
     --
    ------ -------- -------------------
    -
        ------------ - -------
    -

    ---
     - --- --- -------- --- ----- ------ -- --------- ---
     -
     - ------- --------------------------------------
     --
    ------ -------- -------------
    -
        ------ --- ------------------
    -

    ------ -------- -------------
    -
        ------ ---------------
    -
-

在 broadcastAs 方法中我们设置了推送的事件名为 OrderCreated。通过这个名称，我们前端就能收到推送的数据。

订阅频道之后，我们需要监听这个频道上的事件：

echo.channel('orders')
    .listen('.App\\Events\\OrderCreated', event => {
        console.log(event.order.message)
    })

在监听时，我们需要根据推送数据的 event 类名来设置监听的事件名。在这里，我们监听的是 OrderCreated 事件。

集成到非 Vue.js 项目

在非 Vue.js 项目中，我们需要手动初始化 laravel-echo。在页面中添加以下脚本代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.9.0/laravel-echo.min.js"></script>
<script>
    window.LaravelEchoInstance = new Echo({
        broadcaster: 'socket.io',
        host: `${window.location.hostname}:6001`
    });
</script>

在具体页面中使用 window.LaravelEchoInstance 即可。例如：

window.LaravelEchoInstance
    .channel('orders')
    .listen('.App\\Events\\OrderCreated', event => {
        console.log(event.order.message)
    });

总结

laravel-echo 的使用非常简单，它使得我们能够轻松地在前端实现实时数据的推送和监听。在实际开发项目时，它能够为我们提供很大的帮助。本文介绍了 laravel-echo 的集成和使用，并提供了相应的示例代码，希望能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/laravel-echo