简单 16步走一遍 Laravel Echo 的使用

chavesgu 发布于2019-07-01 10:24 / 1120人阅读

摘要：在国内，个人还是不推荐使用，访问速度有所影响，而且其还是一个商业产品。今天利用最简便的步，走一遍代码集成和来使用。代码简单创建监听我们在后端添加一个被创建的事件，并继承。

先飚几句英文，说说 Laravel Echo 的作用：

One of my favorite projects in the Laravel ecosystem is Echo. Echo enables real-time web applications through the use of WebSockets and hooks directly into Laravel"s event broadcasting features. This means developers can use a familiar PHP API to send real-time data. A very common use-case for this type of functionality would be a notification or chat system.

翻译「略」

摘自：https://www.imarc.com/blog/realtime-notifications-with-laravel-echo-server-docker-and-traefik

官方文档推荐使用 Pusher 或者 laravel-echo-server (是一个使用 NodeJS + Socket.IO 实现的 WebSocket 服务端)。

在国内，个人还是不推荐使用 Pusher，访问速度有所影响，而且其还是一个商业产品。

今天利用最简便的「16」步，走一遍代码集成 laradock 和 laravel-echo-server 来使用 Laravel Echo。

搭建基础环境

// 1. new project
laravel new echolearning

// 2. 使用 laradock
git clone https://github.com/Laradock/laradock.git

// 3. 创建 .env
cp env-example .env

// 4. 创建 container
docker-compose up -d php-worker laravel-echo-server nginx redis

// 5. 进入 workspace 容器
docker-compose exec --user=laradock workspace bash

// 6. 安装插件
// 6.1 推荐使用 laravel-china 维护的 composer 国内镜像
composer config -g repo.packagist composer https://packagist.laravel-china.org

// 6.2 并行下载插件
composer global require "hirak/prestissimo"

// 6.3 配置 yarn 国内镜像
yarn config set registry "https://registry.npm.taobao.org"

// 注：以上可以在 laradock 中配置
// 6.4 执行安装
composer install

yarn install

// 7. 创建 .env 和 key
cp .env.example .env
php artisan key:generate

好了，我们开始在浏览器输入：http://localhost，网站跑起来了

使用 Laravel Echo Server

因为 laradock 集成了「Laravel Echo Server」，所以我们很方便的使用到 Laravel Echo。

// 8. 配置广播驱动和 redis 服务器
BROADCAST_DRIVER=redis
REDIS_HOST=redis

// 9. 安装 predis
composer require predis/predis

准备好后端配置后，我们开始安装前端插件，毕竟 Laravel Echo 是前端工具。

// 10. 安装 socket.io-client laravel-echo
yarn add socket.io-client laravel-echo

在 resources/assets/js/bootstrap.js 实例化 Echo：

// 11. 实例化 Echo
import Echo from "laravel-echo"

window.io = require("socket.io-client")

window.Echo = new Echo({
    broadcaster: "socket.io",
    host: window.location.hostname + ":6001"
});

// Laravel 官方推荐使用 pusher
// window.Pusher = require("pusher-js");

// window.Echo = new Echo({
//     broadcaster: "pusher",
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

接下来我们就可以使用 Echo 实例，监听后端发过来的广播或者通知了。

首先我们利用已经给的 ExampleComponent 改造下，创建 Echo 监听，等待数据的到来，然后再显示在页面上。代码简单：

我们在后端添加一个 rss 被创建的事件 RssCreatedEvent，并继承 ShouldBroadcast。

// 13. 创建 RssCreatedEvent 事件
php artisan make:event RssCreatedEvent

我们使用假数据，让它返回当前的时间，方便查看效果：

 Carbon::now()->toDateTimeString()];
    }
}

然后我们就可以做一个定时任务了，让它每隔一分钟，广播一次：

