安转laravel7

composer create-project --prefer-dist laravel/laravel laravel7_2022.4.4 "7.*"

.env配置

BROADCAST_DRIVER=redis REDIS_PREFIX=null QUEUE_CONNECTION=redis

安装扩展

安转predis composer require predis/predis 安装 Laravel 的相关依赖npm install 全局安装 laravel-echo-servernpm install -g laravel-echo-server

安装 Socket.io 客户端（有大坑）

安装socket.io客户端，一地要只定版本 2.2的版本可用

npm install —save socket.io-client@2.2

安装Laravel-Echo 包

npm install —save laravel-echo

初始化Socket

laravel-echo-server init

image.png

启动Socket服务

laravel-echo-server start

image.png

配置 Laravel 使 Laravel Echo Server 正常工作

  1. 打开你的 config/app.php 文件并且取消 BroadcastServiceProvider 在这个 Providers 数组中的注释：

image.png

  1. 接下来打开 resources/assets/js/bootstrap.js 文件， 或者你自己的 引入所有 JS 基础代码的 JS 文件。

现在我们要添加启动 Echo 基础服务的代码

  1. import Echo from 'laravel-echo'
  3. window.io = require('socket.io-client');
  4. window.Echo = new Echo({
  5.     broadcaster: 'socket.io',
  6.     host: window.location.hostname + ':6001'
  7. });

image.png

  1. 接下来打开 resources/assets/js/app.js 文件， 或者你自己的 引入所有 JS 基础代码的 JS 文件。

现在我们要添加启动 Echo 基础服务的代码，即我们会监听NewEvent这个事件的send广播

  1. window.Echo.channel('send')
  2.     .listen('NewEvent', (e) => {
  3.         console.log(e);
  4.     });

image.png
这里的就是也可以写到前端页面resources/views/broadcast.blade.php中：
跟人觉得该方法更好

  1. <script>
  2.     Echo.channel('send')
  3.         .listen('NewEvent', (e) => {
  4.             console.log(e);
  5.         });
  6. </script>

创建事件类

php artisan make:event NewEvent 实现ShouldBroadcast类

  1. <?php
  3. namespace App\Events;
  5. use Illuminate\Broadcasting\Channel;
  6. use Illuminate\Broadcasting\InteractsWithSockets;
  7. use Illuminate\Broadcasting\PresenceChannel;
  8. use Illuminate\Broadcasting\PrivateChannel;
  9. use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
  10. use Illuminate\Foundation\Events\Dispatchable;
  11. use Illuminate\Queue\SerializesModels;
  13. class NewEvent implements ShouldBroadcast
  14. {
  15.     use Dispatchable, InteractsWithSockets, SerializesModels;
  17.     public $message;
  18.     /**
  19.      * Create a new event instance.
  20.      *
  21.      * @return void
  22.      */
  23.     public function __construct($msg)
  24.     {
  25.         $this->message = $msg;
  26.     }
  28.     /**
  29.      * Get the channels the event should broadcast on.
  30.      *
  31.      * @return \Illuminate\Broadcasting\Channel|array
  32.      */
  33.     public function broadcastOn()
  34.     {
  35.         return new Channel('send');
  36.     }
  37. }

在前端使用socket服务

创建好路由，

Route::get("/broad",function (){
    return view("broadcast");
});

再新建一个blade.php 文件引入js文件和处理好csrf

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="/js/app.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Document</title>
</head>
<body>

</body>
</html>

编译文件

npm run dev

image.png

再次启动Socket服务

laravel-echo-server start

发起广播

在routes/console.php文件中加入以下代码，执行Artisan命令 触发事件

Artisan::command('bignews', function () {
    broadcast(new App\Events\News(date('Y-m-d h:i:s A').": BIG NEWS!"));
    $this->comment("news sent");
})->describe('Send news');

触发事件后，数据进入redis 需要开启队列，将数据发送到前端 php artisan queue:work

image.png

事件触发命令后结果图：
image.png

前端结果图片：
image.png
队列结果图片：
image.png
socket结果图
image.png