php laravel example,简单 16步走一遍 Laravel Echo 的使用

本文1870.5字，需要4.68分钟

先飚几句英文，说说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 projectlaravel new echolearning// 2. 使用 laradockgit clone https://github.com/Laradock/laradock.git// 3. 创建 .envcp env-example .env// 4. 创建 containerdocker-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 installyarn install// 7. 创建 .env 和 keycp .env.example .envphp artisan key:generate

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

使用 Laravel Echo Server

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

// 8. 配置广播驱动和 redis 服务器BROADCAST_DRIVER=redisREDIS_HOST=redis// 9. 安装 prediscomposer require predis/predis

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

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

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

// 11. 实例化 Echoimport 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监听，等待数据的到来，然后再显示在页面上。代码简单：

   Example Component