protected function schedule(Schedule $schedule)
{
    // 15. 每隔一分钟执行一次
    $schedule->call(function () {
        event(new RssCreatedEvent());
    })->everyMinute();
}

最后让首页加载 vue 组件，刷新测试:

注：需要在 header 引入

编译前端：

// 16. 运行 watch
yarn run watch-poll

刷新网页，查看运行效果：

如我们所愿，每隔一分钟，广播一次，前端 laravel-echo 监听并捕获该广播，然后读取数据，展示出来。

总结

到目前为止，我们用到的技术都有：

laradock 的使用

laravel echo server 的使用

广播事件

event() 辅助函数

$schedule 定时任务

Laravel Echo 的使用

我们基本可以使用 Laravel Echo 了，至于更深入的使用，推荐查看官网文档。

最后再一次强烈推荐大家用 laradock 来部署 Docker 开发环境，因为你想要用到的工具和环境，相信 laradock 都为你准备好了。

「完」

私有云超融合服务器 echo的php linux的echo 走一步一遍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29125.html

3分钟在Linux（Deepin）下跑起Laravel

摘要：近期在闲暇之余开启了学习之路，特地去感受那份优雅。本文更多的目的为了做一些学习中的相关记录，并且选择自认为的最佳实践。本人主力工作环境是，在裸下走一遍流程能熟悉相关依赖，更清晰认识环境搭建本质。近期在闲暇之余开启了 Laravel 学习之路，特地去感受那份优雅。正所谓万丈高楼平地起，环境的搭建乃是学习任何一个框架甚至任何一门语言最重要的起点。本文更多的目的为了做一些学习中的相关记录，...

hightopo 2019-06-28 13:18 评论0 收藏0
3分钟在Linux（Deepin）下跑起Laravel

摘要：近期在闲暇之余开启了学习之路，特地去感受那份优雅。本文更多的目的为了做一些学习中的相关记录，并且选择自认为的最佳实践。本人主力工作环境是，在裸下走一遍流程能熟悉相关依赖，更清晰认识环境搭建本质。近期在闲暇之余开启了 Laravel 学习之路，特地去感受那份优雅。正所谓万丈高楼平地起，环境的搭建乃是学习任何一个框架甚至任何一门语言最重要的起点。本文更多的目的为了做一些学习中的相关记录，...

caoym 2019-05-29 19:43 评论0 收藏0
腾讯课堂——移动易开源APP组合套件公开课视频和资料

摘要：什么是移动易开源组合套件本项目为移动易开源组合套件，包含后台服务端，提供了一个基础的后台框架前端，提供了一个与后端连接的演示。公开课视频和资料下载腾讯课堂在线学习资料视频截图讨论社区群什么是移动易开源APP组合套件？本项目为移动易开源APP组合套件，包含后台服务端，提供了一个基础的APP后台框架；前端APP，提供了一个与后端连接的演示APP。为什么要有公开课？初学者，刚刚开始...

wslongchen 2019-08-14 15:02 评论0 收藏0
Laravel 5系列教程四：数据库和Eloquent

摘要：原文来自免费视频教程地址上一篇写了一些的基本用法和给视图传递变量的几种方式，这一节我们来说说跟数据库打交道的数据库配置和强大的。原文来自： https://jellybool.com/post/programming-with-laravel-5-database-and-eloquent-model 免费视频教程地址 https://laravist.com/series/lara...

XFLY 2019-06-27 11:27 评论0 收藏0
nginx-lua-mysql 使用简介

摘要：但是要加不然会出现请求页面出现下载的情况。命令告诉服务器加载和执行文件。适合新的服务器中使用如果已有服务器，又不影响业务，可以手动安装扩展，不影响业务的使用。需要安装 Nginx 安装Nginx的echo模块安装Nginx的lua 模块安装Mysql ps: echo模块，可以让我们像在PHP使用echo一样，打印出参数。但是要加 default_type text/htm...

Jensen 2019-07-31 18:02 评论0 收藏0